一次優秀的使用者體驗必不可少的就是一個優秀的導航設計，但往往大家總是容易忽略這一點！試想如果使用者在使用產品的時候不知道自己在哪裡、該到哪裡去，這種情況下會給使用者造成極差的使用者體驗，導致使用者直接放棄當前操作。所以今天和大家分享一下關於導航設計的彙總以及優缺點的分析。
目錄
1.導航的定義
2.導航的作用
3.導航的種類&樣式
4.總結
導航設計的定義是：元素的組合，允許使用者在資訊架構中穿行。
簡單點理解就是：我們從使用者的心智模型出發，結合業務目標，對資訊架構的一個梳理，來幫助使用者完成目標。
導航設計最大的作用就是：告訴使用者當前在哪裡，從哪裡來，能到哪裡去。
當然我們還需要為使用者跳轉提供方法，並且能明確讓使用者感受到導航欄元素與頁面的關係，最後是表達出內容與使用者瀏覽介面的關係。
a.底部導航欄設計
底部導航欄設計是我們最常見的導航模式之一，位於頁面底部，用於一級頁面當中負責各主業務模組的切換，一般會保持3～5個標籤，適用於頻繁切換業務模組的產品。例如優酷、豆瓣、淘寶、網易雲音樂：
優點：切換快速方便，使用者不會輕易迷失；iOS 原生系統，開發成本低；屬於拇指熱區範圍內，操作方便，使用者體驗好。
缺點：導航數量有限，最多3～5個，可擴充套件性不高；佔用一定的空間，沉浸式體驗不足，且在小機型上極其容易影響顯示區域的視覺大小。
b.頂部導航
優點：滑動式頂部標籤可無限新增標籤，可擴充套件性強；技術上，適配簡單，減少開發成本；佔據空間比底部導航欄小，節省空間；劃屏切換，簡單便捷。
缺點：標籤數量多，容易導致產品頁面過多，使用者需要耗費大量精力不斷滑動；越是後面的標籤容易被遺忘，導致流量遺失。
c.舵式導航
舵式導航一般位於底部標籤欄中間，以“+”號 的形式出現，是產品中需要重點突出的功能，一般用於UGC內容生產釋出。例如閒魚、微博、LOFTER、轉轉：
d.側邊欄導航
優點：隱藏次要功能，聚焦核心內容；隱藏減少非核心功能，沉浸式體驗優秀；節省頁面空間；標齊選項可擴充套件性強。
缺點：其他功能使用率低；切換功能操作麻煩，互動路勁長。
e.宮格式導航
宮格導航是將主要功能入口的聚合羅列在頁面中，讓使用者能夠快速的瞭解產品所有的業務或者功能，使用者可以根據自身的需求快速選擇。各個功能入口相對獨立，沒有交集，無法相互跳轉互動，一般適用於二級頁面。宮格導航的組合方式靈活多樣。例如支付寶、下廚房、微信、嗶哩嗶哩：
優點：擴充套件性好；展現直觀，重要的功能平鋪呈現給使用者，促使使用者可以快速選擇。
缺點：平鋪功能入口過多，增加了使用者選擇的壓力；切換繁瑣，想要切換其他模組必須返回主頁面；無法直接展現內容，對使用者缺乏直接的吸引力。
f.下拉式導航
缺點：大部分位於頂部，操作不便，不易頻繁操作；入口不明顯，容易被忽視。
g.列表式導航
優點：可延展性強，可以不斷新增資訊；符合人們自左到右、自上而下的閱讀習慣；條目清晰，使用者可以根據自己的需求快速尋找自己想要的資訊。
缺點：切換不方便，必須返回列表頁面才能進行切換，互動路徑長；資訊較多時，需要頻繁的滑動介面頁面，閱讀效率低且容易造成閱讀疲勞。
h.分段式導航
分段式導航是 iOS 自帶的標準控制元件，一般應用於二級導航，適合切換頻率比較高的頁面，導航數量通常在2～4個。例如網易音樂、網易雲課堂、app store：
優點：入口清晰，切換方便且不會迷失。
缺點：可擴充套件性弱，只能應用於2～4個標籤；樣式守舊，靈活程度不高，不能透過手勢滑動。
i.點聚式導航
1.導航欄的定義是元素的組合，允許使用者在產品的資訊架構中穿行。
2.導航欄的最大作用就是引導使用者在在產品的資訊架構中穿梭，即從哪裡來、到哪裡去。
3.導航欄的樣式彙總，詳細的優缺點分析幫助我們在工作如何區分篩選導航欄的設計樣式。
一次優秀的使用者體驗必不可少的就是一個優秀的導航設計，但往往大家總是容易忽略這一點！試想如果使用者在使用產品的時候不知道自己在哪裡、該到哪裡去，這種情況下會給使用者造成極差的使用者體驗，導致使用者直接放棄當前操作。所以今天和大家分享一下關於導航設計的彙總以及優缺點的分析。
目錄
1.導航的定義
2.導航的作用
3.導航的種類&樣式
4.總結
1.導航的定義
導航設計的定義是：元素的組合，允許使用者在資訊架構中穿行。
簡單點理解就是：我們從使用者的心智模型出發，結合業務目標，對資訊架構的一個梳理，來幫助使用者完成目標。
2.導航的作用
導航設計最大的作用就是：告訴使用者當前在哪裡，從哪裡來，能到哪裡去。
當然我們還需要為使用者跳轉提供方法，並且能明確讓使用者感受到導航欄元素與頁面的關係，最後是表達出內容與使用者瀏覽介面的關係。
3.導航的種類&樣式
a.底部導航欄設計
底部導航欄設計是我們最常見的導航模式之一，位於頁面底部，用於一級頁面當中負責各主業務模組的切換，一般會保持3～5個標籤，適用於頻繁切換業務模組的產品。例如優酷、豆瓣、淘寶、網易雲音樂：
優點：切換快速方便，使用者不會輕易迷失；iOS 原生系統，開發成本低；屬於拇指熱區範圍內，操作方便，使用者體驗好。
缺點：導航數量有限，最多3～5個，可擴充套件性不高；佔用一定的空間，沉浸式體驗不足，且在小機型上極其容易影響顯示區域的視覺大小。
b.頂部導航
優點：滑動式頂部標籤可無限新增標籤，可擴充套件性強；技術上，適配簡單，減少開發成本；佔據空間比底部導航欄小，節省空間；劃屏切換，簡單便捷。
缺點：標籤數量多，容易導致產品頁面過多，使用者需要耗費大量精力不斷滑動；越是後面的標籤容易被遺忘，導致流量遺失。
c.舵式導航
舵式導航一般位於底部標籤欄中間，以“+”號 的形式出現，是產品中需要重點突出的功能，一般用於UGC內容生產釋出。例如閒魚、微博、LOFTER、轉轉：
d.側邊欄導航
優點：隱藏次要功能，聚焦核心內容；隱藏減少非核心功能，沉浸式體驗優秀；節省頁面空間；標齊選項可擴充套件性強。
缺點：其他功能使用率低；切換功能操作麻煩，互動路勁長。
e.宮格式導航
宮格導航是將主要功能入口的聚合羅列在頁面中，讓使用者能夠快速的瞭解產品所有的業務或者功能，使用者可以根據自身的需求快速選擇。各個功能入口相對獨立，沒有交集，無法相互跳轉互動，一般適用於二級頁面。宮格導航的組合方式靈活多樣。例如支付寶、下廚房、微信、嗶哩嗶哩：
優點：擴充套件性好；展現直觀，重要的功能平鋪呈現給使用者，促使使用者可以快速選擇。
缺點：平鋪功能入口過多，增加了使用者選擇的壓力；切換繁瑣，想要切換其他模組必須返回主頁面；無法直接展現內容，對使用者缺乏直接的吸引力。
f.下拉式導航
缺點：大部分位於頂部，操作不便，不易頻繁操作；入口不明顯，容易被忽視。
g.列表式導航
優點：可延展性強，可以不斷新增資訊；符合人們自左到右、自上而下的閱讀習慣；條目清晰，使用者可以根據自己的需求快速尋找自己想要的資訊。
缺點：切換不方便，必須返回列表頁面才能進行切換，互動路徑長；資訊較多時，需要頻繁的滑動介面頁面，閱讀效率低且容易造成閱讀疲勞。
h.分段式導航
分段式導航是 iOS 自帶的標準控制元件，一般應用於二級導航，適合切換頻率比較高的頁面，導航數量通常在2～4個。例如網易音樂、網易雲課堂、app store：
優點：入口清晰，切換方便且不會迷失。
缺點：可擴充套件性弱，只能應用於2～4個標籤；樣式守舊，靈活程度不高，不能透過手勢滑動。
i.點聚式導航
4.總結
1.導航欄的定義是元素的組合，允許使用者在產品的資訊架構中穿行。
2.導航欄的最大作用就是引導使用者在在產品的資訊架構中穿梭，即從哪裡來、到哪裡去。
3.導航欄的樣式彙總，詳細的優缺點分析幫助我們在工作如何區分篩選導航欄的設計樣式。