在各平臺(tái)設(shè)計(jì)越來越規(guī)范的今天，產(chǎn)品設(shè)計(jì)越來越看重 app 的易用性近顷，越來越多的 app 都使用 Tab Bar（標(biāo)簽欄）設(shè)計(jì)泽论， 但是還是有一些 app 因?yàn)閳鼍啊⒐δ苄枨髸?huì)選擇其他導(dǎo)航方式疚漆。先放上一本公認(rèn)的 UI 入門書籍，就是下面這貨刁赦，丁丁曾經(jīng)頭腦發(fā)熱看完了娶聘，也寫過讀書筆記，雖然移動(dòng)應(yīng)用發(fā)展太快甚脉，里面很多截圖的設(shè)計(jì)都挺舊了丸升，但是不妨礙它的啟蒙作用。今天主要是跟大家聊聊應(yīng)用導(dǎo)航有哪些設(shè)計(jì)以及優(yōu)缺點(diǎn)牺氨。
一狡耻、標(biāo)簽式導(dǎo)航
毋庸置疑，這種導(dǎo)航方式是目前的主流猴凹。如果細(xì)分還可以分為底部 tab 式導(dǎo)航夷狰、頂部tab式導(dǎo)航、底部 tab 的擴(kuò)展導(dǎo)航三種方式郊霎，而隨著設(shè)計(jì)的規(guī)范以及智能手機(jī)的屏幕越來越大沼头，頂部 tab 式導(dǎo)航方式逐漸被淘汰，而底部 tab 的擴(kuò)展導(dǎo)航方式多用于超級(jí)按鈕，而超級(jí)按鈕一般用于快速發(fā)圖片进倍、發(fā)文章等動(dòng)作土至，所以這里我們主要討論底部 tab 式導(dǎo)航。
優(yōu)點(diǎn)
1背捌、雖然設(shè)計(jì)不出彩但不會(huì)犯錯(cuò)
2毙籽、清楚當(dāng)前所在的入口位置3、輕松在各入口間頻繁跳轉(zhuǎn)且不會(huì)迷失方向4毡庆、直接展現(xiàn)最重要入口的內(nèi)容信息
缺點(diǎn)
1、功能入口過多時(shí)烙如，該模式顯得笨重不實(shí)用（最多不超過 5 個(gè)）
二么抗、抽屜式導(dǎo)航
抽屜式導(dǎo)航最初出現(xiàn)在安卓端，后來 iOS 端也開始使用這種導(dǎo)航方式亚铁，經(jīng)常和底部 tab 式導(dǎo)航結(jié)合使用的抽屜式導(dǎo)航蝇刀，我們可以稱之為優(yōu)雅的隱喻。抽屜式導(dǎo)航將部分信息內(nèi)容進(jìn)行隱藏徘溢，突出了應(yīng)用的核心功能吞琐。（手 Q 自去年改版用抽屜式跟 tab 式結(jié)合就一直沒改）
優(yōu)點(diǎn)
1、兼容多種模式
2然爆、擴(kuò)展性好
缺點(diǎn)
1站粟、隱藏框架中其他入口
2、對(duì)入口交互的功能可見性要求高
3曾雕、大頻幕時(shí)代單手持握時(shí)屬于操作盲區(qū)
4奴烙、對(duì)排版要求高
三、跳板式（宮格式）導(dǎo)航
宮格聚集在中心頁面剖张，用戶只能在中心頁面進(jìn)入其中一個(gè)宮格切诀，如果想要進(jìn)入另一個(gè)宮格，必須要先回到中心頁面搔弄，再進(jìn)入另一個(gè)宮格幅虑。每個(gè)宮格相互獨(dú)立，它們的信息間也沒有任何交集顾犹，無法跳轉(zhuǎn)互通倒庵。因?yàn)檫@種特質(zhì)，宮格式導(dǎo)航被廣泛應(yīng)用于各平臺(tái)系統(tǒng)的中心頁面蹦渣。
優(yōu)點(diǎn)
1哄芜、清晰展現(xiàn)各入口
2、容易記住各入口位置柬唯，方便快速找到
缺點(diǎn)
1认臊、無法在多入口間靈活跳轉(zhuǎn)，不適合多任務(wù)操作
2锄奢、容易形成更深的路徑
3失晴、不能直接展現(xiàn)入口內(nèi)容
4剧腻、不能顯示太多入口次級(jí)內(nèi)容
四、列表式導(dǎo)航
如果說標(biāo)簽式導(dǎo)航是 APP 中最普遍的導(dǎo)航方式涂屁，那么列表式導(dǎo)航就是最必不可少的一種信息承載模式书在，這種導(dǎo)航結(jié)構(gòu)簡單清晰、易于理解拆又、冷靜高效儒旬，能夠幫助用戶快速定位到對(duì)應(yīng)內(nèi)容。
優(yōu)點(diǎn)
1帖族、層次展示清晰
2栈源、可展示內(nèi)容較長的標(biāo)題
3、可展示標(biāo)題的次級(jí)內(nèi)容
缺點(diǎn)
1竖般、同級(jí)內(nèi)容過多時(shí)甚垦，用戶瀏覽容易產(chǎn)生疲勞
2、排版靈活性不是很高
3涣雕、只能通過排列順序艰亮、顏色來區(qū)分各入口重要
五、陳列館式導(dǎo)航
陳列館式的設(shè)計(jì)通過在平面上顯示各個(gè)內(nèi)容項(xiàng)來實(shí)現(xiàn)導(dǎo)航挣郭，主要用來顯示一些文章迄埃、菜譜、照片丈屹、產(chǎn)品等调俘，可以布局成輪盤、網(wǎng)格或用幻燈片演示旺垒。
優(yōu)點(diǎn)
1彩库、直觀展現(xiàn)各項(xiàng)內(nèi)容
2、方便瀏覽經(jīng)常更新的內(nèi)容
缺點(diǎn)
1先蒋、不適合展現(xiàn)頂層入口框架
2骇钦、容易形成界面內(nèi)容過多，顯得雜亂
3竞漾、設(shè)計(jì)效果容易呆板
六眯搭、超級(jí)菜單式導(dǎo)航
移動(dòng)設(shè)備上的超級(jí)菜單式導(dǎo)航與網(wǎng)站所用的超級(jí)菜單導(dǎo)航類似，它在一個(gè)較大的覆蓋面板上分組顯示已定義好格式的菜單選項(xiàng)业岁。
這種導(dǎo)航模式在現(xiàn)在的 app 設(shè)計(jì)中使用的比較少鳞仙，而且一般會(huì)用做分類檢索的次級(jí)導(dǎo)航使用。在手機(jī)網(wǎng)站的導(dǎo)航設(shè)計(jì)中比較常見笔时。
美團(tuán)中就采用了超級(jí)菜單式導(dǎo)航做為次級(jí)導(dǎo)航使用棍好。
七、點(diǎn)聚式導(dǎo)航
說到點(diǎn)聚式導(dǎo)航必然會(huì)想到 path 這個(gè) app，當(dāng)年剛出來時(shí)新穎的交互方式讓人眼前一亮借笙，它的方式是：將用戶最頻繁使用的多個(gè)核心功能匯聚在主界面中一個(gè)按鈕上扒怖，通過點(diǎn)擊按鈕呼出功能菜單的導(dǎo)航。
優(yōu)點(diǎn)
1业稼、靈活
2盗痒、展示方式有趣
3、使界面更開闊
缺點(diǎn)
1低散、隱藏框架中其他入口
八俯邓、頁面轉(zhuǎn)盤式導(dǎo)航
圖片或者整塊內(nèi)容并列展示，用戶通過左右手勢(shì)滑動(dòng)來切換當(dāng)前內(nèi)容熔号，形似轉(zhuǎn)盤的導(dǎo)航看成，多用于陌生人社交軟件（都懂的~）。
優(yōu)點(diǎn)
1跨嘉、單頁面內(nèi)容整體性強(qiáng)
2、線性的瀏覽方式有順暢感吃嘿、方向感
缺點(diǎn)
1祠乃、不適合展示過多頁面
2、不能跳躍性地查看間隔的頁面兑燥，只能按順序查看相鄰的頁面
3亮瓷、由于各頁面內(nèi)容結(jié)構(gòu)相似，容易忽略后面的內(nèi)容
九降瞳、儀表式導(dǎo)航
采用圓形布局具有指針或計(jì)數(shù)器類似儀表盤的導(dǎo)航嘱支。提供了一種度量 KPI （關(guān)鍵績效指標(biāo)）是否達(dá)到要求的方法。每一項(xiàng)度量都可以顯示出額外的信息挣饥，這種模式對(duì)商業(yè)應(yīng)用除师、分析工具、銷售和市場應(yīng)用非常有用扔枫。
優(yōu)點(diǎn)
1汛聚、使數(shù)據(jù)更加生動(dòng)直觀易讀，增加APP趣味性
2短荐、工具類倚舀、數(shù)據(jù)分析類、數(shù)據(jù)可視化類應(yīng)用
丨總結(jié)
移動(dòng)互聯(lián)網(wǎng)高速發(fā)展的今天忍宋，各個(gè)平臺(tái)的設(shè)計(jì)已經(jīng)越來越規(guī)范痕貌，未來的趨勢(shì)中是淡化各個(gè)平臺(tái)的差異，盡量通過一套設(shè)計(jì)來無縫的連接各個(gè)應(yīng)用在不同設(shè)備上的體驗(yàn)糠排，同時(shí)也節(jié)省了人力和物力舵稠。雖然因?yàn)槭謾C(jī)屏幕越來越大導(dǎo)致底部 tab 式導(dǎo)航成為主流，但是在不同的場景還是需要其他導(dǎo)航方式去支撐設(shè)計(jì)，所以在選擇導(dǎo)航時(shí)不應(yīng)該只局限在「標(biāo)準(zhǔn)設(shè)計(jì)」中柱查，而是應(yīng)當(dāng)本著以「內(nèi)容」為先的思想來考慮廓俭。
