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

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

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

水平導(dǎo)航：

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

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

2對(duì)于閱讀的視覺(jué)干擾小。符合上而下瀏覽的習(xí)慣，相對(duì)于縱向?qū)Ш讲粫?huì)打斷用戶對(duì)于內(nèi)容的沉浸感。

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

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

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

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

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

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

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

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

計(jì)算公式：48+8n

垂直導(dǎo)航：

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

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

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

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

2.在國(guó)內(nèi)操作后臺(tái)更流行常見(jiàn)，對(duì)于菜單欄文本長(zhǎng)度容載量更大。

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

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

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

1.操作菜單欄，展開(kāi)收起二級(jí)菜單需要手動(dòng)多次點(diǎn)擊。

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

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

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

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

混合型導(dǎo)航：

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

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

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

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

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

2.對(duì)于一般系統(tǒng)來(lái)說(shuō)，菜但層級(jí)最多到三級(jí)就可以了，層級(jí)不易過(guò)深。

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

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

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

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

三、思考題

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

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

文章參考：

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

鏈接：http://m.itdecent.cn/p/19d36bb29d62? 來(lái)源：簡(jiǎn)書(shū)

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