導航設計3步曲：高手幫你快速掌握導航設計！

導航系統的設計依賴于信息的組織結構，受制于媒介的交互特性，還需要符合用戶的習慣和目標，所以我將從信息結構、導航形式、導航路徑優化 3 個方面為大家展開導航設計。

1. 導航是什么？

① 導航的起源與本質

導航，英文是 Navigation，是 Navigate 的名詞形式，源于 1530 年代，由詞根 Navis 船+agere 駕駛組合而成。指的是借助某些科學儀器，找到從一個島嶼到另一個島嶼的路徑。

圖1 導航的起源

誕生于中世紀大航海的導航，從誕生之初就跟起點、目標和路徑密切相關。隨著導航的發展，導航領域從海洋擴展到陸地，航空、太空，以及互聯網。

圖2 導航領域的類型

今天我們重點要聊的就是移動互聯網產品的導航設計，雖然脫離了物理空間，但導航的本質始終是不變的。

圖3 導航的本質

導航本質：告訴用戶“我”在哪里（起點）？“我”能去到哪里（目標）？“我”該怎么去（路徑）？

基于此，導航設計一定要能清晰的體現用戶當前所在的位置（一般用選中態表示），并通過其他未選中的導航，來告知用戶可以去的目標，再通過最簡單的點擊或滑動等操作讓用戶去往目的地。

圖4 互聯網產品導航示意

2. 移動端導航形式有什么？

我歸納了移動端常見的 10 種導航形式，大家可以根據其優缺點和適用場景按需選用。

圖5 移動端常見的10種導航形式

① 底 Tab 導航

底 Tab 導航在 iOS 中叫標簽導航，在 Android 中稱之為底部導航，我將其稱為底 Tab 導航，它是 iOS 中最倡導和常見的導航形式。（現在也全面征服了 Android 系統）

圖6 底Tab導航

優點：清晰直觀的展示了產品的核心功能，點擊切換方便快捷。

缺點：只能容納 3-5 個，數量有限。

使用場景：產品包含 3~5 個需要高頻切換使用的非同類型模塊時可用。

② 舵式導航

舵式導航可以看做是底 Tab 導航的一個變異，區別就在于把中間的導航像船舵一樣凸顯，以此來強調中間的導航功能（一般用于承載發布類功能）。

圖7 舵式導航

優點：舵式導航特殊的造型和顏色可以很好的吸引用戶注意力，促進功能轉化。

缺點：為了讓舵居中，導航個數只能為 3 個或 5 個，數量有限制。聚合多個發布類功能時，需要二次選擇，操作不夠便捷。

使用場景：對于強調 UGC 類的產品或者特別高頻的操作可以使用。

③ 頂 Tab 導航

頂 Tab 導航最開始是 Android 推出用以抗衡 iOS 底 Tab 導航的，結果大家已經有感知了（抗衡徹底失敗）。但頂 Tab 導航并沒有因此而消失，而是重新找到了自己作為次級導航的生態位。

圖8 頂Tab導航

優點：可以承載 2~N 個導航，可拓展性強，手勢切換比較便捷。

缺點：手勢切換有學習成本，頂部點擊不方便，看不見的導航內容不容易被發現和使用。

使用場景：作為主導航幾乎已被底 Tab 取代，作為次級導航非常常見，特別是有多個并列層級的內容需要展示時。

④ 抽屜導航

如果產品只有一類核心展示的內容，可以使用抽屜導航而不用底 Tab 導航，以最大限度的利用屏幕空間。

圖9 抽屜導航

優點：可拓展性強，可以收納多個不常用的功能，釋放屏幕展示空間。

缺點：被隱藏的功能不容易被發現和使用。

使用場景：某些核心功能比較單一的產品，或者跟底 Tab 導航組合使用，收納不常用的功能。

⑤ 菜單式導航

跟抽屜式導航類似，把一組操作收納到一個地方，用戶可以點擊快速選擇。

圖10 菜單式導航

優點：可拓展性強，可以收納多個功能，釋放屏幕展示空間。

缺點：被隱藏的功能不容易被發現和使用。

使用場景：當頁面功能較多，無法全部直接展示時，可以使用下拉菜單統一收納。

⑥ 宮格式導航

早期比較流行的主導航，現在是比較常用的局部導航。

圖11 宮格式導航

優點：信息層級扁平，個數較少時，核心功能一目了然，用戶選擇成本低。

缺點：個數較多時視覺認知成本、查找成本都很高，進入功能后切換成本也高。

使用場景：平臺類產品的核心功能展示，或者普通產品的重要功能/運營入口。

⑦ 列表式導航

對于主要以文本為載體的產品，采用列表式導航非常常見，比如短信、郵件、記事本、設置等。

圖12 列表式導航

優點：有足夠的文本/圖標顯示空間，可以顯示標題和輔助文字，傳遞的信息內容相對豐富、直觀，而且可以顯示多條內容。

缺點：整體頁面信息會比較密集，頁面布局相對呆板，條目多時查找會比較困難。

使用場景：適用于展示多條以文本為主體的內容。

⑧ 瀑布流導航

對于主要以圖片/視頻為載體的產品，采用瀑布流導航的非常常見，比如花瓣、點評、淘寶、bilibili 等。

圖13 瀑布流導航

優點：能夠凸顯圖片的吸引力，讓用戶聚焦在圖片上，促進內容的轉化。同時可以承載無限多的內容，自動加載不翻頁，增強用戶瀏覽的沉浸感和效率。

缺點：屏幕空間占用較大，依賴于信息推薦的精準度。

使用場景：適用于展示多條以圖片為主體的內容。

⑨ 輪播式導航

當產品/模塊提供的信息足夠簡單扁平，一屏即可顯示全部核心信息時，可以采用整屏輪播或區域輪播的導航形式。

圖14 輪播式導航

優點：操作簡單，信息呈現直觀。

缺點：未輪播的信息曝光率和轉化率都比較低。

使用場景：簡單的小工具類產品可以整屏顯示核心信息。運營廣告位可以區域輪播展示。

⑩ 沉浸式導航

在活動類、游戲類產品中，常常采用沉浸式導航，增強用戶沉浸感。

圖15 沉浸式導航

優點：導航與頁面融為一體，視覺感受沉浸，頁面更有吸引力。

缺點：用戶可能注意不到某些是內容的元素，導致該元素的轉化率較低。

適用場景：活動類、游戲類的產品中。

3. 導航設計三步曲

① 確認信息結構

導航設計是以信息結構為基礎的，所以在進行導航設計之前，我們需要將范圍層提供的所有信息進行分析，刪減、分類、整理形成特定的信息結構。

圖16 從信息到信息結構

以微信的部分信息為例，我們將信息進行分類、整理、命名形成了上述的組織系統，讓信息與信息之間的邏輯關系一目了然。

這里大家可以參考行業競品的信息架構，結合自己對業務關系的理解，輔助以卡片分類的方式，整理出最適合的信息結構。

PS：為了提升導航的易用性，建議的導航廣度最好不超過 5，深度不超過 3。這樣符合米勒定律，用戶的選擇壓力較小，也不容易迷失在較深的路徑中。（當然這只是一個建議，優先要保證的還是信息結構的合理性，不能為了滿足上述建議而破壞信息之間本身的邏輯關系，時刻牢記認知成本＞操作成本，不能為了減少操作成本而增加認知成本）

② 選擇導航形式

根據信息結構中主導航功能的個數，以及主導航功能之間的優先級關系，再結合各導航的適用場景、個數限制、內容豐富度、功能可見性、操作便捷性等，匹配合適的主導航、次級導航和局部導航形式。

圖17 導航總結

從現況來看，多數產品都愿意采用底 Tab 的主導航形式，因為可以曝光多個功能，用戶點擊操作方便，學習成本低，利于其他功能的轉化，后續拓展也比較方便（可以配合抽屜式導航、頂 Tab 導航，菜單式導航和局部導航混合使用）

③ 優化導航路徑

信息結構梳理了信息節點之間的邏輯關系，但用戶在真正使用產品時，有些子節點的功能/信息，其優先級和頻率反而更高，為了讓用戶能夠方便快捷的使用這些子功能，還需要結合用戶的使用場景，在合適的場景下添加一些節點和路徑，以提升用戶操作的流暢性和效率。

圖18 組織系統和導航系統的關系

還是以微信的導航設計為例，因為添加好友，掃一掃、收付款功能重要性和使用頻率，微信特地在首頁增加了一個菜單導航，方便用戶能更快捷的觸達這些功能。

所以導航設計，不僅要正確的反映信息之間的結構關系，選擇合適的導航形式，更重要的是根據用戶的目標、認知和習慣來組織導航節點，讓用戶可以很直觀的理解“我”在哪，“我”可以去哪？并通過最便捷的操作到達目的地。

好了，根據本次導航設計到這里就結束了。

歡迎關注作者微信公眾號：「悅姐聊設計」