Web導(dǎo)航設(shè)計(jì)在平時(shí)的網(wǎng)頁(yè)或者系統(tǒng)設(shè)計(jì)中是最基本的設(shè)計(jì)，它關(guān)乎著整個(gè)網(wǎng)站或者系統(tǒng)最基礎(chǔ)的用戶體驗(yàn)。

解釋：文章中圖片全部圍繞導(dǎo)航的視覺(jué)形式，即大的框架，實(shí)際上細(xì)節(jié)信息是非必須的。

寫(xiě)在前面

McGovern曾說(shuō)過(guò)“相比于直接搜索，用戶更喜歡用導(dǎo)航，因?yàn)閷?dǎo)航是讓用戶做選擇題，而搜索是填空題”，由此可見(jiàn)導(dǎo)航在產(chǎn)品中的重要性。

目前蘇寧物流研發(fā)中心所負(fù)責(zé)的產(chǎn)品多數(shù)都是面向自身業(yè)務(wù)人員或者商家使用，因此平時(shí)參與設(shè)計(jì)的B端系統(tǒng)較多。

而通常情況下，由于B端產(chǎn)品本身的業(yè)務(wù)就比較復(fù)雜，所以當(dāng)重新設(shè)計(jì)或者改版一個(gè)系統(tǒng)時(shí)，在了解當(dāng)前業(yè)務(wù)背景的情況后，需要構(gòu)建整個(gè)系統(tǒng)的框架時(shí)，選擇一個(gè)合適的導(dǎo)航設(shè)計(jì)形式就顯得尤為重要。

所以，在此結(jié)合實(shí)際工作中接觸到的各類系統(tǒng)產(chǎn)品，總結(jié)了一些有關(guān)于導(dǎo)航設(shè)計(jì)的原則以及規(guī)范，方便沿用在日常的實(shí)際工作中。

◆ 本文大綱

01 導(dǎo)航設(shè)計(jì)原則

1. 保持導(dǎo)航結(jié)構(gòu)的連貫性和一致性

這里的連貫性主要表現(xiàn)在通過(guò)某些設(shè)計(jì)形式讓用戶清楚的知道每個(gè)菜單中是否有子層級(jí)，不要出現(xiàn)如果不展示或者設(shè)計(jì)不夠明顯，導(dǎo)致用戶誤認(rèn)為沒(méi)有更多內(nèi)容的導(dǎo)航菜單。

阿里云的側(cè)邊欄逐層漸進(jìn)的導(dǎo)航形式，能夠支撐龐大的業(yè)務(wù)內(nèi)容，同時(shí)帶給用戶清晰明了的導(dǎo)航體驗(yàn)。

◆阿里云側(cè)邊欄導(dǎo)航

一致性主要表現(xiàn)在保持子頁(yè)面在網(wǎng)站系統(tǒng)各個(gè)版塊導(dǎo)航結(jié)構(gòu)中層次的一致性，不要在這個(gè)版塊處于一級(jí)導(dǎo)航，而在另一個(gè)版塊卻是二級(jí)導(dǎo)航。

此外，所有的導(dǎo)航菜單，其交互形式都要保持一致，如果都是作為下一層級(jí)展開(kāi)的觸發(fā)點(diǎn)，那就都是這樣，如果點(diǎn)擊后有承載頁(yè)去實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)，那就全部都要有承載頁(yè)。

蘇寧易購(gòu)首頁(yè)的商品分類導(dǎo)航，每個(gè)一級(jí)品類既可點(diǎn)擊跳轉(zhuǎn)至該品類的承載頁(yè)面，也可鼠標(biāo)hover展示出二級(jí)品類，主要通過(guò)鼠標(biāo)獲取的焦點(diǎn)狀態(tài)來(lái)區(qū)分，在這里所有的一級(jí)導(dǎo)航其交互形式都是一致的。

◆ 蘇寧易購(gòu)品類導(dǎo)航

此外面包屑導(dǎo)航也可以很好的保持網(wǎng)站層級(jí)的連貫性和一致性，可以很好的引導(dǎo)用戶，讓用戶明白當(dāng)前瀏覽頁(yè)面在整個(gè)網(wǎng)站結(jié)構(gòu)中的位置。并能通過(guò)面包屑導(dǎo)航快速切換至另一個(gè)頁(yè)面，這種引導(dǎo)對(duì)那些從外部鏈接跳轉(zhuǎn)至深層級(jí)頁(yè)面的用戶尤為重要。

◆ 蘇寧易購(gòu)面包屑導(dǎo)航

2. 設(shè)計(jì)清晰易懂的交互方式

2.1 交互的可視化

◆ 導(dǎo)航交互的可視化

用戶通過(guò)導(dǎo)航菜單中的箭頭方向的切換來(lái)預(yù)知操作的結(jié)果，既是一種功能的可視化引導(dǎo)，也是一種操作反饋。

2.2 視覺(jué)的差異化

◆ 美團(tuán)官網(wǎng)圖標(biāo)視覺(jué)差異化

通過(guò)視覺(jué)，將不同的入口進(jìn)行差異化設(shè)計(jì)，比如美團(tuán)網(wǎng)把那些功能性圖標(biāo)和信息類圖標(biāo)做視覺(jué)上的差異化。

3. 設(shè)計(jì)扁平的導(dǎo)航結(jié)構(gòu)

3.1 限制導(dǎo)航層級(jí)

導(dǎo)航結(jié)構(gòu)的層級(jí)數(shù)量最終是由網(wǎng)站的信息層級(jí)決定的，理想狀態(tài)下，用戶需要點(diǎn)擊的導(dǎo)航層級(jí)越少，那么用戶到達(dá)他們的目標(biāo)頁(yè)面也就越快越清晰，信息層級(jí)越深，則用戶越容易被誤導(dǎo)。

在這里要注意的是：網(wǎng)站導(dǎo)航的目標(biāo)是為了讓用戶快速找到自己所需的內(nèi)容，不能一味的追求扁平的導(dǎo)航結(jié)構(gòu)，使得整個(gè)網(wǎng)站的信息分類混亂。所以，要根據(jù)情況綜合考慮信息分類的廣度與深度，對(duì)于信息的分類，常見(jiàn)的可以通過(guò)卡片分類法來(lái)進(jìn)行劃分。

◆ 扁平化導(dǎo)航和深層級(jí)導(dǎo)航

3.2 為每一層級(jí)設(shè)計(jì)獨(dú)特的視覺(jué)

利用視覺(jué)設(shè)計(jì)上的統(tǒng)一性來(lái)劃分每一個(gè)層級(jí)，這樣用戶能夠快速瀏覽理解導(dǎo)航信息，知道哪些鏈接是屬于哪個(gè)層級(jí)的導(dǎo)航項(xiàng)目。

通?？梢酝ㄟ^(guò)以下方式來(lái)區(qū)分信息層級(jí)：字體樣式、字體大小、字體權(quán)重、背景色、對(duì)齊等等。下面拉勾網(wǎng)的導(dǎo)航信息層級(jí)通過(guò)字體大小、顏色、間距來(lái)區(qū)分。

◆ 拉勾網(wǎng)職位類別導(dǎo)航

4. 考慮設(shè)備的特征和兼容性

4.1 移動(dòng)端沒(méi)有hover態(tài)*

PC端用戶可以hover主導(dǎo)航項(xiàng)目時(shí)顯示次導(dǎo)航鏈接，而移動(dòng)端沒(méi)有hover態(tài)，直接觸發(fā)點(diǎn)擊效果，如果想將兩種交互形式用在一個(gè)內(nèi)容鏈接上，可以通過(guò)設(shè)計(jì)成點(diǎn)擊不同的位置產(chǎn)生不同的點(diǎn)擊效果。

◆ Hover態(tài)與點(diǎn)擊態(tài)

*注：hover態(tài)指鼠標(biāo)未點(diǎn)擊時(shí)的懸停狀態(tài)。

4.2 響應(yīng)式設(shè)計(jì)

根據(jù)平臺(tái)的特性自適應(yīng)頁(yè)面，比如：華為云官網(wǎng)的響應(yīng)式設(shè)計(jì)，PC端采用了頂部導(dǎo)航的形式，移動(dòng)端采用了側(cè)邊欄導(dǎo)航。

◆ 華為云官網(wǎng)響應(yīng)式設(shè)計(jì)

5. 考慮信息的漸進(jìn)顯示

用戶進(jìn)入網(wǎng)站或者系統(tǒng)后，大致流程如下：

◆ 用戶進(jìn)入網(wǎng)站的大致流程

其實(shí)在這個(gè)過(guò)程中包含有三種負(fù)荷，由大到小分別是：認(rèn)知負(fù)荷>視覺(jué)負(fù)荷>行動(dòng)負(fù)荷。

研究同時(shí)表明：當(dāng)認(rèn)知負(fù)擔(dān)?。ㄓ脩艨梢圆恍枰趺此伎季椭涝趺袋c(diǎn)擊），行動(dòng)上的操作負(fù)荷可以忽略不計(jì)。

• 認(rèn)知負(fù)荷：對(duì)導(dǎo)航歸類的理解，每次進(jìn)行某項(xiàng)任務(wù)時(shí)需要思考屬于哪個(gè)導(dǎo)航分類；
• 視覺(jué)負(fù)荷：導(dǎo)航夠不夠簡(jiǎn)潔，視覺(jué)布局是否易辨認(rèn)；
• 行動(dòng)負(fù)荷：不同頁(yè)面之間跳轉(zhuǎn)切換的操作負(fù)荷。

是否需要漸進(jìn)顯示，根據(jù)情況而定：

• 當(dāng)信息分類界限非常明確，符合大多數(shù)人的認(rèn)知，可以考慮信息漸進(jìn)隱藏式的導(dǎo)航，這樣能夠減少視覺(jué)負(fù)荷，同時(shí)符合用戶認(rèn)知使得用戶能夠在無(wú)意識(shí)狀態(tài)下完成，行動(dòng)負(fù)荷幾乎沒(méi)有；
• 當(dāng)信息分類界限比較模糊，需要用戶記憶，學(xué)習(xí)且量較大，可以嘗試信息的全部平鋪式的導(dǎo)航。

◆ 阿里云的漸進(jìn)式導(dǎo)航

阿里云的官網(wǎng)的側(cè)邊欄導(dǎo)航采用了漸進(jìn)式與平鋪式兩者結(jié)合的方式，一級(jí)與二級(jí)菜單的業(yè)務(wù)分類界限相對(duì)比較明確。同時(shí)阿里云官網(wǎng)本身涉及的業(yè)務(wù)范圍很多，所以把很多業(yè)務(wù)進(jìn)行整合分類，同時(shí)對(duì)于細(xì)分業(yè)務(wù)領(lǐng)域，又通過(guò)平鋪形式進(jìn)行展示，這樣用戶方便用戶迅速找到自身所要瀏覽的業(yè)務(wù)板塊。

02導(dǎo)航設(shè)計(jì)形式對(duì)于Web端的導(dǎo)航，可以分為六種形式，分別為：

◆ 導(dǎo)航分類

1. 導(dǎo)航菜單／NavMenu

將網(wǎng)站信息進(jìn)行分組分類并以某種形式展現(xiàn)給用戶，以便用戶快速獲取信息，主要用于網(wǎng)站的流量分撥和功能聚合。

常見(jiàn)的可分為：頂部導(dǎo)航、側(cè)邊欄導(dǎo)航、混合式導(dǎo)航三種形式。

1.1頂部導(dǎo)航

最常見(jiàn)的導(dǎo)航形式，一般包含logo、菜單、個(gè)人中心三個(gè)部分，二級(jí)菜單一般聚合在下拉菜單里，鼠標(biāo)hover出現(xiàn)二級(jí)或者更多級(jí)菜單。

優(yōu)點(diǎn)：

• 符合用戶認(rèn)知習(xí)慣，用戶能容易上手；
• 符合用戶橫向閱讀習(xí)慣，更易讀；
• 給頁(yè)面預(yù)留的版面大，帶給用戶的沉浸感更強(qiáng)，適合于橫向通屏的頁(yè)面，多見(jiàn)于公司官網(wǎng)；
• 在導(dǎo)航的深度上可擴(kuò)展性較強(qiáng)，在下拉菜單中可根據(jù)業(yè)務(wù)需求靈活的增加層級(jí)和版塊。

缺點(diǎn)：

• 由于橫向幅度有限，所以對(duì)一級(jí)菜單的標(biāo)題字?jǐn)?shù)有較高的限制要求；
• 此種導(dǎo)航形式對(duì)一級(jí)菜單數(shù)量也有限制，一般為4～6個(gè)，這樣隨著業(yè)務(wù)的擴(kuò)展，廣度上就會(huì)受限。

◆頂部導(dǎo)航

1.2 側(cè)邊欄導(dǎo)航

多用于二級(jí)導(dǎo)航，將功能分組，默認(rèn)展開(kāi)，為節(jié)省區(qū)域空間，有的側(cè)邊欄會(huì)提供點(diǎn)擊收起左側(cè)欄功能。根據(jù)一級(jí)標(biāo)題是否有承載的頁(yè)面，沒(méi)有的話通常置灰，點(diǎn)擊無(wú)交互事件。

優(yōu)點(diǎn)：導(dǎo)航標(biāo)題字?jǐn)?shù)放寬，菜單的廣度上有所提升（菜單導(dǎo)航數(shù)量放寬，局部可以自定義）

缺點(diǎn)：

• 垂直的設(shè)計(jì)形式減弱了閱讀性，用戶不容易識(shí)別組別的劃分；
• 菜單深度上有所局限。

◆ 側(cè)邊欄導(dǎo)航

下面是微信公眾平臺(tái)的導(dǎo)航設(shè)計(jì)，采用的是擴(kuò)展形式3，其導(dǎo)航中有一個(gè)“添加功能插件”的自定義版塊，可以對(duì)二級(jí)菜單進(jìn)行自定義擴(kuò)展。

◆ 微信公眾平臺(tái)

1.3 混合式導(dǎo)航

一般用于復(fù)雜的多類目的網(wǎng)站結(jié)構(gòu)，鼠標(biāo)hover一級(jí)分類，出現(xiàn)對(duì)應(yīng)的下一級(jí)分類。具有代表性的網(wǎng)頁(yè)比如淘寶、美團(tuán)等業(yè)務(wù)或者品類較多的網(wǎng)站。

2. 面包屑／Breadcrumb

面包屑一般用于顯示當(dāng)前頁(yè)面在信息架構(gòu)中的路徑和位置，并提供能夠快速跳轉(zhuǎn)其他頁(yè)面入口。

主要在以下場(chǎng)景中使用：

• 在系統(tǒng)層級(jí)結(jié)構(gòu)較深，通常是2個(gè)層級(jí)以上；
• 需要告訴用戶當(dāng)前瀏覽頁(yè)面所處的層級(jí)關(guān)系；
• 靈活的在各個(gè)路徑層級(jí)中切換跳轉(zhuǎn)。

◆ 面包屑

◆ 蘇寧易購(gòu)面包屑導(dǎo)航

3. 標(biāo)簽頁(yè)／Tabs

標(biāo)簽頁(yè)在網(wǎng)站和后臺(tái)系統(tǒng)中主要是一個(gè)用于并列層級(jí)切換的導(dǎo)航組件。

主要在以下場(chǎng)景中使用：

• 某個(gè)模塊二級(jí)并列內(nèi)容的切換；
• 系統(tǒng)平臺(tái)的視圖切換。

◆ 標(biāo)簽頁(yè)

◆ 美團(tuán)標(biāo)簽導(dǎo)航

4. 分頁(yè)／Pagination

分頁(yè)組件也屬于導(dǎo)航形式的一種，主要是用于列表、feed流分步加載的組件，考慮到有的時(shí)候信息量過(guò)大，加載時(shí)間過(guò)長(zhǎng)，同時(shí)方便切換已加載部分，從而采用分頁(yè)形式。

基本的分頁(yè)形式僅提供分頁(yè)，在數(shù)據(jù)量很大的情況下，還提供跳轉(zhuǎn)和自定義功能。

最常見(jiàn)的比如：瀏覽器的搜索結(jié)果一般都會(huì)采用分頁(yè)形式（下圖百度的搜索結(jié)果頁(yè)），這樣不需要一次性加載全部信息，減少用戶等待時(shí)間，且用戶可以在搜索結(jié)果不同頁(yè)面間進(jìn)行切換。

◆ 分頁(yè)

5. 步驟條／Steps

步驟條可以算作一種引導(dǎo)用戶按照流程完成任務(wù)的導(dǎo)航形式，一般用于需要用戶完成較為復(fù)雜的任務(wù)，將一個(gè)任務(wù)拆開(kāi)分步完成，減少用戶記憶負(fù)擔(dān)，且通過(guò)步驟條來(lái)顯示任務(wù)完成進(jìn)度，為用戶提供心理預(yù)期。

◆ 步驟條

6. 下拉菜單／Dropdown

下拉菜單是一個(gè)將功能菜單或者動(dòng)作入口聚合并隱藏的導(dǎo)航形式，一般在網(wǎng)頁(yè)或者系統(tǒng)中將操作聚合，鼠標(biāo)點(diǎn)擊或者h(yuǎn)over狀態(tài)下展開(kāi)。

◆ 下拉菜單

◆ 蘇寧易購(gòu)頂部下拉菜單

03 實(shí)例應(yīng)用

目前在蘇寧物流研發(fā)中心的相關(guān)產(chǎn)品中經(jīng)常會(huì)對(duì)之前老版的系統(tǒng)進(jìn)行體驗(yàn)改版，體驗(yàn)改版的目標(biāo)多數(shù)都是因?yàn)闊o(wú)法滿足現(xiàn)有的業(yè)務(wù)需求或者是之前的老版系統(tǒng)交互體驗(yàn)需要提升。

在這里分享一下蘇寧物流的大數(shù)據(jù)運(yùn)營(yíng)和管理平臺(tái)——天眼。

天眼系統(tǒng)目前一方面是整合所有的蘇寧物流數(shù)據(jù)，并參與社會(huì)數(shù)據(jù)置換；另一方面涵蓋全流程監(jiān)控、風(fēng)險(xiǎn)預(yù)警、產(chǎn)能調(diào)節(jié)、管理報(bào)表，經(jīng)營(yíng)及運(yùn)營(yíng)指標(biāo)等職能，實(shí)現(xiàn)數(shù)據(jù)化管理、數(shù)據(jù)化運(yùn)營(yíng)，同時(shí)構(gòu)建內(nèi)部運(yùn)營(yíng)和外部服務(wù)的數(shù)據(jù)管理體系，提高服務(wù)透明度，提升服務(wù)水平。

天眼系統(tǒng)由于是整合所有的蘇寧物流數(shù)據(jù)，所以總體來(lái)說(shuō)業(yè)務(wù)板塊較多，同時(shí)層級(jí)也較深，信息架構(gòu)上橫向和縱向都較為復(fù)雜。

老版系統(tǒng)在導(dǎo)航設(shè)計(jì)上，采用的是F型導(dǎo)航的形式，用戶需要在橫向和縱向上來(lái)回切換，容易引發(fā)視覺(jué)錯(cuò)亂。此外，導(dǎo)航板塊占用整個(gè)界面太多面積，使得數(shù)據(jù)看板的界面占比僅有56.3%，這在一般的筆記本界面，很難能夠看全整個(gè)數(shù)據(jù)表格。

◆天眼老版系統(tǒng)界面

本次的對(duì)于天眼的設(shè)計(jì)改版，設(shè)計(jì)目標(biāo)主要有兩方面：

1. 需要統(tǒng)一交互和視覺(jué)體驗(yàn)，讓數(shù)據(jù)可視化和信息層級(jí)化，提高日常物流數(shù)據(jù)的運(yùn)營(yíng)和管理；
2. 隨著蘇寧物流業(yè)務(wù)板塊的增長(zhǎng)，包括蘇寧小店的調(diào)撥運(yùn)輸、蘇寧冷鏈的相關(guān)數(shù)據(jù)，需要一個(gè)系統(tǒng)框架結(jié)構(gòu)去支撐和擴(kuò)展以滿足更多業(yè)務(wù)需求數(shù)據(jù)的展示。

◆ 天眼改版后系統(tǒng)界面布局

◆ 天眼改版后系統(tǒng)界面導(dǎo)航

改版設(shè)計(jì)中，我們將導(dǎo)航菜單歸納整理成一個(gè)版塊，考慮到使用天眼的多數(shù)為業(yè)務(wù)人員，監(jiān)測(cè)數(shù)據(jù)都是對(duì)應(yīng)到自己負(fù)責(zé)的版塊，各個(gè)版塊之間的獨(dú)立性較強(qiáng)。因此，在進(jìn)入相應(yīng)頁(yè)面后很少會(huì)來(lái)回的切換頁(yè)面，所以采用漸進(jìn)式側(cè)邊欄導(dǎo)航形式，同時(shí)還可以將其隱藏至左上角菜單導(dǎo)航按鈕。

這種導(dǎo)航的設(shè)計(jì)形式，不僅能夠滿足后續(xù)業(yè)務(wù)版塊的擴(kuò)展需求，同時(shí)導(dǎo)航收起的形式也能夠使得數(shù)據(jù)展示的界面占比高達(dá)90%以上，這樣用戶進(jìn)入某個(gè)版塊頁(yè)面查看對(duì)應(yīng)數(shù)據(jù)時(shí)，能夠最大程度的在屏幕上看到整體數(shù)據(jù)情況，提升數(shù)據(jù)運(yùn)營(yíng)管理的體驗(yàn)和效率。

04 總結(jié)

Web導(dǎo)航設(shè)計(jì)在平時(shí)的網(wǎng)頁(yè)或者系統(tǒng)設(shè)計(jì)中是最基本的設(shè)計(jì)，它關(guān)乎著整個(gè)網(wǎng)站或者系統(tǒng)最基礎(chǔ)的用戶體驗(yàn)。

對(duì)于用戶而言，是否好用易用，是否能夠快速的找到自己想要瀏覽的內(nèi)容和頁(yè)面，是否能夠明白自己從哪里來(lái)又去向哪里？對(duì)于產(chǎn)品本身而言，是否能夠支持業(yè)務(wù)內(nèi)容，是否具有后期的可擴(kuò)展性？

以上諸多問(wèn)題都是需要在導(dǎo)航設(shè)計(jì)中著重考慮的，所以分析和總結(jié)各種導(dǎo)航形式，思考它們的適用場(chǎng)景，是很有必要的，僅以本文與同行們共同探討。

參考文獻(xiàn)：

1. 公眾號(hào)吳軼：Web端設(shè)計(jì)組件篇——導(dǎo)航類
2. 人人都是產(chǎn)品經(jīng)理：導(dǎo)航設(shè)計(jì)，4個(gè)要點(diǎn)教你設(shè)計(jì)更好的導(dǎo)航

作者：王康，蘇寧物流研發(fā)中心交互設(shè)計(jì)師

本文由@王康 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自@Unsplash, 基于CC0協(xié)議