導(dǎo)航系統(tǒng)相當(dāng)于整個網(wǎng)站的主架構(gòu)，導(dǎo)航系統(tǒng)起著組織內(nèi)容和功能的作用，讓它們按照產(chǎn)品的信息架構(gòu)圖進(jìn)行連接，展現(xiàn)在在用戶面前，導(dǎo)航將零散的內(nèi)容和功能組織成了一個完成的有結(jié)構(gòu)的系統(tǒng)。

根據(jù)組件的用途，可以分為六大類：Feedback 反饋、form 表單、basic 基礎(chǔ)、data 數(shù)據(jù) 、navigation 導(dǎo)航、other 其他。

導(dǎo)航系統(tǒng)相當(dāng)于整個網(wǎng)站的主架構(gòu)，導(dǎo)航系統(tǒng)起著組織內(nèi)容和功能的作用，讓它們按照產(chǎn)品的信息架構(gòu)圖進(jìn)行連接，展現(xiàn)在在用戶面前，導(dǎo)航將零散的內(nèi)容和功能組織成了一個完成的有結(jié)構(gòu)的系統(tǒng)。

一、NavMenu導(dǎo)航菜單

定義：將網(wǎng)站的信息架構(gòu)分組歸類并以導(dǎo)航的形式展示給用戶，方便用戶查找所要獲取的信息。

使用場景：

1. 需要提供一個流量分發(fā)的入口時
2. 網(wǎng)站各個功能聚合時

例如：拉鉤網(wǎng)頂部導(dǎo)航，分為首頁、公司、校園、言職。

頂部導(dǎo)航：顧名思義導(dǎo)航在頂部，這也是目前網(wǎng)站最常見的主導(dǎo)航模式，頂部導(dǎo)航一般會含有個人中心。

如果導(dǎo)航里面存在二級導(dǎo)航則可以聚合在下拉菜單里面，鼠標(biāo)hover出現(xiàn)下拉菜單，選擇下拉菜單里面的選項，則導(dǎo)航欄的標(biāo)題變?yōu)閷?yīng)選擇的導(dǎo)航標(biāo)題。

側(cè)邊欄導(dǎo)航：多用于二級導(dǎo)航。側(cè)邊欄導(dǎo)航里面的功能一般會進(jìn)行分組，一般默認(rèn)展示出來。為了節(jié)省內(nèi)容區(qū)域空間，有的側(cè)邊欄會提供點擊收起左側(cè)欄功能。

側(cè)邊欄的一級標(biāo)題根據(jù)是否有承載的頁面，如果沒有的話，通常置灰，點擊無交互事件。

混合式導(dǎo)航：一般用于復(fù)雜的多類目的網(wǎng)站結(jié)構(gòu)。鼠標(biāo)hover一級分類，出現(xiàn)對應(yīng)的下一級分類。

二、Breadcrumb 面包屑

定義：顯示當(dāng)前頁面在系統(tǒng)層級導(dǎo)航中的結(jié)構(gòu)和層級，并能進(jìn)入各個路徑結(jié)構(gòu)的導(dǎo)航。

使用場景：

1. 當(dāng)系統(tǒng)擁有超過兩級以上的層級結(jié)構(gòu)時；
2. 告訴用戶所處于的層級關(guān)系；
3. 靈活的在各個路徑層級中切換。

例如美團(tuán)web，通過北京美食進(jìn)入某一個產(chǎn)品的詳情頁，就出現(xiàn)如下圖的面包屑導(dǎo)航。

基本樣式：這是是常見的面包屑樣式，主要使用場景是針對于路徑較短。

超長路徑情況：全路徑很長，需要收起，用三個點表示，點擊三個點可展開全部。

三、Tabs標(biāo)簽頁

定義：并列層級切換的導(dǎo)航組件

使用場景：

1. 非主導(dǎo)航；
2. 切換頁面視圖；
3. 并列層級切換的小導(dǎo)航類。

例如美團(tuán)網(wǎng)站后臺的我的訂單，tabs標(biāo)簽頁，用戶可以快速的進(jìn)行切換不同導(dǎo)航下的視圖。

基本樣式：有含icon和不含icon兩類。含有icon則導(dǎo)航的視覺感知更明顯。

側(cè)邊欄樣式：這種可定位頁面內(nèi)容，即點擊圖中的標(biāo)簽頁2則頁面固定到標(biāo)簽頁2的內(nèi)容， 也可以用于在不同視圖的切換。

四、pagination分頁

定義：用于列表、feed流分步加載的組件。

使用場景：

1. 信息量過大，加載時間過長時；
2. 進(jìn)行快速切換其他加載部分的組件。

例如：百度搜索，底部就有分頁組件，有了分頁組件，不需要一次性把所有的信息全部加載拉出，提升產(chǎn)品的性能，同時用戶可以在不同部分的信息進(jìn)行切換，高效快捷。

基本樣式：分頁組件中最簡單的樣式，通過點擊頁碼、上一頁和下一頁完成切換。當(dāng)在第一頁時，沒有上一頁操作。保持分頁有6個跳轉(zhuǎn)頁，同時選中態(tài)的頁保持在第2個。

跳轉(zhuǎn)樣式：和基礎(chǔ)樣式唯一的不同是增加了輸入頁數(shù)跳轉(zhuǎn)，同時處于第1頁時上一頁置灰。

自定義頁面列表樣式：可以自定義一個頁面的列表可以展示多少條

五、steps步驟條

定義：引導(dǎo)用戶按照流程完成任務(wù)的導(dǎo)航條。

使用場景：

1. 復(fù)雜任務(wù)需要分拆步驟時；
2. 不低于兩步。

橫向樣式：適用于多個步驟的業(yè)務(wù)場景。

縱向樣式：適用于較多步驟的業(yè)務(wù)場景。

六、dropdown 下拉菜單

定義：將功能入口聚合并隱藏，通過下拉菜單調(diào)出。

使用場景：

1. 操作聚合；
2. 功能入口隱藏，點擊或者h(yuǎn)over出現(xiàn)。

鼠標(biāo)hover出現(xiàn)下拉菜單樣式，點擊下拉菜單里面的選項，進(jìn)入對應(yīng)選項的界面。

相關(guān)閱讀

如何構(gòu)建Web端設(shè)計規(guī)范

設(shè)計規(guī)范 | Web端設(shè)計理念篇

設(shè)計規(guī)范 | Web端設(shè)計組件篇－反饋類

設(shè)計規(guī)范 | Web端設(shè)計組件篇－文本與選擇器

設(shè)計規(guī)范 | Web端設(shè)計組件篇－樹和日期時間選擇器

設(shè)計規(guī)范 | Web端設(shè)計組件篇：級聯(lián)、數(shù)字輸入、單復(fù)選框和開關(guān)

#專欄作家#

UX，微信公眾號：吳軼，人人都是產(chǎn)品經(jīng)理專欄作家。前華為ITUX交互組組長，現(xiàn)美團(tuán)點評高級交互設(shè)計師。

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

題圖來自 Unsplash，基于CC0協(xié)議。