導(dǎo)航常見形式有：水平導(dǎo)航、垂直導(dǎo)航以及組合導(dǎo)航，主要針對這三種導(dǎo)航討論。

在選擇時，作為設(shè)計師我們需要了解產(chǎn)品的范圍層（內(nèi)容和功能）和結(jié)構(gòu)層（信息框架和交互），初步把握菜單的廣度和深度，充分了解各種導(dǎo)航的優(yōu)缺點外；還可以再進(jìn)一步考慮到用戶體驗的，了解用戶的認(rèn)知、操作、視覺負(fù)荷。以及后臺管理的主要內(nèi)容及表現(xiàn)形式、中英文切換差異、產(chǎn)品是否有根據(jù)角色劃分功能權(quán)限等細(xì)節(jié)。

一、各類導(dǎo)航的基本表現(xiàn)形式及優(yōu)缺點：

水平導(dǎo)航：

水平導(dǎo)航的優(yōu)點：

1.位于頂部，為內(nèi)容騰出了更多的空間。（一些類目多的大型表格頁，垂直導(dǎo)航占用更多屏幕寬度，水平導(dǎo)航很大程度能夠減少用戶因表單展示不全而鼠標(biāo)來回橫劃拖動的不便。）

2對于閱讀的視覺干擾小。符合上而下瀏覽的習(xí)慣，相對于縱向?qū)Ш讲粫驍嘤脩魧τ趦?nèi)容的沉浸感。

3.現(xiàn)代人對于橫向閱讀快于縱向閱讀，對于菜單的獲取速度更快。

4.排版穩(wěn)定，不受用戶終端顯示器的影響。

水平導(dǎo)航的缺點：

1.擴(kuò)展性有限，面積較小菜單的廣度和深度受限制。導(dǎo)航標(biāo)題必須很短，不適合一級導(dǎo)航很多的信息結(jié)構(gòu)。

2.水平導(dǎo)航懸浮展開更深層菜單點擊操作后一般會收起，視覺定位沒有縱向菜單二三級菜單外漏那么明顯。

3.在縱向空間上有些犧牲，占用界面高度。

水平導(dǎo)航適用于：內(nèi)容較為簡單，或追求沉浸式閱讀操作的后臺。一般固定在頂部導(dǎo)航，方便頁面切換。

尺寸（大部分系統(tǒng)類）：64px;

計算公式：48+8n

垂直導(dǎo)航：

(垂直導(dǎo)航展開）

(垂直導(dǎo)航收起）

垂直導(dǎo)航的優(yōu)點：

1.一般位于左側(cè)不會占用屏高，而且內(nèi)容橫向空間有限時，可以折疊收起，空間擴(kuò)展更強(qiáng)。

2.在國內(nèi)操作后臺更流行常見，對于菜單欄文本長度容載量更大。

3.操作效率高，在菜單切換時鼠標(biāo)移動上下距離更短，用戶在操作和瀏覽中可以快速的定位和切換。

4.擴(kuò)展性強(qiáng)，可以通納大量、多級菜單。一、二、三級菜單可以更流暢且根據(jù)關(guān)聯(lián)性的展示。

垂直導(dǎo)航的缺點：

1.操作菜單欄，展開收起二級菜單需要手動多次點擊。

2.視覺層次上不如橫向?qū)Ш揭欢墝?dǎo)航視覺區(qū)分明顯。

3.受使用者設(shè)備影響，整個頁面排版不穩(wěn)定。

垂直導(dǎo)航適用于：專注于功能，快速切換操作，有一定復(fù)雜度的后臺。

側(cè)邊導(dǎo)航寬度計算公式：200+8n

混合型導(dǎo)航：

混合的導(dǎo)航綜合了水平導(dǎo)航、垂直導(dǎo)航。層級可以擴(kuò)展到二、三級菜單，且能夠更加清晰的區(qū)分常用業(yè)務(wù)功能操作和輔助操作（如站點名稱、欄目、搜索、信息、用戶ID等。

混合型導(dǎo)航的優(yōu)缺點也綜合了水平和垂直導(dǎo)航的優(yōu)缺點。

混合導(dǎo)航適用于：功能模塊較多、復(fù)雜度較大的后臺。

二、進(jìn)一步的深入考慮

1.功能較多的B端后臺，是否考慮了根據(jù)用戶角色配置權(quán)限功能，保持每級的菜單項在7+-2左右，為了避免菜單項過多用戶難以記憶。

2.對于一般系統(tǒng)來說，菜但層級最多到三級就可以了，層級不易過深。

3.導(dǎo)航的設(shè)計在范圍層要考慮：產(chǎn)品功能的數(shù)量及嵌套關(guān)系。在用戶層要考慮：用戶的認(rèn)知負(fù)荷（思考和記憶）；視覺負(fù)荷（瀏覽習(xí)慣與辨識度）；行動負(fù)荷（點擊、操作鼠標(biāo)左右拖動進(jìn)度條、頁面是否需要經(jīng)常切換等）；內(nèi)容層：以何種內(nèi)容為主，內(nèi)容在橫向上還是縱向上需要更大的展示區(qū)域。

4.認(rèn)知負(fù)荷小于行動負(fù)荷時，對于用戶更友好。用戶必須經(jīng)過十幾次點擊才能完成任務(wù)，結(jié)果他們完成時還是會抬頭笑道：“好輕松??！”這是因為每個步驟都很合理，都提供了用戶所預(yù)期的信息。他們不必動腦思考，思考的負(fù)荷比點擊更沉重?！对O(shè)計師要懂心理學(xué)》? Susan Weinschenk? 第四章 人如何思考。

5.導(dǎo)航菜單語言清晰易理解，信息歸類屬性界限清晰，信息記憶學(xué)習(xí)成本較低的適合菜單遞進(jìn)式展開；如果信息分類屬性模糊，學(xué)習(xí)成本較高需要用戶記憶的則推薦平鋪式導(dǎo)航。

6.如果有中英文切換功能的話，考慮中英文的語言差異，中文字符較為緊湊。相同功能英文表述可能會更長。

三、思考題

1.當(dāng)三級導(dǎo)航無法滿足需求，子導(dǎo)航內(nèi)出現(xiàn)更多的導(dǎo)航還有那些表現(xiàn)形式解決辦法？

2.導(dǎo)航背景色是與內(nèi)容頁面明顯區(qū)別好or弱化導(dǎo)航視覺層次背景色與內(nèi)容頁視覺層次相近好？

文章參考：

1.作者：maye 《ToB web后臺產(chǎn)品設(shè)計：導(dǎo)航設(shè)計》

鏈接：http://www.itdecent.cn/p/19d36bb29d62? 來源：簡書

2.Antdesign 組件-layout-布局介紹