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

一、導航的定義

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

二、導航設計的目的

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

產品的導航系統，是產品的資訊結構在使用者介面上的展現方式。移動端產品導航的設計沒有最好之說，只有最合適，根據你的產品採取最合適的導航設計。

三、導航設計的作用

導航的設計其實就是讓使用者知道自己在哪裡，身處在哪一個互動介面，可以再次去到哪一個頁面，返回哪一個頁面。

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

四、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協議。