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

目前蘇寧物流研發(fā)中心所負責的產(chǎn)品多數(shù)都是面向自身業(yè)務人員或者商家使用，因此平時參與設計的B端系統(tǒng)較多，而通常情況下，由于B端產(chǎn)品本身的業(yè)務就比較復雜，所以當重新設計或者改版一個系統(tǒng)時，在了解當前業(yè)務背景的情況后，需要構建整個系統(tǒng)的框架時，選擇一個合適的導航設計形式就顯得尤為重要。所以在此結合實際工作中接觸到的各類系統(tǒng)產(chǎn)品，總結了一些有關于導航設計的原則以及規(guī)范，方便沿用在日常的實際工作中。

◆ 本文大綱

01

導航設計原則

1、保持導航結構的連貫性和一致性

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

阿里云的側邊欄逐層漸進的導航形式，能夠支撐龐大的業(yè)務內容，同時帶給用戶清晰明了的導航體驗。

◆ 阿里云側邊欄導航

一致性主要表現(xiàn)在保持子頁面在網(wǎng)站系統(tǒng)各個版塊導航結構中層次的一致性，不要在這個版塊處于一級導航，而在另一個版塊卻是二級導航。此外所有的導航菜單，其交互形式都要保持一致，如果都是作為下一層級展開的觸發(fā)點，那就都是這樣，如果點擊后有承載頁去實現(xiàn)頁面跳轉，那就全部都要有承載頁。

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

◆ 蘇寧易購品類導航

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

◆ 蘇寧易購面包屑導航

2、設計清晰易懂的交互方式

2.1 交互的可視化?

◆ 導航交互的可視化

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

2.2 視覺的差異化

◆ 美團官網(wǎng)圖標視覺差異化

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

3、設計扁平的導航結構

3.1 限制導航層級

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

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

◆ 扁平化導航和深層級導航

3.2 為每一層級設計獨特的視覺

利用視覺設計上的統(tǒng)一性來劃分每一個層級，這樣用戶能夠快速瀏覽理解導航信息，知道哪些鏈接是屬于哪個層級的導航項目。通常可以通過以下方式來區(qū)分信息層級：字體樣式、字體大小、字體權重、背景色、對齊等等。下面拉勾網(wǎng)的導航信息層級通過字體大小、顏色、間距來區(qū)分。

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

4、考慮設備的特征和兼容性

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

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

◆ Hover態(tài)與點擊態(tài)

*注：hover態(tài)指鼠標未點擊時的懸停狀態(tài)。

4.2 響應式設計

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

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

5、考慮信息的漸進顯示

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

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

其實在這個過程中包含有三種負荷，由大到小分別是：認知負荷>視覺負荷>行動負荷，研究同時表明：當認知負擔小（用戶可以不需要怎么思考就知道怎么點擊），行動上的操作負荷可以忽略不計。

認知負荷：對導航歸類的理解，每次進行某項任務時需要思考屬于哪個導航分類；

視覺負荷：導航夠不夠簡潔，視覺布局是否易辨認；

行動負荷：不同頁面之間跳轉切換的操作負荷。

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

1）當信息分類界限非常明確，符合大多數(shù)人的認知，可以考慮信息漸進隱藏式的導航，這樣能夠減少視覺負荷，同時符合用戶認知使得用戶能夠在無意識狀態(tài)下完成，行動負荷幾乎沒有；

2）當信息分類界限比較模糊，需要用戶記憶，學習且量較大，可以嘗試信息的全部平鋪式的導航。

◆ 阿里云的漸進式導航

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

02

導航設計形式

對于Web端的導航，可以分為六種形式，分別為：

◆ 導航分類

1、導航菜單／NavMenu

將網(wǎng)站信息進行分組分類并以某種形式展現(xiàn)給用戶，以便用戶快速獲取信息，主要用于網(wǎng)站的流量分撥和功能聚合。常見的可分為：頂部導航、側邊欄導航、混合式導航三種形式。

1.1 頂部導航

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

優(yōu)點：

? 符合用戶認知習慣，用戶能容易上手；

? 符合用戶橫向閱讀習慣，更易讀；

? 給頁面預留的版面大，帶給用戶的沉浸感更強，適合于橫向通屏的頁面，多見于公司官網(wǎng)；

? 在導航的深度上可擴展性較強，在下拉菜單中可根據(jù)業(yè)務需求靈活的增加層級和版塊。

缺點：

? 由于橫向幅度有限，所以對一級菜單的標題字數(shù)有較高的限制要求；

此種導航形式對一級菜單數(shù)量也有限制，一般為4～6個，這樣隨著業(yè)務的擴展，廣度上就會受限。

◆ 頂部導航

1.2 側邊欄導航

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

優(yōu)點：

? 導航標題字數(shù)放寬，菜單的廣度上有所提升（菜單導航數(shù)量放寬，局部可以自定義）

缺點：

? 垂直的設計形式減弱了閱讀性，用戶不容易識別組別的劃分；

? 菜單深度上有所局限。

◆ 側邊欄導航

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

◆ 微信公眾平臺

1.3 混合式導航

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

2、面包屑／Breadcrumb

面包屑一般用于顯示當前頁面在信息架構中的路徑和位置，并提供能夠快速跳轉其他頁面入口。

主要在以下場景中使用：

? 在系統(tǒng)層級結構較深，通常是2個層級以上；

? 需要告訴用戶當前瀏覽頁面所處的層級關系；

靈活的在各個路徑層級中切換跳轉。

◆ 面包屑

◆ 蘇寧易購面包屑導航

3、標簽頁／Tabs

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

主要在以下場景中使用：

? 某個模塊二級并列內容的切換；

? 系統(tǒng)平臺的視圖切換。

◆ 標簽頁

◆ 美團標簽導航

4、分頁／Pagination

分頁組件也屬于導航形式的一種，主要是用于列表、feed流分步加載的組件，考慮到有的時候信息量過大，加載時間過長，同時方便切換已加載部分，從而采用分頁形式?；镜姆猪撔问絻H提供分頁，在數(shù)據(jù)量很大的情況下，還提供跳轉和自定義功能。最常見的比如瀏覽器的搜索結果一般都會采用分頁形式（下圖百度的搜索結果頁），這樣不需要一次性加載全部信息，減少用戶等待時間，且用戶可以在搜索結果不同頁面間進行切換。

◆ 分頁

5、步驟條／Steps

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

◆ 步驟條

6、下拉菜單／Dropdown

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

◆ 下拉菜單

◆ 蘇寧易購頂部下拉菜單

03

實例應用

目前在蘇寧物流研發(fā)中心的相關產(chǎn)品中經(jīng)常會對之前老版的系統(tǒng)進行體驗改版，體驗改版的目標多數(shù)都是因為無法滿足現(xiàn)有的業(yè)務需求或者是之前的老版系統(tǒng)交互體驗需要提升。在這里分享一下蘇寧物流的大數(shù)據(jù)運營和管理平臺——天眼。

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

天眼系統(tǒng)由于是整合所有的蘇寧物流數(shù)據(jù)，所以總體來說業(yè)務板塊較多，同時層級也較深，信息架構上橫向和縱向都較為復雜。老版系統(tǒng)在導航設計上，采用的是F型導航的形式，用戶需要在橫向和縱向上來回切換，容易引發(fā)視覺錯亂。此外，導航板塊占用整個界面太多面積，使得數(shù)據(jù)看板的界面占比僅有56.3%，這在一般的筆記本界面，很難能夠看全整個數(shù)據(jù)表格。

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

本次的對于天眼的設計改版，設計目標主要有兩方面，第一，需要統(tǒng)一交互和視覺體驗，讓數(shù)據(jù)可視化和信息層級化，提高日常物流數(shù)據(jù)的運營和管理；第二，隨著蘇寧物流業(yè)務板塊的增長，包括蘇寧小店的調撥運輸、蘇寧冷鏈的相關數(shù)據(jù)，需要一個系統(tǒng)框架結構去支撐和擴展以滿足更多業(yè)務需求數(shù)據(jù)的展示。

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

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

改版設計中，我們將導航菜單歸納整理成一個版塊，考慮到使用天眼的多數(shù)為業(yè)務人員，監(jiān)測數(shù)據(jù)都是對應到自己負責的版塊，各個版塊之間的獨立性較強，因此在進入相應頁面后很少會來回的切換頁面，所以采用漸進式側邊欄導航形式，同時還可以將其隱藏至左上角菜單導航按鈕。這種導航的設計形式，不僅能夠滿足后續(xù)業(yè)務版塊的擴展需求，同時導航收起的形式也能夠使得數(shù)據(jù)展示的界面占比高達90%以上，這樣用戶進入某個版塊頁面查看對應數(shù)據(jù)時，能夠最大程度的在屏幕上看到整體數(shù)據(jù)情況，提升數(shù)據(jù)運營管理的體驗和效率。

04

總結

Web導航設計在平時的網(wǎng)頁或者系統(tǒng)設計中是最基本的設計，它關乎著整個網(wǎng)站或者系統(tǒng)最基礎的用戶體驗。對于用戶而言，是否好用易用，是否能夠快速的找到自己想要瀏覽的內容和頁面，是否能夠明白自己從哪里來又去向哪里；對于產(chǎn)品本身而言，是否能夠支持業(yè)務內容，是否具有后期的可擴展性。以上諸多問題都是需要在導航設計中著重考慮的，所以分析和總結各種導航形式，思考它們的適用場景，是很有必要的，僅以本文與同行們共同探討。

作者：王康

公眾號：蘇寧易購用戶體驗