編輯導讀：導航的作用是幫助用戶找到想要的信息或者完成期望的行為或任務，是產品的基礎功能之一。本文將從產品設計的角度，從導航定義、設計原則、導航分類幾個部分展開分析，希望對你有幫助。

01??導航定義

導航設計的主要目的是幫助用戶尋找想要的信息或者完成期望的行為或任務。導航設計與產品定位和業務目標息息相關，通過一定的導航設計引導用戶到相應界面，促成行為轉化。作為設計師需要在這個過程幫助用戶清晰的了解產品的使用方式，以用戶可獲知和理解的方式通過導航使用產品。

02?導航設計原則

在導航設計時，應該提供清楚的“道路標識”，避免用戶在頁面中迷路，可以通過一致性的導航樣式和行為交互減少用戶的認知負擔，降低學習成本。同時，也應該保持導航使用的高效與簡潔的平衡，兼顧產品的可用性和用戶體驗。

導航設計原則：

03??導航分類方式

目前市面上移動界面設計的導航方式主要有三種：全局導航、瞬時導航、混合導航。

• 全局導航：一般是底部標簽、宮格式這類的全局設計，用戶可直接看到某個入口并操作
• 瞬時導航：導航菜單一般是被藏起來，通過某個入口點出
• 混合導航：是一種較為靈活的導航設計，例如舵式導航。

其中具體的導航樣式如下：

• 全局導航：底部標簽欄、宮格式/跳板式導航、列表導航、頂部標簽欄
• 瞬時導航：抽屜式或側邊式導航、下拉菜單導航
• 混合導航：輪播導航、舵式導航、卡片導航

1. 全局導航

1）底部標簽欄

底部標簽欄是常見的導航方式，也是全局導航中常用的形式，一般是3-5個tab放置于底部標簽欄。

優點：

• 底部標簽是大部分產品主導航的設計形式，常置于底部，符合用戶的使用習慣。幾個標簽代表了幾個一級內容的入口，通過點擊進行切換和進入，快速方便。
• 符合是iOS原生設計準則，開發簡單。

缺點：

一般來說，底部tab的數量不多于5個，過多的tab會影響產品信息架構的廣度，為用戶帶來認知負擔，但是有限數量的tab也將影響信息架構的深度，導致部分功能和操作層級較深。

2）宮格式 / 跳板式導航

宮格式導航也被稱為跳板式導航，其直觀的表現方式就是把各個入口的圖標放在界面上。這類導航方式一般是作為二級頁面或二級導航來使用，「圖標+文字」的展示形式較為常見。

優點：

• 有比較好的擴展性，隨著產品的功能或業務的增加，可以在宮格導航中進行放置。
• 通過「圖標+文字」的展示形式能夠幫助用戶進行尋找，用戶對圖像的記憶更加深刻。
• 組合方式也較為多樣，可以結合不同的信息類型，如運營位、廣告位、內容塊，同時通過合理的靜態或者動態的圖標設計，也將為產品提高辨識度。

缺點:

• 各個宮格是獨立的內容，無法進行跳轉，用戶需要回到宮格導航主頁面進行選擇，這增加了一定的行為路徑。
• 不合理的設計將帶來一定的選擇負擔。缺少辨識度的圖標、不一致的圖標設計、過于密集雜亂的排布，都會影響用戶的選擇。當用戶面臨的選擇越多時，壓力則越大，用戶體驗必然會受到影響。

3）列表導航

列表導航常用于二級導航，能夠比較清晰的展示信息和功能入口，常見的表現形式也是「圖標+文字」。

優點：

• 符合用戶的查看信息的視覺線路，從上而下，用戶能夠比較快速找到信息。
• 相比于宮格導航中,列表導航中每個列表信息條可承載較多的內容，例如文字字符可以更多，還可以放置運營活動的信息，有比較好的擴展性。
• 通過分割線等方式能夠比較好的進行信息分組，便于用戶選擇。
• ios和android 都有相應的列表組件和模板，易于開發。

缺點：

• 與宮格導航類似，選擇過多，用戶壓力就大，過多過復雜的列表會影響用戶選擇，帶來負擔
• 對于部分需要較高頻的切換任務的操作，列表導航在使用上并不方便。

4）頂部標簽導航

頂部標簽導航通過對頁面內容進行分類，將分類標簽放置于頂部。谷歌最開始提出頂部tab標簽，提出了像固定選項卡、滾動選項卡這類的標簽導航，iOS也提出了分段選項卡的頂部導航。頂部標簽導航常作為二級導航。

優點：

• 占據的空間比較小，不同于底部的tab，頂部tab一般是文段字符或者圖標。
• 交互方式簡單清晰，滑動標簽即可選擇。
• 有較好的擴展性，標簽的個數容量比較大，同時部分產品也支持用戶自定義頂部標簽數量和標簽順序。

缺點：

頂部標簽數量過多，會影響處于后面的標簽頁面的跳轉率。

2. 瞬時導航

1）抽屜式或側邊式導航

抽屜式導航一般用于放置用戶使用頻率較低或非核心的相關功能，這些功能的使用一般不需要太過頻繁的切換或者跳轉。安卓較早提出這一導航方式，現在越來越多產品融入了抽屜導航。抽屜式導航的叫法也比較多樣，比如側邊導航、擴展導航或漢堡菜單等。

優點：

• 通過將較為次要的功能入口放置抽屜導航，突出產品核心功能，避免影響用戶主要任務的操作與任務流程。
• 有較好的擴展性，抽屜導航中的數量條目能夠進行一定的擴展。
• 具有一定的設計空間，抽屜導航可以結合品牌特點、運營活動做個性化的設計。

缺點：

• 由于“藏”抽屜里，部分功能的易見性不是很高，會影響用戶選擇和搜索功能。
• 在使用抽屜導航各個功能中，往往需要二次點擊，例如點擊抽屜菜單中的設置，退出時則是返回首頁，抽屜菜單是關閉狀態，若用戶要再使用抽屜中的功能，需要重新開啟，功能的切換并不方便。

2）下拉菜單式

下拉菜單導航也是常有的瞬時導航形式之一，與抽屜菜單類似，能夠把部分功能和入口整合起來，一般位于界面的頂部，如界面左右上角。下拉菜單導航的使用能夠保持主界面的簡潔，其出現的面積較小。大部分下拉導航為一級菜單，部分產品會出現二級或多次菜單。

優點：

• 能夠比較好的裝下部分操作，而這些操作也往往是和當前頁面有較大聯系的，也不影響用戶尋找這些信息。
• 下拉菜單往往與當前頁面的內容有比較好的連續性，與用戶目標行為操作是一致的或相關的。

缺點：

下拉菜單本身是較輕量級的導航，設計時需要注意信息的承載量，過多的選擇或操作會增加用戶的負擔，也會帶來操作上的不便。

3. 混合導航

1）輪播導航

輪播導航頁面中的信息一般較為扁平，通過單個頁面或者卡片，就能夠展示大部分信息。輪播導航往往需要搭配頁面指示器告知用戶如何操作。

優點：

有一定的擴展性，能夠橫向進行增加。運用同樣的展示方式來放置各運營活動或業務內容信息。

缺點：

• 與頂部tab標簽類似，后幾頁的輪播頁面的點擊率可能會與第一頁面有一定的差距。
• 當輪播頁面過多時候會影響使用效率，因此在輪播頁面的數量上存在一定的范圍。

2）卡片導航

卡片式導航能夠較大程度的突出信息內容，一般作為信息流呈現內容。

優點：

• 交互方式簡單，用戶通過滑動可進行查看和選擇。
• 卡片設計有較好的整體性，將相關信息進行整合，幫助用戶進行識別。
• 好的卡片導航設計有更好的沉浸感。

缺點：

• 卡片設計的界面占位符相對較大，單個頁面內呈現的卡片數量較為有限，因此呈現的信息也是有限的。
• 瀏覽查看卡片的效率較低，用戶只能逐一點擊查看，無法全局瀏覽。

3）舵式導航

舵式導航一般作為全局導航存在，常放置于底部tab中。舵式導航也結合了瞬時導航和點聚式設計的一些特點，它將多個產品核心功能進行整合，點擊相應圖標喚出相應功能

優點：

• 舵式導航常常是底部的五個標簽，中間的標簽更有辨識度，從而吸引用戶進行點擊操作，更加突出和明顯，從而引導用戶進行產品核心功能的操作。
• 有較好的擴展性，隨著產品核心功能的相應增加，可通過舵式導航進行入口的放置。
• 有較好的可設計的空間，通過有趣的動效或視覺設計能夠讓用戶加深品牌印象。

缺點：

部分核心功能是被一起放進舵式導航中的，所以在用戶初期使用產品時或產品進行相應的更新后，需要給與用戶清晰的操作指示，避免用戶找不到核心功能入口。

04?最后

一個產品中往往存在多種導航方式的組合，如京東首頁中，存在底部tab導航、頂部tab導航、輪播導航、宮格式導航，其中底部tab導航作為全局導航存在，其他導航則是二級導航形式。

因此在導航設計時，首先應明確合適于產品的全局導航樣式，在此基礎上基于各個頁面和模塊的主要內容進行二級導航的設計。在導航設計時，也應該思考用戶將如何使用產品，可通過前期卡片分類等方法讓目標用戶參與進來，了解用戶心理模型。同時通過更可視化的設計方式，告知用戶導航的使用路徑和方法。

本文由 @薯片uxd 原創發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基于CC0協議