10條必知的網頁導航菜單設計原則

網站的導航菜單是用戶閱讀了網頁後想進一步瞭解網站其它部分時最重要的指示，對留住用戶相當重要。設計導航菜單的方法有許多，每一個網站都必須有本身的導航菜單。想要設計出一個出色的導航菜單，設計師必須突破傳統限制來展現本身的創意。網站的導航是決定這個網站可用性的主要因素之一，若是訪問者能夠輕鬆不費力氣的找到他們想要尋找的內容，他們將更有可能留在你的網站上，而不是關閉網頁離開。有效的導航能夠幫助網站提升瀏覽量，改善用戶體驗，甚至增長銷售和利潤。

貼士：設計導航欄菜單的經常使用原型工具：Axure，Mockplus，UXPin, Sketch

設計一個優秀的導航菜單並非那麼困難，但仍然須要把握如下這些關建點：

1. 容易找到

視覺上要容易區分而且能讓用戶一眼就能找到，導航文本與你的正文文本不要使用相同的顏色，字體和大小。導航文本應該突出和顯眼。對於菜單按鈕，使用高對比度顏色和清晰的文字。導航區域要保持必定的大小，用戶容易發現。導航的位置要使用慣用的位置，例如頁面頂部，左側等。

2. 簡單

必定要簡單易操做，可以幫助你的用戶快速查看哪些信息可用，以及在哪裏能夠找到所要查找的內容。用戶須要可以預測你的網站的工做原理，而無需學習怎麼作！若是他們須要考慮如何作，那麼你已經失去了他們！避免讓用戶點擊一個很小的倒三角而後展開二級菜單的方式，他們可能根本找不到它。

3. 可點擊

確保全部導航中元素可點擊。在導航中使用多個分類目錄時，全部標題元素都應該是可點擊的連接。即便使用下拉菜單，點擊子類別連接也多是訪問者的天然傾向。不要以爲這一條好笑，我常常發現有些網站的導航點擊後沒法跳轉。

4. 一致性

儘可能在全部頁面中使用相同的導航模式，這是很是重要的，由於沒有一致的設計，用戶可能會認爲他在另外一個網站。確保使用相同的導航模式，以便用戶能夠輕鬆地訪問你的網站而不會丟失。

5. 清楚

你的菜單文本必須描述清楚，使用簡單明瞭的術語，不要讓用戶思考這裏的文本意思是什麼，保持你的文字簡短，具備描述性而且重點突出。若是須要五秒以上的時間來思考文本含義再去點擊連接，那麼這將會形成糟糕的用戶體驗。

 

6. 保持簡潔

能夠在垂直導航中添加更多的項目，可是主菜單中的項目沒必要過多，會分散用戶的注意力。通常最好不要超過8項。

7. 互動

反饋對於任何交互都是相當重要的。當人們點擊或鼠標懸停在菜單項時，請確保提供下一步操做的指示。及時給予用戶任何操做的反饋能讓用戶更願意去點擊導航。你能夠經過更改連接的文字顏色，背景顏色，或對其加粗，使其與其它內容不一樣。

8. 排序

須要肯定網站提供的主要功能，最重要的是什麼，將最重要的項目按照重要度放在主導航中，次要的項目能夠放在二級導航中。

9. 風格

極簡主義仍然是網頁設計的趨勢，獨特視覺風格會使你的菜單看起來很酷，但要確保它與整個網站的總體設計相匹配。

 

10. 無障礙

網站可訪問性永遠是衡量一個網站質量的重要標準，請確保對障礙人士友好，若是你但願使用大量酷炫的 CSS 技術，請同時考慮對屏幕閱讀技術等的兼容。

下面是一個導航設計的檢查表，你能夠按照下表對你的導航菜單進行檢查：

1. 導航位置在頁面上容易找到

2. 只須要使用鼠標滑過，鼠標點擊就能夠操做整個導航菜單

3. 每個菜單項都是能夠點擊並正常跳轉的

4. 導航文字簡短清晰

5. 整個網站只使用一種導航菜單

6. 鼠標移到對應的菜單項上時能凸顯對應項

7. 導航的菜單項不超過8個

8. 導航的菜單項已按照重要度排序

9. 導航的風格和網站總體風格一致

10. 導航菜單項能夠被屏幕閱讀器正確識別

咱們將展現6個不一樣的精美導航菜單的網站，他們的風格和設計方法各不相同，但願你們能夠從中得到一些啓發，從而設計出有本身特色的導航菜單。小貼士：你們能夠挨個點擊如下導航菜單，看看他們是如何在瀏覽器上運做的。

使用的原型工具備：Axure，Mockplus，UXPin, Sketch。

Words Pictures Ideas

 

Dataveyes

Miss Julia Piep

SRG

Editer

Pervasive Light

更多設計相關乾貨（經驗教程及原型設計實例），盡在：博客 | 精選最佳產品設計和UX/UI設計資源