UI網站導航設計知識與案例

　　導航設計是網站的基石。它確定了至關重要的指標，例如轉化率和跳出率，頁面停留時間，點擊量，并且通常是決定您的訪問者擁有良好體驗并以比您所說的“用戶流量”更快退出網站的決定性因素。
 

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

　　什么是網站導航設計?
 

　　網站導航設計是所有導航元素的架構，它是用戶訪問您的網站時如何找到所需內容的方式。
 

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

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

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

　　良好網站導航設計的5個最佳做法
 

　　網站導航就是幫助您的用戶找到所需的內容。當您解決此問題時，其他好處如SEO排名和可發(fā)現性也會隨之而來。在進行網站導航設計時，請牢記以下五件事：
 

　　提示1：規(guī)劃網站導航設計
 

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

　　因此，請謹慎對待該過程。這意味著坐下來，繪制出網站的所有內容資產，并確定如何鏈接到它們。
 

　　卡分類：
 

　　進行此操作的最佳方法之一是查看網站的信息體系結構-或網站上所有內容的排列和結構方式。您可以通過卡片分類練習來完成此操作。為此，請將您所有的內容元素都寫到卡片上，然后將其分配給目標用戶，然后讓用戶將卡片分類為有意義的組。
 

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

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

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

　　封閉式卡片分類會話的示例視力切記：與目標用戶實際合作進行卡片分類很重要。畢竟，在網站導航方面您可能會有偏見。
 

　　[閱讀更多：用于網站重新設計的四種研究技術
 

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

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

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

　　視覺花一些時間，然后規(guī)劃您的流程，以確保對您的用戶有意義。這使您可以設計一個“幸福的道路”(或沒有錯誤或異常的完成任務的最佳方法)，以實現您站點上最常見的目標。
 

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

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

　　開始創(chuàng)作
 

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

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

　　例如，假設您有一個有關dog狗業(yè)務的網站。您不希望導航按鈕讀取“服務”之類的內容，因為這不是人們在尋找您的服務時搜索的術語。取而代之的是，他們搜索“ pet狗”，“坐寵物”甚至“狗的護理率”。看到不同?在第一個示例模糊不清的地方，其他示例則清晰明確。
 

　　提示4 ：盡量少用漢堡包
 

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

　　盡管它對于輔助導航元素很有用，但是您不想完全依賴它，因為它阻礙了可發(fā)現性，從而影響了您的內容。
 

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

　　尋找所需的導航元素
 

　　意識到它不是立即可用
 

　　注意這里有一個菜單
 

　　確定這是一個漢堡菜單并且可以單擊
 

　　點擊那個漢堡
 

　　掃描其他菜單項的列表
 

　　找到他們要尋找的那個
 

　　點擊它
 

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

　　現在，這并不是說應該漢堡包菜單從來沒有被使用。相反，當您要包含的元素不能直接用于網站的主要目標時，請有意使用它。
 

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

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

　　提示5：遵循網站導航欄的最佳做法
 

　　以下是一些最常見的網站導航布局：
 

　　水平布局
 

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

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

　　垂直布局是一種出色的移動友好替代方案。當網站包含許多導航元素時，它們非常有用。
 

　　漢堡布局
 

　　我們在最后一個技巧中介紹了這一點，但在這里值得再次提及。漢堡菜單是一種導航布局，適用于您擁有屏幕上不適合使用的輔助導航元素的情況。
 

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