UI網(wǎng)站導(dǎo)航設(shè)計(jì)知識(shí)與案例

　　導(dǎo)航設(shè)計(jì)是網(wǎng)站的基石。它確定了至關(guān)重要的指標(biāo)，例如轉(zhuǎn)化率和跳出率，頁面停留時(shí)間，點(diǎn)擊量，并且通常是決定您的訪問者擁有良好體驗(yàn)并以比您所說的“用戶流量”更快退出網(wǎng)站的決定性因素。
 

　　但是，好的設(shè)計(jì)是什么樣的呢?一旦安裝到位，如何改進(jìn)它?本文AAA教育的武老師對(duì)什么是網(wǎng)站導(dǎo)航設(shè)計(jì)深入了解，以及優(yōu)化它的最佳技巧：
 

　　什么是網(wǎng)站導(dǎo)航設(shè)計(jì)?
 

　　網(wǎng)站導(dǎo)航設(shè)計(jì)是所有導(dǎo)航元素的架構(gòu)，它是用戶訪問您的網(wǎng)站時(shí)如何找到所需內(nèi)容的方式。
 

　　要了解其重要性，讓我們用一個(gè)比喻：想象一下有兩家服裝店。第一個(gè)完全混亂。女鞋旁邊是男褲，男領(lǐng)帶旁邊是兒童泳衣。最糟糕的是，似乎沒有任何跡象或店員可以幫助您找到所需的東西。
 

　　另一方面，第二家商店非常簡單。所有服裝均按性別和尺寸進(jìn)行組織，有很多標(biāo)牌指導(dǎo)顧客，店員隨時(shí)待命以回答任何問題。確定要花時(shí)間陪伴一個(gè)人是一個(gè)容易的選擇，對(duì)嗎?
 

　　良好的導(dǎo)航是雜亂無章的服裝商店與雜亂無章的服裝商店之間的區(qū)別。為了使您的網(wǎng)站更接近后者，請(qǐng)牢記以下一些最佳做法：
 

　　良好網(wǎng)站導(dǎo)航設(shè)計(jì)的5個(gè)最佳做法
 

　　網(wǎng)站導(dǎo)航就是幫助您的用戶找到所需的內(nèi)容。當(dāng)您解決此問題時(shí)，其他好處如SEO排名和可發(fā)現(xiàn)性也會(huì)隨之而來。在進(jìn)行網(wǎng)站導(dǎo)航設(shè)計(jì)時(shí)，請(qǐng)牢記以下五件事：
 

　　提示1：規(guī)劃網(wǎng)站導(dǎo)航設(shè)計(jì)
 

　　規(guī)劃是必不可少的。實(shí)際上，這可能是此過程中最重要的部分。您不只是想隨意創(chuàng)建導(dǎo)航按鈕。
 

　　因此，請(qǐng)謹(jǐn)慎對(duì)待該過程。這意味著坐下來，繪制出網(wǎng)站的所有內(nèi)容資產(chǎn)，并確定如何鏈接到它們。
 

　　卡分類：
 

　　進(jìn)行此操作的最佳方法之一是查看網(wǎng)站的信息體系結(jié)構(gòu)-或網(wǎng)站上所有內(nèi)容的排列和結(jié)構(gòu)方式。您可以通過卡片分類練習(xí)來完成此操作。為此，請(qǐng)將您所有的內(nèi)容元素都寫到卡片上，然后將其分配給目標(biāo)用戶，然后讓用戶將卡片分類為有意義的組。
 

　　您可能要使用兩種類型的卡片分類：
 

　　開放式卡片分類：創(chuàng)建卡片，將其提供給研究參與者，然后要求他們對(duì)卡片進(jìn)行分組。然后，他們標(biāo)記組。
 

　　開放式卡片分類會(huì)話的示例視力封閉式卡片排序：創(chuàng)建卡片并將其與創(chuàng)建的組列表一起提供給研究參與者。然后，您要求參與者將卡片分組。
 

　　封閉式卡片分類會(huì)話的示例視力切記：與目標(biāo)用戶實(shí)際合作進(jìn)行卡片分類很重要。畢竟，在網(wǎng)站導(dǎo)航方面您可能會(huì)有偏見。
 

　　[閱讀更多：用于網(wǎng)站重新設(shè)計(jì)的四種研究技術(shù)
 

　　提示2：規(guī)劃您的用戶流
 

　　在決定如何安排網(wǎng)站導(dǎo)航之前，重要的是要準(zhǔn)確地確定需要在布局中包括哪些元素。為了弄清楚這一點(diǎn)，您需要了解您的用戶將如何與之交互并最終接收您的網(wǎng)站。這是 用戶流程發(fā)揮作用的地方。
 

　　用戶流程是在網(wǎng)站上完成任務(wù)的步驟?？梢詫⑵湟暈閭鹘y(tǒng)流程圖，箭頭從一個(gè)決定指向另一個(gè)決定，直到最終到達(dá)目的地。它們通常用于繪制用戶使用數(shù)字產(chǎn)品所獲得的預(yù)期結(jié)果。
 

　　視覺花一些時(shí)間，然后規(guī)劃您的流程，以確保對(duì)您的用戶有意義。這使您可以設(shè)計(jì)一個(gè)“幸福的道路”(或沒有錯(cuò)誤或異常的完成任務(wù)的最佳方法)，以實(shí)現(xiàn)您站點(diǎn)上最常見的目標(biāo)。
 

　　總體而言，用戶流程旨在作為您的設(shè)計(jì)決策的北極星。有了它之后，您就可以開始專注于最能滿足用戶需求的內(nèi)容，而忽略其余所有內(nèi)容。
 

　　查看Freehand，滿足您的所有集思廣益需求。
 

　　開始創(chuàng)作
 

　　提示3：使用用戶友好的文字
 

　　您的所有導(dǎo)航副本都必須對(duì)用戶清晰易懂，這意味著避免使用含糊不清或過于簡單的單詞。清晰度不僅可以幫助讀者瀏覽您的網(wǎng)站，還可以幫助您的SEO。
 

　　例如，假設(shè)您有一個(gè)有關(guān)dog狗業(yè)務(wù)的網(wǎng)站。您不希望導(dǎo)航按鈕讀取“服務(wù)”之類的內(nèi)容，因?yàn)檫@不是人們?cè)趯ふ夷姆?wù)時(shí)搜索的術(shù)語。取而代之的是，他們搜索“ pet狗”，“坐寵物”甚至“狗的護(hù)理率”。看到不同?在第一個(gè)示例模糊不清的地方，其他示例則清晰明確。
 

　　提示4 ：盡量少用漢堡包
 

　　也許沒有比漢堡菜單更具爭議性的導(dǎo)航元素了。UI設(shè)計(jì)要注意細(xì)節(jié)感。
 

　　盡管它對(duì)于輔助導(dǎo)航元素很有用，但是您不想完全依賴它，因?yàn)樗璧K了可發(fā)現(xiàn)性，從而影響了您的內(nèi)容。
 

　　考慮一下：這是用戶與漢堡菜單進(jìn)行交互的過程：
 

　　尋找所需的導(dǎo)航元素
 

　　意識(shí)到它不是立即可用
 

　　注意這里有一個(gè)菜單
 

　　確定這是一個(gè)漢堡菜單并且可以單擊
 

　　點(diǎn)擊那個(gè)漢堡
 

　　掃描其他菜單項(xiàng)的列表
 

　　找到他們要尋找的那個(gè)
 

　　點(diǎn)擊它
 

　　您的用戶要做的很多(整整八個(gè)步驟)。在設(shè)計(jì)世界中，簡約為王。
 

　　現(xiàn)在，這并不是說應(yīng)該漢堡包菜單從來沒有被使用。相反，當(dāng)您要包含的元素不能直接用于網(wǎng)站的主要目標(biāo)時(shí)，請(qǐng)有意使用它。
 

　　讓我們來看一個(gè)應(yīng)用程序。這是來自優(yōu)步的一個(gè)很棒的人：
 

　　知道他們的用戶在進(jìn)入應(yīng)用程序時(shí)只想訂購汽車。他們沒有將“過去的訂單”或“法律”之類的內(nèi)容加給用戶，而是將所有這些次要元素放在漢堡菜單中。
 

　　提示5：遵循網(wǎng)站導(dǎo)航欄的最佳做法
 

　　以下是一些最常見的網(wǎng)站導(dǎo)航布局：
 

　　水平布局
 

　　一種經(jīng)過實(shí)踐檢驗(yàn)的布局，可與許多不同的屏幕配合使用。如果您要鏈接的網(wǎng)頁數(shù)量較少，則這特別好-盡管如果您擁有大型網(wǎng)站(如上述《紐約時(shí)報(bào)》)，也可以很好地使用它，對(duì)所有頁面進(jìn)行排序。
 

　　當(dāng)與下拉菜單選項(xiàng)結(jié)合使用時(shí)，例如，當(dāng)您有不同主題的小節(jié)時(shí)，水平站點(diǎn)導(dǎo)航布局也可以很好地工作。在The Verge中查看一個(gè)很好的例子。
 

　　垂直布局是一種出色的移動(dòng)友好替代方案。當(dāng)網(wǎng)站包含許多導(dǎo)航元素時(shí)，它們非常有用。
 

　　漢堡布局
 

　　我們?cè)谧詈笠粋€(gè)技巧中介紹了這一點(diǎn)，但在這里值得再次提及。漢堡菜單是一種導(dǎo)航布局，適用于您擁有屏幕上不適合使用的輔助導(dǎo)航元素的情況。
 

　　獨(dú)立報(bào)固定導(dǎo)航具有在用戶向下滾動(dòng)頁面時(shí)跟隨用戶的元素。這是保持用戶導(dǎo)向同時(shí)使網(wǎng)站其他部分始終可訪問的好方法。但請(qǐng)注意：固定導(dǎo)航可能會(huì)吞噬網(wǎng)站的大量資源。當(dāng)您只有幾個(gè)導(dǎo)航元素時(shí)使用它，以免分散您其他內(nèi)容的注意力。這篇文章的內(nèi)容你學(xué)到了嗎，更多資訊請(qǐng)持續(xù)關(guān)注AAA教育~