編輯導語：一次優秀的用戶體驗必不可少的就是一個優秀的導航設計，你們肯定遇到過在交互界面點著點著就不知道自己點到哪里了，很影響體驗，所以今天作者和大家分享了關于導航設計的匯總和他們的優缺點。

一、導航的定義

導航的定義其實就是元素之間的相互組合，可以讓用戶自由的在里面進行自由穿行。

二、導航設計的目的

導航設計的目的就是需要突出產品的核心，扁平化用戶的任務路徑。讓用戶能夠順利的在產品中暢行，讓用戶時刻清楚自己在應用中所處的位置，及如何前往目的頁面。

產品的導航系統，是產品的信息結構在用戶界面上的展現方式。移動端產品導航的設計沒有最好之說，只有最合適，根據你的產品采取最合適的導航設計。

三、導航設計的作用

導航的設計其實就是讓用戶知道自己在哪里，身處在哪一個交互界面，可以再次去到哪一個頁面，返回哪一個頁面。

當然還要提供跳轉的方法讓用戶感受到元素與頁面的關系，表達用戶與瀏覽界面的關系。

四、9種常用的導航設計

1. 底部標簽(Tab)導航

當產品的整個體驗流中是以幾個常用功能模塊（一般不超過5個）貫穿的，意味著用戶需要在多個標簽入口之間來回切換；

為了保證切換的效率，將貫穿產品整個體驗的流的模塊平鋪在Tab Bar位置，保證了用戶任務路徑的扁平，比如QQ和微信。

優點：屬于拇指熱區范圍內，操作方便，切換快速，用戶體驗良好。

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

2. 頂部標簽（Tab）導航

頂部Tab是谷歌提出來的，為了區分與iOS的區別的一種導航模式，由于在頂部，手指難以觸及，所以谷歌對應地提出了手勢操作的解決方法：通過在屏幕左右滑動來切換標簽，比如：樊登讀書和愛奇藝。

實際項目中，頂部與底部配合使用的挺多。

優點：頂部可滑動，所以可拓展性強，占據的空間比底部少，是通過滑屏切換方便快捷。

缺點：正式因為可拓展性強，所以導致用戶需要花費很多時間來切換到自己想要到的頁面，最后面的頁面就非常容易被用戶遺忘。

3. 舵式導航

點聚式它將多個核心功能聚匯到主界面中顯示，方便用戶呼出使用。會搭載其他導航樣式出現（如標簽式）成為舵式導航，比如微博。

與標簽導航類似，就點聚工導航與標簽導航的結合體，其中一個導航標簽蘊含更多的操作選項，也可以理解為標簽中蘊含更多二級導航標簽。當頁面有處于同一層級的幾大部分內容，同時又需要一個非常重要且頻繁操作的入口，就可以采用這種APP導航模式。

優點：以顏色或大小的區別來展示核心，展示方式變得很靈活，不同顏色給用戶不同的視覺沖擊，激發用戶的交互欲望。

缺點：屬于二級交互，增加了用戶的路徑，展示功能過多會給用戶造成選擇壓力。

4. 宮格導航

宮格式導航被廣泛應用于各平臺系統的中心頁面；比如支付寶。

用在二級頁作為內容列表的一種圖形化形式呈現，或作為一系列工具入口的聚合；

用戶頻繁切換的概率是比較低；在不同的文章中可能被稱作：跳板（圖標卡片式）、磁貼式。

優點：很直觀的把重要功能展現在用戶眼前，促使用戶可以快速選擇。

缺點：同時正因為這種平鋪式的展示方式讓用戶也有了選擇壓力。兩個功能之間如果需要切換也會變得很麻煩了。

5. 陳列館式導航

宮格導航的變式吧，可用來呈現實時內容，比如新聞、菜譜、文章或照片，可以采用網格布局（比如一直播和ins）或輪盤布局（比如格瓦拉電影），還可以采用幻燈片模式進行展示。

陳列館式設計模式最適合呈現經常更新的、視覺效果直觀、彼此獨立的內容。

優點：以卡片形式展示出來，大量標簽可讓用戶快速了解內容，方便對比選擇。

缺點：整個界面可展現的卡片數量極少，用戶需要通過不斷下滑獲得新的內容，增加用戶的交互流程。

6. 抽屜導航

一般用來放置對用戶而言不太常用或者對于產品而言不太核心的功能，或者不那么需要頻繁切換內容的應用，例如對設置、關于、個人信息等內容的隱藏；

更多的被應用于信息流產品設計中，這類產品注重核心內容的展示，用戶的任務路徑較為單一，幾乎都是用于瀏覽產品的核心內容；至于其他比較低頻的模塊入口則會隱藏在當前界面后方，避免冗余的模塊搶奪用戶的眼球；比如QQ，酷狗音樂。

“2/8”法則告訴我們，80%的用戶只用那些20%功能，這20%功能就是信息流里面的核心功能；如果那80%不常用的功能也占用著最重要的位置，那么用戶就會被打擾，產生臃腫感，甚至會放棄使用產品。

優點：可以把大量的不太常用但是有很重要功能展示在其中，減少用戶的交互流程，并且不會占用主要界面，用戶也就不會被打擾。

缺點：對于不了解產品的用戶來說這類導航用戶一般不容易被發現，會導致用戶的流失。

7. 下拉導航/菜單導航

與抽屜式導航的目的相同，都是為了突出內容。一般位于產品頂部，通過點擊呼出導航菜單；

通常用來篩選同一信息模塊下不同類別的信息，或者快速啟動某些常用的功能模塊，而不需要頻繁的頁面跳轉 ；

Android中對應的控件為spinner控件，但該控件用于同一類別下不同視圖之間的切換，而不是跳轉至完全不同的視圖。iOS中下拉菜單為自定義控件，可以實現不同類別之間的切換；

下拉導航還有一種變式，就是下來菜單中展示兩級甚至多級，一般在電商產品中比較常見，因為品類和篩選條件眾多，比如微博，美團等。

優點：與重要界面連貫性強，不會占用重要界面，用戶點擊方便，可以通過對比詳細對比自己的目標。

缺點：一般下拉鍵比較小，不容易被用戶發現，容易被忽視。

8. 列表導航

作為信息組織框架，是我們在產品設計中必不可少的一個信息承載模式。

適合用來顯示較長或擁有次級文字內容的標題，每行可以融入較多信息。

與宮格導航類似，常用于二級頁面，不會默認展示任何實質內容，所以通常app不會在首頁使用它；比如QQ，微信。

無論ios開發和android 都有現成的列表布局插件和模板。

優點：可拓展性強，可以加很多功能，也符合從上到下，從左到右的閱讀習慣。

缺點：切換不方便，更換功能還需要返回上一級，增加了交互路徑。

9. 輪播（旋轉木馬）導航

當你的應用信息足夠扁平，可以嘗試輪播導航；（適合頁面結構簡單的app）

一般用在購物軟件廣告區，通過圖文鏈接形式展示。

優點：通過少量的區域來展示大量的內容。

缺點：用戶使用過程中需要反復的左右切換來找到目標頁面，大大增加了交互路徑，用戶體驗不好。

五、總結

導航欄是元素之間的組合，能讓用戶明確知道自己在哪里，去向哪里，不同的產品選擇不同的導航能增加用戶體驗。

本文由 @PM大叔 原創發布于人人都是產品經理，未經許可，禁止轉載。

題圖來自Unsplash，基于CC0協議。