App導(dǎo)航，是應(yīng)用的信息結(jié)構(gòu)在用戶界面上的展現(xiàn)方式。

優(yōu)秀的App導(dǎo)航設(shè)計(jì)，能夠充分運(yùn)用“組織、隱藏、轉(zhuǎn)移、刪 除”交互設(shè)計(jì)4策略，在十分局限的屏幕窗口中完美的組織豐富的信息、展示產(chǎn)品的功能，并快速引導(dǎo)用戶使用產(chǎn)品功能。同時(shí)，導(dǎo)航設(shè)計(jì)也結(jié)合了產(chǎn)品信息架構(gòu)、 交互設(shè)計(jì)、視覺設(shè)計(jì)，要想更好的設(shè)計(jì)產(chǎn)品，有必要進(jìn)行系統(tǒng)的理解。

各種講移動(dòng)App導(dǎo)航設(shè)計(jì)的文章也很多，至少有提到十多種不同的的App導(dǎo)航類型，與多種搭配方式。那么問題來了，這么多導(dǎo)航方式種類繁多、稱呼不一、變化多端，怎么快速的掌握呢？別擔(dān)心，看Blink君總分總講解，你也能快速掌握。

一，3乘3歸納

最基本的導(dǎo)航方式只有3種：標(biāo)簽式、列表式、矩陣式（請(qǐng)看下圖）。這3種從形狀上可以抽象為：點(diǎn)線面。

Paste_Image.png

幾乎沒有哪個(gè)應(yīng)用只有單一層級(jí)的導(dǎo)航，通常是多種導(dǎo)航進(jìn)行搭配，這些搭配方式，總結(jié)為3種：組合、層級(jí)、收放。簡稱3合（結(jié) 合、組合）。組合導(dǎo)航，就是在一個(gè)導(dǎo)航區(qū)域中集合多種不同的導(dǎo)航類型；層級(jí)導(dǎo)航，就是導(dǎo)航的嵌套，通常App都會(huì)有頂級(jí)導(dǎo)航、次級(jí)導(dǎo)航；收放導(dǎo)航，是指將 部分導(dǎo)航內(nèi)容隱藏，用戶點(diǎn)做相應(yīng)的操作（如按鈕）后滑出或彈出的導(dǎo)航。

Paste_Image.png

因此，各種導(dǎo)航歸納為：形、態(tài)、合3種屬性，每種屬性3個(gè)子類，可以記作：點(diǎn)線面，形態(tài)合?！?個(gè)字，你已經(jīng)能推演出絕大多數(shù)導(dǎo)航形式了。下面還是具體說說。

二，主流導(dǎo)航分別說

01 標(biāo)簽系導(dǎo)航

• 摘要： 通常稱為標(biāo)簽欄或者選項(xiàng)卡，位置在屏幕底部或者頂部，底部標(biāo)簽欄是iOS原生導(dǎo)航控件（Tab bar）
• 優(yōu)點(diǎn)：主流（淘寶、微信、支付寶）、符合習(xí)慣、ios原生控件，開發(fā)簡單
• 缺點(diǎn)：數(shù)量有限，一般不超過5個(gè)（不然需要結(jié)合其他方式，運(yùn)用層級(jí)和收放）

Paste_Image.png

網(wǎng)易云音樂，經(jīng)典的底部4Tab

Paste_Image.png

iOS原裝App Podcast，5Tab，頂部是Navigation bar，然后是3段式Segmented control（分段控件）

Paste_Image.png

美拍，簡約的底部3Tab主導(dǎo)航（現(xiàn)在最新版是5Tab了，Blink覺得這版很經(jīng)典），頂部是3Tab二級(jí)導(dǎo)航，中間內(nèi)容區(qū)又是矩陣系導(dǎo)航

02 列表系導(dǎo)航

摘要： 最常見的主導(dǎo)航模式之一，又可分為分組列表、個(gè)性化列表、行內(nèi)擴(kuò)展式列表（這個(gè)一般用做次級(jí)導(dǎo)航）和增強(qiáng)性列表（是在簡單的列表菜單之上增加搜索、瀏覽或過濾之類的功能后形成的）

優(yōu)點(diǎn)：由上至下查看符合習(xí)慣，列表菜單很適合用來顯示較長或擁有次級(jí)文字內(nèi)容的標(biāo)題，每行可以融入較多信息。

缺點(diǎn)：條目太多或分布不合理會(huì)導(dǎo)致用戶查找困難

Paste_Image.png

印象筆記的ios版使用了列表式導(dǎo)航混合跳板式導(dǎo)航的設(shè)計(jì)，其中列表式導(dǎo)航中又使用了分組列表和擴(kuò)展列表。

Paste_Image.png

AppStore，列表式分類導(dǎo)航，每行的圖標(biāo)是動(dòng)態(tài)提取的

03 矩陣系導(dǎo)航

摘要：已矩陣組合成的導(dǎo)航，在不同的文章中可能被稱作：跳板（圖標(biāo)卡片式）、磁貼式、陳列館式……一般用做主導(dǎo)航，常用的布局模式33（常說的九宮格布局）23、22和21網(wǎng)格。但也不一定要拘泥于網(wǎng)格，也可以按照不同的優(yōu)先級(jí)順序，放大或者縮小網(wǎng)格，以突顯出內(nèi)容的層次感。

優(yōu)點(diǎn)：便于組合不同的信息類型（運(yùn)營位、廣告位、內(nèi)容塊、設(shè)置等）；靜態(tài)、動(dòng)態(tài)結(jié)合可以展示出豐富的信息，同時(shí)保持視覺統(tǒng)一

缺點(diǎn)：各板塊之間關(guān)系獨(dú)立，視圖將完全跳轉(zhuǎn)，如需頻繁切換則不建議采用

Paste_Image.png

美圖秀秀采用的就是2*3的跳板式（靜態(tài)圖標(biāo)）導(dǎo)航模式,通過上下、分頁來突出優(yōu)先級(jí)。

Paste_Image.png

靜態(tài)圖標(biāo)加上動(dòng)態(tài)字符可以展示出豐富的信息（方便預(yù)覽）

Paste_Image.png

陳列館式的設(shè)計(jì)通過在平面上顯示各個(gè)內(nèi)容項(xiàng)來實(shí)現(xiàn)導(dǎo)航，主要用來顯示一些文章、菜譜、照片、產(chǎn)品等，可以布局成輪盤、網(wǎng)格或用幻燈片演示。

Paste_Image.png

淘寶二手中的主導(dǎo)航采用了陳列館式導(dǎo)航，次導(dǎo)航采用的是抽屜式導(dǎo)航。

04 抽屜式導(dǎo)航（下拉式）

摘要： 屬于Android原生控件的導(dǎo)航方式，后在ios中也常見到。一般在Android中用做主導(dǎo)航，在ios中往往會(huì)搭配其他的主導(dǎo)航模式做次級(jí)導(dǎo)航使用。在不同的地方可能被稱為：擴(kuò)展菜單、側(cè)邊導(dǎo)航、漢堡導(dǎo)航；

即是導(dǎo)航，又是一種跳轉(zhuǎn)方式（不彈出新頁面），抽屜打開后可以展現(xiàn)任何一種導(dǎo)航方式（結(jié)合列表式的偏多）。

不用時(shí)隱藏，要用時(shí)打開，可布置較多功能，優(yōu)點(diǎn)如此，缺點(diǎn)亦如此

優(yōu)點(diǎn)：隱藏時(shí)不占用界面空間、適合做次導(dǎo)航、不頻繁使用功能收納（隱藏）

缺點(diǎn)：不直觀、不適用于主導(dǎo)航、如遇頻繁操作的功能，用戶不斷開關(guān)抽屜體驗(yàn)不好。

Paste_Image.png

抽屜結(jié)合列表

Paste_Image.png

抽屜結(jié)合矩陣

05 牛叉的創(chuàng)新式

Paste_Image.png

Path的招牌設(shè)計(jì)，看似非常牛叉，實(shí)際也是形、態(tài)、合的演變。

Paste_Image.png

閱后即焚私密社交應(yīng)用Blink（碰巧與Blink君同名），設(shè)置、聯(lián)系人、群、添加聯(lián)系人全部是右邊的一列圓圈圖標(biāo)（側(cè)面Tab），其中“設(shè)置”是抽屜式，點(diǎn)擊展開，聯(lián)系人頭像點(diǎn)擊后直接向其發(fā)送照片，太贊了。

三，綜合案例

Paste_Image.png

這張是從Blink君做產(chǎn)品分析Axure中截圖出來的（2014年的，所以是老版本美拍），原型是帶動(dòng)態(tài)效果的，所以圖中說“可點(diǎn)擊”，感興趣的可以私聊

主導(dǎo)航：

美拍的主導(dǎo)航采用Tab，標(biāo)簽式，有3個(gè)Tab，非常簡潔。

中間Tab是最主要的“美拍”鍵，采用與LOGO相呼應(yīng)的圖標(biāo)。

左右兩邊的“更多”、“信息”Tab則雙雙采用抽屜式拓展導(dǎo)航，將不重要的信息和菜單隱藏了起來?！案唷表撁嬷杏质遣捎玫牧斜砼c擴(kuò)展列表式導(dǎo)航

3Tab中間首要，兩邊路對(duì)稱抽屜擴(kuò)展的布局方式在這個(gè)應(yīng)用中非常完美，又實(shí)用，有種比翼雙飛的感覺。

首頁次導(dǎo)航：

次級(jí)導(dǎo)航也是采用tabber，也是3個(gè)Tab，字標(biāo)。

其當(dāng)前選中的Tab紫紅色下劃線的方式在該應(yīng)用其他文字標(biāo)簽導(dǎo)航位置均為同樣設(shè)置，充滿一致性。

內(nèi)容區(qū)：

上面已經(jīng)出現(xiàn)了標(biāo)簽式導(dǎo)航、列表式導(dǎo)航、抽屜式導(dǎo)航（抽屜也屬于是一種跳轉(zhuǎn)方式）。作用以視頻為主的應(yīng)用，美拍在主內(nèi)容區(qū)更向我們展現(xiàn)了方塊系導(dǎo)航的3種形態(tài)，分別對(duì)應(yīng)3個(gè)次導(dǎo)航標(biāo)簽。

• 熱門——2*3陳列館式導(dǎo)航【視頻縮略圖】
• 廣場(chǎng)——跳板式（磁貼）導(dǎo)航【靜態(tài)封面圖】，點(diǎn)擊進(jìn)入某個(gè)頻道后呈現(xiàn)2*3陳列館。
• 好友——1*1幻燈片形式的陳列館導(dǎo)航【視頻實(shí)時(shí)預(yù)覽】

結(jié)語：

App導(dǎo)航的形式是不是多姿多彩啊，最后別忘了，Blink君寫本文是來總結(jié)的——點(diǎn)線面，形態(tài)合，6個(gè)字幫你快速掌握App導(dǎo)航的設(shè)計(jì)！

不過要設(shè)計(jì)出牛逼的App，不能單純的堆疊導(dǎo)航，在設(shè)計(jì)導(dǎo)航之前首先要理清產(chǎn)品的業(yè)務(wù)邏輯，了解公司的戰(zhàn)略與資源，才能搭出好的導(dǎo)航框架。

原文作者：@BlinkQ

原文地址：http://www.iblinkq.com/sence/appnavigation.html