網(wǎng)站的導航菜單是用戶(hù)閱讀了網(wǎng)頁(yè)后想進(jìn)一步了解網(wǎng)站其它部分時(shí)最重要的指示，對留住用戶(hù)至關(guān)重要。設計導航菜單的方法有許多，每個(gè)網(wǎng)站都必須有自己的導航菜單。想要設計出一個(gè)出色的導航菜單，設計師必須突破傳統限制來(lái)展示自己的創(chuàng )意。網(wǎng)站的導航是決定這個(gè)網(wǎng)站可用性的主要因素之一，如果訪(fǎng)問(wèn)者可以輕松不費力氣的找到他們想要尋找的內容，他們將更有可能留在你的網(wǎng)站上，而不是關(guān)閉網(wǎng)頁(yè)離開(kāi)。有效的導航可以幫助網(wǎng)站提高瀏覽量，改善用戶(hù)體驗，甚至增加銷(xiāo)售和利潤。

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

設計一個(gè)優(yōu)秀的導航菜單并不是那么困難，但仍然需要把握以下這些關(guān)建點(diǎn)：

1. 容易找到

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

2. 簡(jiǎn)單

一定要簡(jiǎn)單易操作，能夠幫助你的用戶(hù)快速查看哪些信息可用，以及在哪里可以找到所要查找的內容。用戶(hù)需要能夠預測你的網(wǎng)站的工作原理，而無(wú)需學(xué)習怎么做！如果他們需要考慮如何做，那么你已經(jīng)失去了他們！避免讓用戶(hù)點(diǎn)擊一個(gè)很小的倒三角然后展開(kāi)二級菜單的方式，他們可能根本找不到它。

3. 可點(diǎn)擊

確保所有導航中元素可點(diǎn)擊。在導航中使用多個(gè)分類(lèi)目錄時(shí)，所有標題元素都應該是可點(diǎn)擊的鏈接。即使使用下拉菜單，點(diǎn)擊子類(lèi)別鏈接也可能是訪(fǎng)問(wèn)者的自然傾向。不要覺(jué)得這一條可笑，我經(jīng)常發(fā)現有些網(wǎng)站的導航點(diǎn)擊后無(wú)法跳轉。

4. 一致性

盡量在所有頁(yè)面中使用相同的導航模式，這是非常重要的，因為沒(méi)有一致的設計，用戶(hù)可能會(huì )認為他在另一個(gè)網(wǎng)站。確保使用相同的導航模式，以便用戶(hù)可以輕松地訪(fǎng)問(wèn)你的網(wǎng)站而不會(huì )丟失。

5. 清楚

你的菜單文本必須描述清楚，使用簡(jiǎn)單明了的術(shù)語(yǔ)，不要讓用戶(hù)思考這里的文本意思是什么，保持你的文字簡(jiǎn)短，具有描述性并且重點(diǎn)突出。如果需要五秒以上的時(shí)間來(lái)思考文本含義再去點(diǎn)擊鏈接，那么這將會(huì )造成糟糕的用戶(hù)體驗。

6. 保持簡(jiǎn)潔

可以在垂直導航中添加更多的項目，但是主菜單中的項目不必過(guò)多，會(huì )分散用戶(hù)的注意力。一般最好不要超過(guò)8項。

7. 互動(dòng)

反饋對于任何交互都是至關(guān)重要的。當人們點(diǎn)擊或鼠標懸停在菜單項時(shí)，請確保提供下一步操作的指示。及時(shí)給予用戶(hù)任何操作的反饋能讓用戶(hù)更愿意去點(diǎn)擊導航。你可以通過(guò)更改鏈接的文字顏色，背景顏色，或對其加粗，使其與其它內容不同。

8. 排序

需要確定網(wǎng)站提供的主要功能，最重要的是什么，將最重要的項目按照重要度放在主導航中，次要的項目可以放在二級導航中。

9. 風(fēng)格

極簡(jiǎn)主義仍然是網(wǎng)頁(yè)設計的趨勢，獨特視覺(jué)風(fēng)格會(huì )使你的菜單看起來(lái)很酷，但要確保它與整個(gè)網(wǎng)站的整體設計相匹配。

10. 無(wú)障礙

網(wǎng)站可訪(fǎng)問(wèn)性永遠是衡量一個(gè)網(wǎng)站質(zhì)量的重要標準，請確保對障礙人士友好，如果你希望使用大量酷炫的 CSS 技術(shù)，請同時(shí)考慮對屏幕閱讀技術(shù)等的兼容。

下面是一個(gè)導航設計的檢查表，你可以按照下表對你的導航菜單進(jìn)行檢查：

1. 導航位置在頁(yè)面上容易找到

2. 只需要使用鼠標滑過(guò)，鼠標點(diǎn)擊就可以操作整個(gè)導航菜單

3. 每一個(gè)菜單項都是可以點(diǎn)擊并正常跳轉的

4. 導航文字簡(jiǎn)短清晰

5. 整個(gè)網(wǎng)站只使用一種導航菜單

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

7. 導航的菜單項不超過(guò)8個(gè)

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

9. 導航的風(fēng)格和網(wǎng)站整體風(fēng)格一致

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

我們將展示6個(gè)不同的精美導航菜單的網(wǎng)站，他們的風(fēng)格和設計方法各不相同，希望大家可以從中獲得一些啟發(fā)，從而設計出有自己特點(diǎn)的導航菜單。小貼士：大家可以挨個(gè)點(diǎn)擊以下導航菜單，看看他們是如何在瀏覽器上運作的。