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

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

寫在前面

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

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

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

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

◆ 本文大綱

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

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

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

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

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

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

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

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

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

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

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

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

2.1 交互的可視化

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

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

2.2 視覺的差異化

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

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

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

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

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

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

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

3.2 為每一層級設(shè)計獨(dú)特的視覺

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

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

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

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

4.1 移動端沒有hover態(tài)*

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

◆ 導(dǎo)航分類

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

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

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

1.1頂部導(dǎo)航

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

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

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

缺點(diǎn)：

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

◆頂部導(dǎo)航

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

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

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

缺點(diǎn)：

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

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

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

◆ 微信公眾平臺

1.3 混合式導(dǎo)航

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

2. 面包屑／Breadcrumb

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

主要在以下場景中使用：

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

◆ 面包屑

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

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

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

主要在以下場景中使用：

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

◆ 標(biāo)簽頁

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

4. 分頁／Pagination

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

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

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

◆ 分頁

5. 步驟條／Steps

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

◆ 步驟條

6. 下拉菜單／Dropdown

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

◆ 下拉菜單

◆ 蘇寧易購頂部下拉菜單

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

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

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

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

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

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

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

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

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

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

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

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

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

04 總結(jié)

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

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

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

參考文獻(xiàn)：

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

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

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

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