導(dǎo)航設(shè)計的15個UX指導(dǎo)原則
瀏覽： 時間：2015-12-16 15:12:59
為用戶導(dǎo)航是每一位網(wǎng)站和app設(shè)計者的首要職責。畢竟用戶一旦迷路，再炫酷的動效、再有趣的內(nèi)容也都毫無意義。即使我們的網(wǎng)站中有搜索功能，也不能把搜索框當成用戶導(dǎo)航的唯一工具。大多設(shè)計者已意識到這一點，并在自己的網(wǎng)站中設(shè)計了導(dǎo)航菜單。
定義：導(dǎo)航菜單是網(wǎng)站主要內(nèi)容或特征的列表，通常由一組鏈接或icon組成，并在視覺樣式上與網(wǎng)站其他內(nèi)容有顯著差異。
導(dǎo)航菜單包含但不限于導(dǎo)航條和漢堡菜單。
導(dǎo)航菜單的重要性已經(jīng)不言而喻，我們平時遇到的每一個網(wǎng)站或軟件中都有它的存在；但并不是所有的導(dǎo)航菜單都設(shè)計得準確無誤。我們也常發(fā)現(xiàn)用戶因?qū)Ш皆O(shè)計不當而感到困惑、難以操作，或者連導(dǎo)航在哪兒都不知道。
下面的設(shè)計原則，可以避免導(dǎo)航菜單出錯。
導(dǎo)航菜單要清晰可見
1.大屏中的導(dǎo)航菜單不要太小。如果空間足夠，不要將菜單隱藏。
2.把導(dǎo)航菜單放在用戶熟悉的位置。通常用戶會希望在瀏覽過的網(wǎng)站或app中的類似位置（譬如網(wǎng)站頂部、左側(cè)等）中找到他們想要的UI元素。
3.讓菜單鏈接看起來有互動感。如果菜單選項看起來不可點擊，用戶未必能認出它是導(dǎo)航。如果我們的導(dǎo)航設(shè)計融入太重的圖形、或太過追崇扁平化設(shè)計風格，會使它們看起來更像是裝飾性圖片或標題。
4.確保導(dǎo)航菜單擁有足夠的視覺吸引力。很多導(dǎo)航菜單的周圍會留有一點空白區(qū)域以從視覺上突顯它。但當網(wǎng)站UI元素比較擁擠時，如果導(dǎo)航菜單視覺比重太弱就會在各色圖形、促銷廣告、標題里迷失，不易被用戶識別。
5.菜單選項的顏色要與網(wǎng)站背景色對比鮮明。令人驚訝的是，有非常多的設(shè)計師都忽視了“對比原則”。
即便是熟悉以上規(guī)則的設(shè)計師設(shè)計出來的導(dǎo)航菜單也有可能會被用戶忽視，因為他們很難客觀地評價自己的作品——尤其是碰上比較主觀的設(shè)計標準時，比如哪個UI元素應(yīng)該擁有更明顯的視覺效果。如果你知道你的導(dǎo)航菜單在哪兒，自然能一看看到它，因為這是你設(shè)計的。因此，讓用戶參與驗證十分必要。
告訴用戶其當前位置
6.告訴用戶當前所處什么位置。用戶成功導(dǎo)航的一個最基本的標準是他自己能發(fā)現(xiàn)：“我在哪兒？”通常被選中的菜單選項在視覺上與其他選項是有差異的，這可以幫助用戶明確自己的當前所在位置（或者通過面包屑導(dǎo)航定位）。如果沒有讓用戶明確所在位置、導(dǎo)致他們迷路，那么就犯了網(wǎng)站設(shè)計最基本的錯誤。諷刺的是用戶不總是通過首頁到達目的頁，所以導(dǎo)航菜單對于用戶來說意義重大。
導(dǎo)航菜單要與用戶任務(wù)協(xié)調(diào)一致
7.使用易懂的鏈接標簽。清楚用戶要找的是什么，使用相似且相關(guān)的類別標簽。要記住導(dǎo)航菜單并不是拿自造詞和行話去忽悠人的。請使用可以準確描述網(wǎng)站內(nèi)容和特征的術(shù)語。
8.鏈接標簽要容易閱讀。減少用戶閱讀菜單具體內(nèi)容的時間，如使用左對齊的垂直菜單、或?qū)㈥P(guān)鍵詞前置。
9.對于大型網(wǎng)站來說，讓用戶通過導(dǎo)航菜單預(yù)覽子級內(nèi)容。對于喜歡挖掘網(wǎng)站各層級內(nèi)容的典型用戶來說，下拉菜單可以讓用戶快速瀏覽、節(jié)省時間。
10.為息息相關(guān)的內(nèi)容提供本地導(dǎo)航。如果用戶喜歡對一些同類商品頻繁對比、或在某個場景里完成多個任務(wù)，可以將這些臨近頁面做成本地導(dǎo)航菜單，這樣用戶就不需要在復(fù)雜的路徑里“上躥下跳”了。
11.利用視覺的傳達力。圖像、顏色等元素可以幫助用戶理解菜單選項，但也要確保這些圖形起的是積極作用（至少不能讓操作變得更難）。
導(dǎo)航菜單要易于操作
12.菜單選項要夠大、方便點擊。如果導(dǎo)航菜單的選項過小或者彼此靠得太近，會給移動用戶造成很大的困擾；大屏網(wǎng)站中導(dǎo)航菜單選項如果也設(shè)計成這樣，那就會很難操作。
13.確保下拉菜單不會太大或太小。鼠標懸停觸發(fā)的下拉菜單呈現(xiàn)時間太過短暫會給用戶帶來挫敗感，因為用戶還沒來得及點擊菜單里的某個鏈接的時候，下拉菜單就消失了。另外，太長的垂直導(dǎo)航菜單也不利于底部選項的點擊，除非滾動屏幕。最后，鼠標懸停觸發(fā)的下拉菜單不能太寬，否則會讓用戶誤以為是新頁面、并且好奇為什么自己還沒點擊就出現(xiàn)了新的“頁面”？
14.當頁面內(nèi)容很長時，可以考慮懸浮吸頂（或固底）菜單。已瀏覽到頁面底部的用戶要想回到首屏需要一次又一次地回滾鼠標（移動端則是不斷向上劃動屏幕）；如果導(dǎo)航可以懸浮吸頂，用戶就可以很方便地進行其他菜單選項的切換。這很適合小屏幕場景。
15.盡可能縮短導(dǎo)航菜單最常用操作的物理距離。下拉菜單內(nèi)容比較多時，將用戶最常點擊的鏈接放到離鼠標懸停的選項最近的地方可以減少鼠標移動的距離（移動端也類似）。最近一些app中流行的餅狀菜單則將所有菜單選項成圓（有的是半圓）狀圍繞在菜單周圍，這樣每一個選項鏈接的物理點擊距離都是最短的。
用新穎有趣的交互方式去驚艷用戶？
實際上……答案是“不”。
炫酷的效果并非我們的首要目標。對于用戶來說，最能打動他們的還是網(wǎng)站的精彩內(nèi)容、以及熟悉且操作簡單的導(dǎo)航菜單。
當然，有的時候一些創(chuàng)新型菜單的確可以提升用戶體驗（下拉菜單就是一個例子）。在某些場景下，由于新技術(shù)的獨特要求，這15條原則也未必使用——舉個例子，第4條“確保導(dǎo)航菜單擁有足夠的視覺吸引力”就不適用于語音識別。但大多數(shù)情況下，這15條都是我們需要考慮的指導(dǎo)原則，因為它們會大大提高導(dǎo)航菜單的易用性。
定義：導(dǎo)航菜單是網(wǎng)站主要內(nèi)容或特征的列表，通常由一組鏈接或icon組成，并在視覺樣式上與網(wǎng)站其他內(nèi)容有顯著差異。
導(dǎo)航菜單包含但不限于導(dǎo)航條和漢堡菜單。
導(dǎo)航菜單的重要性已經(jīng)不言而喻，我們平時遇到的每一個網(wǎng)站或軟件中都有它的存在；但并不是所有的導(dǎo)航菜單都設(shè)計得準確無誤。我們也常發(fā)現(xiàn)用戶因?qū)Ш皆O(shè)計不當而感到困惑、難以操作，或者連導(dǎo)航在哪兒都不知道。
下面的設(shè)計原則，可以避免導(dǎo)航菜單出錯。
導(dǎo)航菜單要清晰可見
1.大屏中的導(dǎo)航菜單不要太小。如果空間足夠，不要將菜單隱藏。
2.把導(dǎo)航菜單放在用戶熟悉的位置。通常用戶會希望在瀏覽過的網(wǎng)站或app中的類似位置（譬如網(wǎng)站頂部、左側(cè)等）中找到他們想要的UI元素。
3.讓菜單鏈接看起來有互動感。如果菜單選項看起來不可點擊，用戶未必能認出它是導(dǎo)航。如果我們的導(dǎo)航設(shè)計融入太重的圖形、或太過追崇扁平化設(shè)計風格，會使它們看起來更像是裝飾性圖片或標題。
4.確保導(dǎo)航菜單擁有足夠的視覺吸引力。很多導(dǎo)航菜單的周圍會留有一點空白區(qū)域以從視覺上突顯它。但當網(wǎng)站UI元素比較擁擠時，如果導(dǎo)航菜單視覺比重太弱就會在各色圖形、促銷廣告、標題里迷失，不易被用戶識別。
5.菜單選項的顏色要與網(wǎng)站背景色對比鮮明。令人驚訝的是，有非常多的設(shè)計師都忽視了“對比原則”。
即便是熟悉以上規(guī)則的設(shè)計師設(shè)計出來的導(dǎo)航菜單也有可能會被用戶忽視，因為他們很難客觀地評價自己的作品——尤其是碰上比較主觀的設(shè)計標準時，比如哪個UI元素應(yīng)該擁有更明顯的視覺效果。如果你知道你的導(dǎo)航菜單在哪兒，自然能一看看到它，因為這是你設(shè)計的。因此，讓用戶參與驗證十分必要。
告訴用戶其當前位置
6.告訴用戶當前所處什么位置。用戶成功導(dǎo)航的一個最基本的標準是他自己能發(fā)現(xiàn)：“我在哪兒？”通常被選中的菜單選項在視覺上與其他選項是有差異的，這可以幫助用戶明確自己的當前所在位置（或者通過面包屑導(dǎo)航定位）。如果沒有讓用戶明確所在位置、導(dǎo)致他們迷路，那么就犯了網(wǎng)站設(shè)計最基本的錯誤。諷刺的是用戶不總是通過首頁到達目的頁，所以導(dǎo)航菜單對于用戶來說意義重大。
導(dǎo)航菜單要與用戶任務(wù)協(xié)調(diào)一致
7.使用易懂的鏈接標簽。清楚用戶要找的是什么，使用相似且相關(guān)的類別標簽。要記住導(dǎo)航菜單并不是拿自造詞和行話去忽悠人的。請使用可以準確描述網(wǎng)站內(nèi)容和特征的術(shù)語。
8.鏈接標簽要容易閱讀。減少用戶閱讀菜單具體內(nèi)容的時間，如使用左對齊的垂直菜單、或?qū)㈥P(guān)鍵詞前置。
9.對于大型網(wǎng)站來說，讓用戶通過導(dǎo)航菜單預(yù)覽子級內(nèi)容。對于喜歡挖掘網(wǎng)站各層級內(nèi)容的典型用戶來說，下拉菜單可以讓用戶快速瀏覽、節(jié)省時間。
10.為息息相關(guān)的內(nèi)容提供本地導(dǎo)航。如果用戶喜歡對一些同類商品頻繁對比、或在某個場景里完成多個任務(wù)，可以將這些臨近頁面做成本地導(dǎo)航菜單，這樣用戶就不需要在復(fù)雜的路徑里“上躥下跳”了。
11.利用視覺的傳達力。圖像、顏色等元素可以幫助用戶理解菜單選項，但也要確保這些圖形起的是積極作用（至少不能讓操作變得更難）。
導(dǎo)航菜單要易于操作
12.菜單選項要夠大、方便點擊。如果導(dǎo)航菜單的選項過小或者彼此靠得太近，會給移動用戶造成很大的困擾；大屏網(wǎng)站中導(dǎo)航菜單選項如果也設(shè)計成這樣，那就會很難操作。
13.確保下拉菜單不會太大或太小。鼠標懸停觸發(fā)的下拉菜單呈現(xiàn)時間太過短暫會給用戶帶來挫敗感，因為用戶還沒來得及點擊菜單里的某個鏈接的時候，下拉菜單就消失了。另外，太長的垂直導(dǎo)航菜單也不利于底部選項的點擊，除非滾動屏幕。最后，鼠標懸停觸發(fā)的下拉菜單不能太寬，否則會讓用戶誤以為是新頁面、并且好奇為什么自己還沒點擊就出現(xiàn)了新的“頁面”？
14.當頁面內(nèi)容很長時，可以考慮懸浮吸頂（或固底）菜單。已瀏覽到頁面底部的用戶要想回到首屏需要一次又一次地回滾鼠標（移動端則是不斷向上劃動屏幕）；如果導(dǎo)航可以懸浮吸頂，用戶就可以很方便地進行其他菜單選項的切換。這很適合小屏幕場景。
15.盡可能縮短導(dǎo)航菜單最常用操作的物理距離。下拉菜單內(nèi)容比較多時，將用戶最常點擊的鏈接放到離鼠標懸停的選項最近的地方可以減少鼠標移動的距離（移動端也類似）。最近一些app中流行的餅狀菜單則將所有菜單選項成圓（有的是半圓）狀圍繞在菜單周圍，這樣每一個選項鏈接的物理點擊距離都是最短的。
用新穎有趣的交互方式去驚艷用戶？
實際上……答案是“不”。
炫酷的效果并非我們的首要目標。對于用戶來說，最能打動他們的還是網(wǎng)站的精彩內(nèi)容、以及熟悉且操作簡單的導(dǎo)航菜單。
當然，有的時候一些創(chuàng)新型菜單的確可以提升用戶體驗（下拉菜單就是一個例子）。在某些場景下，由于新技術(shù)的獨特要求，這15條原則也未必使用——舉個例子，第4條“確保導(dǎo)航菜單擁有足夠的視覺吸引力”就不適用于語音識別。但大多數(shù)情況下，這15條都是我們需要考慮的指導(dǎo)原則，因為它們會大大提高導(dǎo)航菜單的易用性。
瓊公網(wǎng)安備 46010602000655號