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

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

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

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

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

使用場(chǎng)景：

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

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

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

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

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

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

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

二、Breadcrumb 面包屑

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

使用場(chǎng)景：

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

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

基本樣式：這是是常見(jiàn)的面包屑樣式，主要使用場(chǎng)景是針對(duì)于路徑較短。

超長(zhǎng)路徑情況：全路徑很長(zhǎng)，需要收起，用三個(gè)點(diǎn)表示，點(diǎn)擊三個(gè)點(diǎn)可展開(kāi)全部。

三、Tabs標(biāo)簽頁(yè)

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

使用場(chǎng)景：

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

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

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

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

四、pagination分頁(yè)

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

使用場(chǎng)景：

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

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

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

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

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

五、steps步驟條

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

使用場(chǎng)景：

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

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

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

六、dropdown 下拉菜單

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

使用場(chǎng)景：

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

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

相關(guān)閱讀

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

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

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

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

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

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

#專欄作家#

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

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

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