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

一、導(dǎo)航的定義

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

二、導(dǎo)航設(shè)計的目的

導(dǎo)航設(shè)計的目的就是需要突出產(chǎn)品的核心，扁平化用戶的任務(wù)路徑。讓用戶能夠順利的在產(chǎn)品中暢行，讓用戶時刻清楚自己在應(yīng)用中所處的位置，及如何前往目的頁面。

產(chǎn)品的導(dǎo)航系統(tǒng)，是產(chǎn)品的信息結(jié)構(gòu)在用戶界面上的展現(xiàn)方式。移動端產(chǎn)品導(dǎo)航的設(shè)計沒有最好之說，只有最合適，根據(jù)你的產(chǎn)品采取最合適的導(dǎo)航設(shè)計。

三、導(dǎo)航設(shè)計的作用

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

當(dāng)然還要提供跳轉(zhuǎn)的方法讓用戶感受到元素與頁面的關(guān)系，表達用戶與瀏覽界面的關(guān)系。

四、9種常用的導(dǎo)航設(shè)計

1. 底部標(biāo)簽(Tab)導(dǎo)航

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

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

優(yōu)點：屬于拇指熱區(qū)范圍內(nèi)，操作方便，切換快速，用戶體驗良好。

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

2. 頂部標(biāo)簽（Tab）導(dǎo)航

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

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

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

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

3. 舵式導(dǎo)航

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

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

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

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

4. 宮格導(dǎo)航

宮格式導(dǎo)航被廣泛應(yīng)用于各平臺系統(tǒng)的中心頁面；比如支付寶。

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

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

優(yōu)點：很直觀的把重要功能展現(xiàn)在用戶眼前，促使用戶可以快速選擇。

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

5. 陳列館式導(dǎo)航

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

陳列館式設(shè)計模式最適合呈現(xiàn)經(jīng)常更新的、視覺效果直觀、彼此獨立的內(nèi)容。

優(yōu)點：以卡片形式展示出來，大量標(biāo)簽可讓用戶快速了解內(nèi)容，方便對比選擇。

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

6. 抽屜導(dǎo)航

一般用來放置對用戶而言不太常用或者對于產(chǎn)品而言不太核心的功能，或者不那么需要頻繁切換內(nèi)容的應(yīng)用，例如對設(shè)置、關(guān)于、個人信息等內(nèi)容的隱藏；

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

“2/8”法則告訴我們，80%的用戶只用那些20%功能，這20%功能就是信息流里面的核心功能；如果那80%不常用的功能也占用著最重要的位置，那么用戶就會被打擾，產(chǎn)生臃腫感，甚至?xí)艞壥褂卯a(chǎn)品。

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

缺點：對于不了解產(chǎn)品的用戶來說這類導(dǎo)航用戶一般不容易被發(fā)現(xiàn)，會導(dǎo)致用戶的流失。

7. 下拉導(dǎo)航/菜單導(dǎo)航

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

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

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

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

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

缺點：一般下拉鍵比較小，不容易被用戶發(fā)現(xiàn)，容易被忽視。

8. 列表導(dǎo)航

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

適合用來顯示較長或擁有次級文字內(nèi)容的標(biāo)題，每行可以融入較多信息。

與宮格導(dǎo)航類似，常用于二級頁面，不會默認(rèn)展示任何實質(zhì)內(nèi)容，所以通常app不會在首頁使用它；比如QQ，微信。

無論ios開發(fā)和android 都有現(xiàn)成的列表布局插件和模板。

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

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

9. 輪播（旋轉(zhuǎn)木馬）導(dǎo)航

當(dāng)你的應(yīng)用信息足夠扁平，可以嘗試輪播導(dǎo)航；（適合頁面結(jié)構(gòu)簡單的app）

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

優(yōu)點：通過少量的區(qū)域來展示大量的內(nèi)容。

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

五、總結(jié)

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

本文由 @PM大叔 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。