在《用戶體驗的要素》一本書中，Jesse James Garrett 將用戶體驗分為了五個層級，戰略層，範圍層，結構層，框架層，表現層。
其中在框架層裡面有一個很重要的概念就是導航設計，作者對導航設計的定義是：元素的組合，允許用戶在信息架構中穿行。
我覺得可以把導航設計理解為：我們從用戶的心智模型出發，結合業務目標，對信息架構的一個梳理，來幫助用戶完成目標。
通過自己手機裡幾十款 app，總結了以下六種導航設計模式，包括：標籤導航，宮格導航，側邊導航，列表導航，菜單導航，輪播導航……
簡單介紹了它們的優缺點，適用場景，以及一些衍生導航與相關案例……（不過導航設計一定是視產品和情況而定的，並沒有確定的依據與理論）
一、標籤導航
標籤導航分很多種，有底部標籤導航，頂部標籤導航，底部標籤導航又可以衍生出舵式導航，頂部標籤導航又可以分為靜態或者是動態導航……
底部標籤導航是最基本的導航，幾乎絕大部分 app 中都在用，tabbar 位於頁面最底部，一般3-5個 tabbar，有文字+icon，也有純 icon 形式，但大部分是文字+icon 的形式，我想是減少用戶記憶負擔吧，如下：
而關於底部標籤導航的優點，缺點以及適用場景也簡單整理了：
我發現很多用戶發佈或者生產內容的 app 會將底部標籤導航進行變體，很多人把它稱為舵式導航，就像這種：
中間的「+」一般是發佈的意思，並且是 app 裡面使用最頻繁的一個功能，一般都會重點突出。並且，該標籤中很多時候會有二級導航，二級導航裡可擴展性就比較強，如圖：
而頂部標籤導航顧名思義就是 tabbar 位於頂部，最早知道它是在 Material Design 裡面，因為 Google Pixel 手機底部存在物理導航，所以將標籤導航置於頂部不會顯得突兀。它很少用作一級導航，一般是二級導航比較多，而且我發現頂部標籤導航，幾乎都是純文字的形式，比如：
突然想到今天交互設計課上的時候，老師講的人機交互裡，重要的操作放在大拇指可觸達的範圍內。
而頂部標籤導航，如果是點擊標籤進行操作的話，用戶單手操作就十分不方便，所以我發現體驗好的 app 的頂部操作導航都是可以直接通過左右滑動屏幕的交互來切換。
而當標籤類目過多的時候，可以通過左滑展現更多標籤，比如很多新聞閱讀類的 app：
如果是可以滑動查看更多的話，一定要通過一些方式告訴用戶可以滑動查看更多，比如最後一個標籤隱藏一半的方式等：
關於頂部標籤導航的優缺點以及適用場景，如下：
二、宮格導航
宮格導航，也是十分常見的導航形式，除了一些工具類 app 外，大部分是作為二級頁面展示出來，並且以 icon+文字的形式居多。
如果將宮格的 icon 換成 picture 的形式的話，可以衍生出一種新的類似於卡片式導航的形式 ，可以通過垂直滑動來切換，比如：
那，如果宮格信息太多，我發現很多 app 會採用分類展示的形式，並且通過水平滑動的方式來切換，比如：
但是上面兩種可以垂直或者水平滑動的形式，一定要讓用戶知道是可以水平或者垂直滑動的，採取的是邊界地方信息只展示一半的形式，告訴用戶可以繼續滑動……
除此之外，宮格導航還可以在電商裡面運用，在首頁的運營內容塊，它可以根據內容的重要性調整模塊的大小，比如：
關於宮格導航的優缺點和適用場景，如下：
三、側邊導航
有些書裡面會把側邊導航叫做抽屜導航，這類導航其實比較少了，原本也是從 Google Material Design 裡面提取出來的概念，一般會在首頁呈現一個主要功能，將其他不常用的功能收納放到側邊導航裡，比如：
而關於側邊導航的優缺點以及適用場景，如下：
四、列表導航
列表導航也是十分常見，幾乎在每一個 app 裡面都會存在，大部分時候是作為二級導航存在，但是也會存在於一級導航的時候，比如郵箱，iOS系統自帶的設置等。
一般在列表導航裡都會有下一個層級，可以通過箭頭來告訴用戶是否有下級菜單。
當列表信息比較多的時候，可以對列表進行分類，可以添加小標題或者直接分隔開。比如：
而在有些列表導航裡，我們還需要展示給用戶一些預覽信息，比如 iOS系統裡的健康，個人信息裡的一些基本數據展示，如下：
關於列表導航的優缺點以及適用場景，如下：
五、菜單導航
其實菜單導航也可以稱為下拉導航。這也是今天上交互設計課的時候，老師以微信的「+」為例子介紹的一種導航形式。最初瞭解這種導航形式也是來源於 Material Design 裡面的 Menu。
Menu 是臨時的一張紙（paper），由按鈕（button）、動作（action）、點（pointer）或者包含至少兩個菜單項的其他控件觸發。
比如：
當信息層級變多的時候，菜單導航裡要展示一層或者兩層信息，比如大眾點評採取的形式：
關於菜單導航的優缺點以及適用場景，如下：
六、輪播導航
還有一些導航比如輪播導航，完全的沉浸式體驗，高度簡潔的導航，比如天氣，但是這種導航因為輪播點的大小不會很明顯，所以用戶很難快速感知自己所在位置，並且輪播導航輪播的數量也不宜過多 。
其實導航的類型應該還有很多，並且在一個 app 裡面幾乎不可能只使用一種導航，哪怕只是一個頁面，也會存在多種導航的組合形式，比如：
總結
- 導航的形式一定是根據你的產品的諸多因素進行選取，並不能完全按照我上文的適用場景為依據；
- 幾乎每一個 app，每一個 app 的每一個頁面，都會涉及到多種導航模式，需要結合具體場景進行組合選取；
- 導航的具體展現可以通過：文字，icon，文字+icon 的形式；
- 有些導航比如標籤導航在設計的時候有多種狀態，比如 unselected，selected 等狀態；
- 導航在 iOS 和 android 裡面的應用會不一樣，比如標籤導航適配 iOS系統，側邊導航適配 android 系統；
- 導航設計必須傳達出它的內容和用戶當前瀏覽頁面之間的關係；
- 能夠引導用戶以很好的體驗完成目標的導航設計都是優秀的。
閱讀更多 路漫UED 的文章
