App導(dǎo)航粥喜，是應(yīng)用的信息結(jié)構(gòu)在用戶(hù)界面上的展現(xiàn)方式
優(yōu)秀的App導(dǎo)航設(shè)計(jì)凸主，能夠充分運(yùn)用“組織、隱藏额湘、轉(zhuǎn)移卿吐、刪除”交互設(shè)計(jì)4策略，在十分局限的屏幕窗口中完美的組織豐富的信息锋华、展示產(chǎn)品的功能嗡官，并快速引導(dǎo)用戶(hù)使用產(chǎn)品功能。同時(shí)毯焕，導(dǎo)航設(shè)計(jì)也結(jié)合了產(chǎn)品信息架構(gòu)衍腥、交互設(shè)計(jì)、視覺(jué)設(shè)計(jì)芥丧，要想更好的設(shè)計(jì)產(chǎn)品紧阔，有必要進(jìn)行系統(tǒng)的理解。各種講移動(dòng)App導(dǎo)航設(shè)計(jì)的文章也很多续担，至少有提到十多種不同的的App導(dǎo)航類(lèi)型擅耽，與多種搭配方式。那么問(wèn)題來(lái)了物遇，這么多導(dǎo)航方式種類(lèi)繁多乖仇、稱(chēng)呼不一、變化多端询兴，怎么快速的掌握呢乃沙？別擔(dān)心，看Blink君總分總講解诗舰，你也能快速掌握警儒。
一，3乘3歸納
最基本的導(dǎo)航方式只有3種：標(biāo)簽式眶根、列表式蜀铲、矩陣式（請(qǐng)看下圖）。這3種從形狀上可以抽象為：點(diǎn)線面属百。
每種導(dǎo)航可以有3種狀態(tài)：靜態(tài)记劝、動(dòng)靜結(jié)合、動(dòng)態(tài)（請(qǐng)看下圖）族扰。簡(jiǎn)稱(chēng)3態(tài)厌丑。靜態(tài)導(dǎo)航定欧，顧名思義就是靜態(tài)的文字或圖標(biāo)圖片組成的導(dǎo)航，最為常見(jiàn)怒竿；動(dòng)靜結(jié)合導(dǎo)航砍鸠，是在靜態(tài)的基礎(chǔ)上，增加圖標(biāo)愧口、字符等動(dòng)態(tài)變化的內(nèi)容睦番；動(dòng)態(tài)導(dǎo)航类茂，則是直接動(dòng)態(tài)抽取內(nèi)容本身圖片或文字生成的導(dǎo)航耍属。
幾乎沒(méi)有哪個(gè)應(yīng)用只有單一層級(jí)的導(dǎo)航，通常是多種導(dǎo)航進(jìn)行搭配巩检，這些搭配方式厚骗，總結(jié)為3種：組合、層級(jí)兢哭、收放领舰。簡(jiǎn)稱(chēng)3合（結(jié)合、組合）迟螺。組合導(dǎo)航冲秽，就是在一個(gè)導(dǎo)航區(qū)域中集合多種不同的導(dǎo)航類(lèi)型；層級(jí)導(dǎo)航矩父，就是導(dǎo)航的嵌套锉桑，通常App都會(huì)有頂級(jí)導(dǎo)航、次級(jí)導(dǎo)航窍株；收放導(dǎo)航民轴，是指將部分導(dǎo)航內(nèi)容隱藏，用戶(hù)點(diǎn)做相應(yīng)的操作（如按鈕）后滑出或彈出的導(dǎo)航球订。
因此后裸，各種導(dǎo)航歸納為：形、態(tài)冒滩、合3種屬性微驶，每種屬性3個(gè)子類(lèi)，可以記作：點(diǎn)線面开睡，形態(tài)合因苹。——6個(gè)字士八，你已經(jīng)能推演出絕大多數(shù)導(dǎo)航形式了容燕。下面還是具體說(shuō)說(shuō)。
二婚度，主流導(dǎo)航分別說(shuō)
01 標(biāo)簽系導(dǎo)航
摘要： 通常稱(chēng)為標(biāo)簽欄或者選項(xiàng)卡蘸秘，位置在屏幕底部或者頂部官卡，底部標(biāo)簽欄是iOS原生導(dǎo)航控件（Tab bar）
優(yōu)點(diǎn)：主流（淘寶、微信醋虏、支付寶）寻咒、符合習(xí)慣、ios原生控件颈嚼，開(kāi)發(fā)簡(jiǎn)單
缺點(diǎn)：數(shù)量有限毛秘，一般不超過(guò)5個(gè)（不然需要結(jié)合其他方式，運(yùn)用層級(jí)和收放）
網(wǎng)易云音樂(lè)阻课，經(jīng)典的底部4Tab
iOS原裝App Podcast叫挟，5Tab，頂部是Navigation bar限煞，然后是3段式Segmented control（分段控件）
美拍抹恳，簡(jiǎn)約的底部3Tab主導(dǎo)航（現(xiàn)在最新版是5Tab了，Blink覺(jué)得這版很經(jīng)典）署驻，頂部是3Tab二級(jí)導(dǎo)航奋献，中間內(nèi)容區(qū)又是矩陣系導(dǎo)航
02 列表系導(dǎo)航
摘要： 最常見(jiàn)的主導(dǎo)航模式之一，又可分為分組列表旺上、個(gè)性化列表瓶蚂、行內(nèi)擴(kuò)展式列表（這個(gè)一般用做次級(jí)導(dǎo)航）和增強(qiáng)性列表（是在簡(jiǎn)單的列表菜單之上增加搜索、瀏覽或過(guò)濾之類(lèi)的功能后形成的）
優(yōu)點(diǎn)：由上至下查看符合習(xí)慣宣吱，列表菜單很適合用來(lái)顯示較長(zhǎng)或擁有次級(jí)文字內(nèi)容的標(biāo)題窃这，每行可以融入較多信息。
缺點(diǎn)：條目太多或分布不合理會(huì)導(dǎo)致用戶(hù)查找困難
印象筆記的ios版使用了列表式導(dǎo)航混合跳板式導(dǎo)航的設(shè)計(jì)凌节，其中列表式導(dǎo)航中又使用了分組列表和擴(kuò)展列表钦听。
AppStore，列表式分類(lèi)導(dǎo)航倍奢，每行的圖標(biāo)是動(dòng)態(tài)提取的
03 矩陣系導(dǎo)航
摘要： 已矩陣組合成的導(dǎo)航朴上，在不同的文章中可能被稱(chēng)作：跳板（圖標(biāo)卡片式）、磁貼式卒煞、陳列館式……一般用做主導(dǎo)航痪宰，常用的布局模式33（常說(shuō)的九宮格布局）23、22和21網(wǎng)格畔裕。但也不一定要拘泥于網(wǎng)格衣撬，也可以按照不同的優(yōu)先級(jí)順序，放大或者縮小網(wǎng)格扮饶，以突顯出內(nèi)容的層次感具练。
優(yōu)點(diǎn)：便于組合不同的信息類(lèi)型（運(yùn)營(yíng)位、廣告位甜无、內(nèi)容塊扛点、設(shè)置等）哥遮；靜態(tài)、動(dòng)態(tài)結(jié)合可以展示出豐富的信息陵究，同時(shí)保持視覺(jué)統(tǒng)一
缺點(diǎn)：各板塊之間關(guān)系獨(dú)立眠饮，視圖將完全跳轉(zhuǎn)，如需頻繁切換則不建議采用
美圖秀秀采用的就是2*3的跳板式（靜態(tài)圖標(biāo)）導(dǎo)航模式,通過(guò)上下铜邮、分頁(yè)來(lái)突出優(yōu)先級(jí)仪召。
靜態(tài)圖標(biāo)加上動(dòng)態(tài)字符可以展示出豐富的信息（方便預(yù)覽）
陳列館式的設(shè)計(jì)通過(guò)在平面上顯示各個(gè)內(nèi)容項(xiàng)來(lái)實(shí)現(xiàn)導(dǎo)航，主要用來(lái)顯示一些文章松蒜、菜譜扔茅、照片、產(chǎn)品等牍鞠，可以布局成輪盤(pán)咖摹、網(wǎng)格或用幻燈片演示评姨。
淘寶二手中的主導(dǎo)航采用了陳列館式導(dǎo)航难述，次導(dǎo)航采用的是抽屜式導(dǎo)航。
04 抽屜式導(dǎo)航（下拉式）
摘要： 屬于Android原生控件的導(dǎo)航方式吐句，后在ios中也常見(jiàn)到胁后。一般在Android中用做主導(dǎo)航，在ios中往往會(huì)搭配其他的主導(dǎo)航模式做次級(jí)導(dǎo)航使用嗦枢。在不同的地方可能被稱(chēng)為：擴(kuò)展菜單攀芯、側(cè)邊導(dǎo)航、漢堡導(dǎo)航文虏；
即是導(dǎo)航侣诺，又是一種跳轉(zhuǎn)方式（不彈出新頁(yè)面），抽屜打開(kāi)后可以展現(xiàn)任何一種導(dǎo)航方式（結(jié)合列表式的偏多）氧秘。
不用時(shí)隱藏年鸳，要用時(shí)打開(kāi)，可布置較多功能丸相，優(yōu)點(diǎn)如此搔确，缺點(diǎn)亦如此優(yōu)點(diǎn)：隱藏時(shí)不占用界面空間、適合做次導(dǎo)航灭忠、不頻繁使用功能收納（隱藏）
缺點(diǎn)：不直觀膳算、不適用于主導(dǎo)航、如遇頻繁操作的功能弛作，用戶(hù)不斷開(kāi)關(guān)抽屜體驗(yàn)不好涕蜂。
抽屜結(jié)合列表
抽屜結(jié)合矩陣
05 非主流創(chuàng)新導(dǎo)航
Path的招牌，點(diǎn)聚式導(dǎo)航
Path的招牌設(shè)計(jì)映琳，看似非常牛叉机隙，實(shí)際也是形瘦真、態(tài)、合的演變黍瞧。更像是抽屜式的一種變形诸尽。
菜單與內(nèi)容混在一起
閱后即焚私密社交應(yīng)用Blink（碰巧與Blink君同名），設(shè)置印颤、聯(lián)系人您机、群、添加聯(lián)系人全部是右邊的一列圓圈圖標(biāo)（側(cè)面Tab）年局，其中“設(shè)置”是抽屜式际看，點(diǎn)擊展開(kāi)，聯(lián)系人頭像點(diǎn)擊后直接向其發(fā)送照片矢否，太贊了仲闽。
創(chuàng)新的拖拽定位導(dǎo)航
上圖是待辦事項(xiàng)工具 Suru 的隱藏菜單，結(jié)合了抽屜與Tab僵朗，以下拉深度來(lái)定位到相應(yīng)的選項(xiàng)赖欣，松手則進(jìn)入定位的選項(xiàng)。
這種設(shè)計(jì)非常創(chuàng)新验庙，不過(guò)確實(shí)很非主流顶吮，Suru這樣做的目的是讓你專(zhuān)注于最重要的待辦事項(xiàng)操作上，偶爾要用到設(shè)置等低頻功能時(shí)粪薛，下拉進(jìn)入悴了，且越不重要的放在下拉越深的位置，而且超過(guò)3個(gè)選項(xiàng)违寿，體驗(yàn)就開(kāi)始下降了湃交。
三，綜合案例
這張是從Blink君做產(chǎn)品分析Axure中截圖出來(lái)的（2014年的藤巢，所以是老版本美拍）搞莺，原型是帶動(dòng)態(tài)效果的，所以圖中說(shuō)“可點(diǎn)擊”菌瘪，感興趣的可以私聊
主導(dǎo)航：
美拍的主導(dǎo)航采用Tab腮敌，標(biāo)簽式，有3個(gè)Tab俏扩，非常簡(jiǎn)潔糜工。
中間Tab是最主要的“美拍”鍵，采用與LOGO相呼應(yīng)的圖標(biāo)录淡。
左右兩邊的“更多”捌木、“信息”Tab則雙雙采用抽屜式拓展導(dǎo)航，將不重要的信息和菜單隱藏了起來(lái)嫉戚∨亳桑“更多”頁(yè)面中又是采用的列表與擴(kuò)展列表式導(dǎo)航
3Tab中間首要澈圈，兩邊路對(duì)稱(chēng)抽屜擴(kuò)展的布局方式在這個(gè)應(yīng)用中非常完美，又實(shí)用帆啃，有種比翼雙飛的感覺(jué)瞬女。
首頁(yè)次導(dǎo)航：
次級(jí)導(dǎo)航也是采用tabber，也是3個(gè)Tab努潘，字標(biāo)诽偷。
其當(dāng)前選中的Tab紫紅色下劃線的方式在該應(yīng)用其他文字標(biāo)簽導(dǎo)航位置均為同樣設(shè)置，充滿(mǎn)一致性疯坤。
內(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)簽菌瘫。
- 熱門(mén)——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é)語(yǔ)：
App導(dǎo)航的形式是不是多姿多彩啊突梦，最后別忘了诫舅，Blink君寫(xiě)本文是來(lái)總結(jié)的——點(diǎn)線面，形態(tài)合宫患，6個(gè)字幫你快速掌握App導(dǎo)航的設(shè)計(jì)！
不過(guò)要設(shè)計(jì)出牛逼的App这弧，不能單純的堆疊導(dǎo)航娃闲，在設(shè)計(jì)導(dǎo)航之前首先要理清產(chǎn)品的業(yè)務(wù)邏輯，了解公司的戰(zhàn)略與資源匾浪，才能搭出好的導(dǎo)航框架皇帮。
原文由互聯(lián)網(wǎng)產(chǎn)品經(jīng)理@BlinkQ創(chuàng)作，轉(zhuǎn)載請(qǐng)注明出處蛋辈，原文永久鏈接：http://www.reibang.com/p/a5f05393c6c9
參考文獻(xiàn)
一切都是站在巨人的肩上属拾，本文Blink君也是參考了包含不且不限于以下文章，引用了文字或者圖片：
《九種移動(dòng)應(yīng)用導(dǎo)航設(shè)計(jì)總結(jié)》
《4種常見(jiàn)的APP導(dǎo)航設(shè)計(jì)方式冷溶，讓我們的APP高大上》
《5種實(shí)用的移動(dòng)手機(jī)APP導(dǎo)航菜單設(shè)計(jì)方案》
《APP設(shè)計(jì)中用戶(hù)體驗(yàn)比較好的“跳轉(zhuǎn)”效果匯總》
《Path for iOS的交互細(xì)節(jié)-原型庫(kù)》（鏈接已失效）
iOS7 Human Interface Guidelines.pdf
