在《用戶體驗(yàn)的要素》一本書中，Jesse James Garrett 將用戶體驗(yàn)分為了五個層級，戰(zhàn)略層，范圍層，結(jié)構(gòu)層，框架層，表現(xiàn)層。

其中在框架層里面有一個很重要的概念就是導(dǎo)航設(shè)計(jì)，作者對導(dǎo)航設(shè)計(jì)的定義是：元素的組合，允許用戶在信息架構(gòu)中穿行。

我覺得可以把導(dǎo)航設(shè)計(jì)理解為：我們從用戶的心智模型出發(fā)，結(jié)合業(yè)務(wù)目標(biāo)，對信息架構(gòu)的一個梳理，來幫助用戶完成目標(biāo)。

通過自己手機(jī)里幾十款 app，總結(jié)了以下六種導(dǎo)航設(shè)計(jì)模式，包括：標(biāo)簽導(dǎo)航，宮格導(dǎo)航，側(cè)邊導(dǎo)航，列表導(dǎo)航，菜單導(dǎo)航，輪播導(dǎo)航……

簡單介紹了它們的優(yōu)缺點(diǎn)，適用場景，以及一些衍生導(dǎo)航與相關(guān)案例……（不過導(dǎo)航設(shè)計(jì)一定是視產(chǎn)品和情況而定的，并沒有確定的依據(jù)與理論）

一、標(biāo)簽導(dǎo)航

標(biāo)簽導(dǎo)航分很多種，有底部標(biāo)簽導(dǎo)航，頂部標(biāo)簽導(dǎo)航，底部標(biāo)簽導(dǎo)航又可以衍生出舵式導(dǎo)航，頂部標(biāo)簽導(dǎo)航又可以分為靜態(tài)或者是動態(tài)導(dǎo)航……

底部標(biāo)簽導(dǎo)航是最基本的導(dǎo)航，幾乎絕大部分 app 中都在用，tabbar 位于頁面最底部，一般3-5個 tabbar，有文字+icon，也有純 icon 形式，但大部分是文字+icon 的形式，我想是減少用戶記憶負(fù)擔(dān)吧，如下：

而關(guān)于底部標(biāo)簽導(dǎo)航的優(yōu)點(diǎn)，缺點(diǎn)以及適用場景也簡單整理了：

我發(fā)現(xiàn)很多用戶發(fā)布或者生產(chǎn)內(nèi)容的 app 會將底部標(biāo)簽導(dǎo)航進(jìn)行變體，很多人把它稱為舵式導(dǎo)航，就像這種：

中間的「+」一般是發(fā)布的意思，并且是 app 里面使用最頻繁的一個功能，一般都會重點(diǎn)突出。并且，該標(biāo)簽中很多時候會有二級導(dǎo)航，二級導(dǎo)航里可擴(kuò)展性就比較強(qiáng)，如圖：

而頂部標(biāo)簽導(dǎo)航顧名思義就是 tabbar 位于頂部，最早知道它是在 Material Design 里面，因?yàn)?Google Pixel 手機(jī)底部存在物理導(dǎo)航，所以將標(biāo)簽導(dǎo)航置于頂部不會顯得突兀。它很少用作一級導(dǎo)航，一般是二級導(dǎo)航比較多，而且我發(fā)現(xiàn)頂部標(biāo)簽導(dǎo)航，幾乎都是純文字的形式，比如：

突然想到今天交互設(shè)計(jì)課上的時候，老師講的人機(jī)交互里，重要的操作放在大拇指可觸達(dá)的范圍內(nèi)。

而頂部標(biāo)簽導(dǎo)航，如果是點(diǎn)擊標(biāo)簽進(jìn)行操作的話，用戶單手操作就十分不方便，所以我發(fā)現(xiàn)體驗(yàn)好的 app 的頂部操作導(dǎo)航都是可以直接通過左右滑動屏幕的交互來切換。

而當(dāng)標(biāo)簽類目過多的時候，可以通過左滑展現(xiàn)更多標(biāo)簽，比如很多新聞閱讀類的 app：

如果是可以滑動查看更多的話，一定要通過一些方式告訴用戶可以滑動查看更多，比如最后一個標(biāo)簽隱藏一半的方式等：

關(guān)于頂部標(biāo)簽導(dǎo)航的優(yōu)缺點(diǎn)以及適用場景，如下：

二、宮格導(dǎo)航

宮格導(dǎo)航，也是十分常見的導(dǎo)航形式，除了一些工具類 app 外，大部分是作為二級頁面展示出來，并且以 icon+文字的形式居多。

如果將宮格的 icon 換成 picture 的形式的話，可以衍生出一種新的類似于卡片式導(dǎo)航的形式 ，可以通過垂直滑動來切換，比如：

那，如果宮格信息太多，我發(fā)現(xiàn)很多 app 會采用分類展示的形式，并且通過水平滑動的方式來切換，比如：

但是上面兩種可以垂直或者水平滑動的形式，一定要讓用戶知道是可以水平或者垂直滑動的，采取的是邊界地方信息只展示一半的形式，告訴用戶可以繼續(xù)滑動……

除此之外，宮格導(dǎo)航還可以在電商里面運(yùn)用，在首頁的運(yùn)營內(nèi)容塊，它可以根據(jù)內(nèi)容的重要性調(diào)整模塊的大小，比如：

關(guān)于宮格導(dǎo)航的優(yōu)缺點(diǎn)和適用場景，如下：

三、側(cè)邊導(dǎo)航

有些書里面會把側(cè)邊導(dǎo)航叫做抽屜導(dǎo)航，這類導(dǎo)航其實(shí)比較少了，原本也是從 Google Material Design 里面提取出來的概念，一般會在首頁呈現(xiàn)一個主要功能，將其他不常用的功能收納放到側(cè)邊導(dǎo)航里，比如：

而關(guān)于側(cè)邊導(dǎo)航的優(yōu)缺點(diǎn)以及適用場景，如下：

四、列表導(dǎo)航

列表導(dǎo)航也是十分常見，幾乎在每一個 app 里面都會存在，大部分時候是作為二級導(dǎo)航存在，但是也會存在于一級導(dǎo)航的時候，比如郵箱，iOS系統(tǒng)自帶的設(shè)置等。

一般在列表導(dǎo)航里都會有下一個層級，可以通過箭頭來告訴用戶是否有下級菜單。

當(dāng)列表信息比較多的時候，可以對列表進(jìn)行分類，可以添加小標(biāo)題或者直接分隔開。比如：

而在有些列表導(dǎo)航里，我們還需要展示給用戶一些預(yù)覽信息，比如 iOS系統(tǒng)里的健康，個人信息里的一些基本數(shù)據(jù)展示，如下：

關(guān)于列表導(dǎo)航的優(yōu)缺點(diǎn)以及適用場景，如下：

五、菜單導(dǎo)航

其實(shí)菜單導(dǎo)航也可以稱為下拉導(dǎo)航。這也是今天上交互設(shè)計(jì)課的時候，老師以微信的「+」為例子介紹的一種導(dǎo)航形式。最初了解這種導(dǎo)航形式也是來源于 Material Design 里面的 Menu。

Menu 是臨時的一張紙（paper），由按鈕（button）、動作（action）、點(diǎn)（pointer）或者包含至少兩個菜單項(xiàng)的其他控件觸發(fā)。

比如：

當(dāng)信息層級變多的時候，菜單導(dǎo)航里要展示一層或者兩層信息，比如大眾點(diǎn)評采取的形式：

關(guān)于菜單導(dǎo)航的優(yōu)缺點(diǎn)以及適用場景，如下：

六、輪播導(dǎo)航

還有一些導(dǎo)航比如輪播導(dǎo)航，完全的沉浸式體驗(yàn)，高度簡潔的導(dǎo)航，比如天氣，但是這種導(dǎo)航因?yàn)檩啿c(diǎn)的大小不會很明顯，所以用戶很難快速感知自己所在位置，并且輪播導(dǎo)航輪播的數(shù)量也不宜過多 。

其實(shí)導(dǎo)航的類型應(yīng)該還有很多，并且在一個 app 里面幾乎不可能只使用一種導(dǎo)航，哪怕只是一個頁面，也會存在多種導(dǎo)航的組合形式，比如：

總結(jié)

• 導(dǎo)航的形式一定是根據(jù)你的產(chǎn)品的諸多因素進(jìn)行選取，并不能完全按照我上文的適用場景為依據(jù)；
• 幾乎每一個 app，每一個 app 的每一個頁面，都會涉及到多種導(dǎo)航模式，需要結(jié)合具體場景進(jìn)行組合選取；
• 導(dǎo)航的具體展現(xiàn)可以通過：文字，icon，文字+icon 的形式；
• 有些導(dǎo)航比如標(biāo)簽導(dǎo)航在設(shè)計(jì)的時候有多種狀態(tài)，比如 unselected，selected 等狀態(tài)；
• 導(dǎo)航在 iOS 和 android 里面的應(yīng)用會不一樣，比如標(biāo)簽導(dǎo)航適配 iOS系統(tǒng)，側(cè)邊導(dǎo)航適配 android 系統(tǒng)；
• 導(dǎo)航設(shè)計(jì)必須傳達(dá)出它的內(nèi)容和用戶當(dāng)前瀏覽頁面之間的關(guān)系；
• 能夠引導(dǎo)用戶以很好的體驗(yàn)完成目標(biāo)的導(dǎo)航設(shè)計(jì)都是優(yōu)秀的。