縱觀應(yīng)用市場(chǎng)上的APP，導(dǎo)航設(shè)計(jì)的模式總是幾種的組合使用。
導(dǎo)航設(shè)計(jì)的目的就是需要突出產(chǎn)品的核心，扁平化用戶的任務(wù)路徑。讓用戶能夠順利的在產(chǎn)品中暢行，讓用戶時(shí)刻清楚自己在應(yīng)用中所處的位置，及如何前往目的頁(yè)面。
產(chǎn)品的導(dǎo)航系統(tǒng)，是產(chǎn)品的信息結(jié)構(gòu)在用戶界面上的展現(xiàn)方式。移動(dòng)端產(chǎn)品導(dǎo)航的設(shè)計(jì)沒(méi)有最好之說(shuō)，只有最合適，根據(jù)你的產(chǎn)品采取最合適的導(dǎo)航設(shè)計(jì)。
縱觀應(yīng)用市場(chǎng)上的APP，導(dǎo)航設(shè)計(jì)的模式總是幾種的組合使用。下面我們來(lái)看一下常見(jiàn)的幾種導(dǎo)航設(shè)計(jì)模式。
01 底部標(biāo)簽(Tab)導(dǎo)航
描述：
1、當(dāng)產(chǎn)品的整個(gè)體驗(yàn)流中是以幾個(gè)常用功能模塊（一般不超過(guò)5個(gè)）貫穿的，意味著用戶需要在多個(gè)標(biāo)簽入口之間來(lái)回切換；為了保證切換的效率，將貫穿產(chǎn)品整個(gè)體驗(yàn)的流的模塊平鋪在Tab Bar位置，保證了用戶任務(wù)路徑的扁平。
2、iOS原裝App Podcast，5Tab。
優(yōu)點(diǎn)：
1、可見(jiàn)性好，位置明顯，易于發(fā)現(xiàn)，它能讓用戶直觀了解到APP的核心功能；
2、操作性好，用戶很方便就能觸及到這個(gè)區(qū)域，并可在幾個(gè)標(biāo)簽中快速切換且不會(huì)迷失方向，簡(jiǎn)單而高效；
3、符合習(xí)慣、ios原生控件，開(kāi)發(fā)簡(jiǎn)單；
4、優(yōu)先級(jí)較高、用戶使用頻繁，彼此之間相互獨(dú)立。
缺點(diǎn)：
1、容納個(gè)數(shù)有限，一般最多五個(gè)（不然需要結(jié)合其他方式，運(yùn)用層級(jí)和收放）。
2、占據(jù)高度空間略大，一般都是文字+圖標(biāo)的形式。
02 頂部標(biāo)簽(Tab)導(dǎo)航
描述：
頂部Tab是谷歌提出來(lái)的，為了區(qū)分與iOS的區(qū)別的一種導(dǎo)航模式，由于在頂部，手指難以觸及，所以谷歌對(duì)應(yīng)地提出了手勢(shì)操作的解決方法：通過(guò)在屏幕左右滑動(dòng)來(lái)切換標(biāo)簽。
實(shí)際項(xiàng)目中，頂部與底部配合使用的挺多。其實(shí)就是holo條。
優(yōu)點(diǎn)：
擴(kuò)展性好：標(biāo)簽的個(gè)數(shù)沒(méi)有上限，不過(guò)太多的話，越是后面的頁(yè)面滲透率會(huì)越低；
占據(jù)空間小：相比于底部Tab，頂部Tab一般占據(jù)的空間更?。ㄒ?yàn)椴恍枰紤]手指點(diǎn)擊，所以可以把區(qū)域縮小，只選用圖標(biāo)或者文字即可），可以把更多的空間安排給內(nèi)容展示。
手勢(shì)操作非常方便。
缺點(diǎn)：
可見(jiàn)性略遜：這是空間占據(jù)的區(qū)域變小之后的后果。
03 舵式導(dǎo)航
描述：
1、點(diǎn)聚式它將多個(gè)核心功能聚匯到主界面中顯示，方便用戶呼出使用。會(huì)搭載其他導(dǎo)航樣式出現(xiàn)（如標(biāo)簽式）成為舵式導(dǎo)航。
2、與標(biāo)簽導(dǎo)航類似，就點(diǎn)聚工導(dǎo)航與標(biāo)簽導(dǎo)航的結(jié)合體，其中一個(gè)導(dǎo)航標(biāo)簽蘊(yùn)含更多的操作選項(xiàng)，也可以理解為標(biāo)簽中蘊(yùn)含更多二級(jí)導(dǎo)航標(biāo)簽。當(dāng)頁(yè)面有處于同一層級(jí)的幾大部分內(nèi)容，同時(shí)又需要一個(gè)非常重要且頻繁操作的入口，就可以采用這種APP導(dǎo)航模式。
優(yōu)點(diǎn)：
1、把類似生產(chǎn)內(nèi)容的主功能按鈕放在中間，標(biāo)簽更加突出醒目；
2、同時(shí)該主功能標(biāo)簽做了功能擴(kuò)展，也因此給設(shè)計(jì)增加了一些個(gè)性化的亮點(diǎn)。
缺點(diǎn)：
1、占據(jù)高度空間略大，一般都是文字+圖標(biāo)的形式。
04 輪播導(dǎo)航
描述：
當(dāng)你的應(yīng)用信息足夠扁平，可以嘗試輪播導(dǎo)航；
優(yōu)點(diǎn)：
能夠最大程度的保證應(yīng)用的頁(yè)面簡(jiǎn)潔性，操作也是最方便；
缺點(diǎn)：
不能夠快速的定位對(duì)應(yīng)的分頁(yè)內(nèi)容；
05 宮格導(dǎo)航
描述：
1、宮格式導(dǎo)航被廣泛應(yīng)用于各平臺(tái)系統(tǒng)的中心頁(yè)面；
2、用在二級(jí)頁(yè)作為內(nèi)容列表的一種圖形化形式呈現(xiàn)，或作為一系列工具入口的聚合；
3、用戶頻繁切換的概率是比較低；
4、在不同的文章中可能被稱作：跳板（圖標(biāo)卡片式）、磁貼式。
優(yōu)點(diǎn)：
1、擴(kuò)展性非常好，便于組合不同的信息類型（運(yùn)營(yíng)位、廣告位、內(nèi)容塊、設(shè)置等）；
2、視野范圍內(nèi)可以展示的功能入口多，能夠讓用戶整體上了解APP提供的服務(wù)，從而選擇自己所需要的那個(gè)服務(wù)；
3、靜態(tài)、動(dòng)態(tài)結(jié)合可以展示出豐富的信息，同時(shí)保持視覺(jué)統(tǒng)一；
4、跨平臺(tái)不受平臺(tái)限制。
缺點(diǎn)：
1、每個(gè)宮格相互獨(dú)立，它們的信息間也沒(méi)有任何交集，無(wú)法跳轉(zhuǎn)互通；
2、當(dāng)排布過(guò)多的時(shí)候，用戶容易眼花繚亂，選擇壓力較大；
06? 陳列館式導(dǎo)航
描述：
1、宮格導(dǎo)航的變式吧，可用來(lái)呈現(xiàn)實(shí)時(shí)內(nèi)容，比如新聞、菜譜、文章或照片，可以采用網(wǎng)格布局（比如一直播和ins）或輪盤(pán)布局（比如格瓦拉電影），還可以采用幻燈片模式進(jìn)行展示。
2、陳列館式設(shè)計(jì)模式最適合呈現(xiàn)經(jīng)常更新的、視覺(jué)效果直觀、彼此獨(dú)立的內(nèi)容。
優(yōu)點(diǎn)：
1、相較于列表導(dǎo)航、宮格式導(dǎo)航的不同在于，陳列館式導(dǎo)航有更豐富的表現(xiàn)形式、更加隨意的組合效果（瀑布流等）以及豐富的動(dòng)態(tài)效果（輪盤(pán)、幻燈片形式）；
2、直觀展現(xiàn)各項(xiàng)內(nèi)容。
缺點(diǎn)：
1、不適合展現(xiàn)頂層入口框架；
2、容易形成界面內(nèi)容過(guò)多，顯得雜亂；
3、設(shè)計(jì)效果容易呆板。
07 抽屜導(dǎo)航
描述：
1、抽屜式也是谷歌提出來(lái)的一種導(dǎo)航模式，由于虛擬按鍵的存在，所以在安卓上使用底部Tab會(huì)造成雙底欄，視覺(jué)觀感不佳；
2、一般用來(lái)放置對(duì)用戶而言不太常用或者對(duì)于產(chǎn)品而言不太核心的功能，或者不那么需要頻繁切換內(nèi)容的應(yīng)用，例如對(duì)設(shè)置、關(guān)于、個(gè)人信息等內(nèi)容的隱藏；
3、更多的被應(yīng)用于信息流產(chǎn)品設(shè)計(jì)中，這類產(chǎn)品注重核心內(nèi)容的展示，用戶的任務(wù)路徑較為單一，幾乎都是用于瀏覽產(chǎn)品的核心內(nèi)容；至于其他比較低頻的模塊入口則會(huì)隱藏在當(dāng)前界面后方，避免冗余的模塊搶奪用戶的眼球；
4、在不同的地方可能被稱為：擴(kuò)展菜單、側(cè)邊導(dǎo)航、漢堡導(dǎo)航；
5、“2/8”法則告訴我們，80%的用戶只用那些20%功能，這20%功能就是信息流里面的核心功能；如果那80%不常用的功能也占用著最重要的位置，那么用戶就會(huì)被打擾，產(chǎn)生臃腫感，甚至?xí)艞壥褂卯a(chǎn)品。
優(yōu)點(diǎn)：
1、節(jié)省頁(yè)面展示空間，讓用戶將更多的注意力聚焦到當(dāng)前頁(yè)面；
2、由于導(dǎo)航界面是隱藏在屏幕之外，展開(kāi)之后整一頁(yè)面都是導(dǎo)航菜單內(nèi)容，所以可擴(kuò)展和個(gè)性化的空間很大；
3、擴(kuò)展性好，導(dǎo)航的個(gè)數(shù)沒(méi)上限。
缺點(diǎn)：
1、用戶不易發(fā)現(xiàn)，使用次功能需要二次點(diǎn)擊，給用戶在切換功能帶來(lái)了操作成本；
2、可見(jiàn)性太差，用戶還沒(méi)能把漢堡菜單按鈕和側(cè)邊欄聯(lián)系起來(lái)，所以，側(cè)邊欄的滲透率很低；
3、不直觀、不適用于主導(dǎo)航、如遇頻繁操作的功能，用戶不斷開(kāi)關(guān)抽屜體驗(yàn)不好。
08 下拉導(dǎo)航/菜單導(dǎo)航
描述：
1、與抽屜式導(dǎo)航的目的相同，都是為了突出內(nèi)容。一般位于產(chǎn)品頂部，通過(guò)點(diǎn)擊呼出導(dǎo)航菜單；
2、通常用來(lái)篩選同一信息模塊下不同類別的信息，或者快速啟動(dòng)某些常用的功能模塊，而不需要頻繁的頁(yè)面跳轉(zhuǎn) ；
3、Android中對(duì)應(yīng)的控件為spinner控件，但該控件用于同一類別下不同視圖之間的切換，而不是跳轉(zhuǎn)至完全不同的視圖。iOS中下拉菜單為自定義控件，可以實(shí)現(xiàn)不同類別之間的切換；
4、下拉導(dǎo)航還有一種變式，就是下來(lái)菜單中展示兩級(jí)甚至多級(jí)，一般在電商產(chǎn)品中比較常見(jiàn)，因?yàn)槠奉惡秃Y選條件眾多。
優(yōu)點(diǎn)：
1、菜單與界面的連貫性比抽屜式要好，容易讓用戶感知當(dāng)前位置；
缺點(diǎn)：
2、位于屏幕上方，相對(duì)隱蔽且不能結(jié)合手勢(shì)操作，不適合于頻繁的切換功能使用；
3、考慮到導(dǎo)航菜單的可用面積較小，所以一般采用列表的形式展示菜單內(nèi)容。
09 列表導(dǎo)航
描述：
1、作為信息組織框架，是我們?cè)诋a(chǎn)品設(shè)計(jì)中必不可少的一個(gè)信息承載模式。
2、適合用來(lái)顯示較長(zhǎng)或擁有次級(jí)文字內(nèi)容的標(biāo)題，每行可以融入較多信息。
3、與宮格導(dǎo)航類似，常用于二級(jí)頁(yè)面，不會(huì)默認(rèn)展示任何實(shí)質(zhì)內(nèi)容，所以通常app不會(huì)在首頁(yè)使用它；
4、無(wú)論ios開(kāi)發(fā)和android 都有現(xiàn)成的列表布局插件和模板。
優(yōu)點(diǎn)：
1、由上至下查看符合習(xí)慣；
5、結(jié)構(gòu)清晰，易于理解，冷靜高效，能夠幫助用戶快速的定位去到對(duì)應(yīng)的頁(yè)面。
缺點(diǎn)：
1、條目太多或分布不合理會(huì)導(dǎo)致用戶查找困難；
2、不適合需要頻繁切換任務(wù)的情況。
總結(jié)
導(dǎo)航可能不單單只有這幾種，可能大家的叫法也不同，而且每種導(dǎo)航都有其存在的意義，不是它不夠好，而是它可能不適用于你的產(chǎn)品。真正在實(shí)際項(xiàng)目中，還是得根據(jù)產(chǎn)品的實(shí)際情況綜合去運(yùn)用。
