最基本的導(dǎo)航方式只有3種：標(biāo)簽式、列表式霎槐、矩陣式送浊。這3種從形狀上可以抽象為：點線面。
App導(dǎo)航丘跌，是應(yīng)用的信息結(jié)構(gòu)在用戶界面上的展現(xiàn)方式
優(yōu)秀的App導(dǎo)航設(shè)計袭景，能夠充分運用“組織、隱藏闭树、轉(zhuǎn)移耸棒、刪除”交互設(shè)計4策略，在十分局限的屏幕窗口中完美的組織豐富的信息报辱、展示產(chǎn)品的功能榆纽，并快速引導(dǎo)用戶使用產(chǎn)品功能。同時，導(dǎo)航設(shè)計也結(jié)合了產(chǎn)品信息架構(gòu)奈籽、交互設(shè)計、視覺設(shè)計鸵赫，要想更好的設(shè)計產(chǎn)品衣屏，有必要進(jìn)行系統(tǒng)的理解。各種講移動App導(dǎo)航設(shè)計的文章也很多辩棒，至少有提到十多種不同的的App導(dǎo)航類型狼忱，與多種搭配方式。那么問題來了一睁，這么多導(dǎo)航方式種類繁多钻弄、稱呼不一、變化多端者吁，怎么快速的掌握呢窘俺？別擔(dān)心，看Blink君總分總講解复凳，你也能快速掌握瘤泪。
一，3乘3歸納
最基本的導(dǎo)航方式只有3種：標(biāo)簽式育八、列表式对途、矩陣式（請看下圖）。這3種從形狀上可以抽象為：點線面髓棋。
每種導(dǎo)航可以有3種狀態(tài)：靜態(tài)实檀、動靜結(jié)合、動態(tài)（請看下圖）按声。簡稱3態(tài)膳犹。靜態(tài)導(dǎo)航，顧名思義就是靜態(tài)的文字或圖標(biāo)圖片組成的導(dǎo)航儒喊，最為常見镣奋；動靜結(jié)合導(dǎo)航，是在靜態(tài)的基礎(chǔ)上怀愧，增加圖標(biāo)侨颈、字符等動態(tài)變化的內(nèi)容；動態(tài)導(dǎo)航芯义，則是直接動態(tài)抽取內(nèi)容本身圖片或文字生成的導(dǎo)航哈垢。
幾乎沒有哪個應(yīng)用只有單一層級的導(dǎo)航，通常是多種導(dǎo)航進(jìn)行搭配扛拨，這些搭配方式耘分，總結(jié)為3種：組合、層級、收放求泰。簡稱3合（結(jié)合央渣、組合）。組合導(dǎo)航渴频，就是在一個導(dǎo)航區(qū)域中集合多種不同的導(dǎo)航類型芽丹；層級導(dǎo)航，就是導(dǎo)航的嵌套卜朗，通常App都會有頂級導(dǎo)航拔第、次級導(dǎo)航；收放導(dǎo)航场钉，是指將部分導(dǎo)航內(nèi)容隱藏蚊俺，用戶點做相應(yīng)的操作（如按鈕）后滑出或彈出的導(dǎo)航。
因此逛万，各種導(dǎo)航歸納為：形泳猬、態(tài)、合3種屬性泣港，每種屬性3個子類暂殖，可以記作：點線面，形態(tài)合当纱∏好浚——6個字，你已經(jīng)能推演出絕大多數(shù)導(dǎo)航形式了坡氯。下面還是具體說說晨横。
二，主流導(dǎo)航分別說
01 標(biāo)簽系導(dǎo)航
摘要： 通常稱為標(biāo)簽欄或者選項卡箫柳，位置在屏幕底部或者頂部手形，底部標(biāo)簽欄是iOS原生導(dǎo)航控件（Tab bar）
優(yōu)點：主流（淘寶、微信悯恍、支付寶）库糠、符合習(xí)慣、ios原生控件涮毫，開發(fā)簡單
缺點：數(shù)量有限瞬欧，一般不超過5個（不然需要結(jié)合其他方式，運用層級和收放）
網(wǎng)易云音樂罢防，經(jīng)典的底部4Tab
iOS原裝App Podcast艘虎，5Tab，頂部是Navigation bar咒吐，然后是3段式Segmented control（分段控件）
美拍野建，簡約的底部3Tab主導(dǎo)航（現(xiàn)在最新版是5Tab了属划，Blink覺得這版很經(jīng)典），頂部是3Tab二級導(dǎo)航候生，中間內(nèi)容區(qū)又是矩陣系導(dǎo)航
02 列表系導(dǎo)航
摘要： 最常見的主導(dǎo)航模式之一同眯，又可分為分組列表、個性化列表唯鸭、行內(nèi)擴(kuò)展式列表（這個一般用做次級導(dǎo)航）和增強(qiáng)性列表（是在簡單的列表菜單之上增加搜索嗽测、瀏覽或過濾之類的功能后形成的）
優(yōu)點：由上至下查看符合習(xí)慣，列表菜單很適合用來顯示較長或擁有次級文字內(nèi)容的標(biāo)題肿孵，每行可以融入較多信息。
缺點：條目太多或分布不合理會導(dǎo)致用戶查找困難
印象筆記的ios版使用了列表式導(dǎo)航混合跳板式導(dǎo)航的設(shè)計疏魏，其中列表式導(dǎo)航中又使用了分組列表和擴(kuò)展列表停做。
AppStore，列表式分類導(dǎo)航大莫，每行的圖標(biāo)是動態(tài)提取的
03 矩陣系導(dǎo)航
摘要： 已矩陣組合成的導(dǎo)航蛉腌，在不同的文章中可能被稱作：跳板（圖標(biāo)卡片式）、磁貼式只厘、陳列館式……一般用做主導(dǎo)航烙丛，常用的布局模式33（常說的九宮格布局）23、22和21網(wǎng)格羔味。但也不一定要拘泥于網(wǎng)格河咽，也可以按照不同的優(yōu)先級順序，放大或者縮小網(wǎng)格赋元，以突顯出內(nèi)容的層次感忘蟹。
優(yōu)點：便于組合不同的信息類型（運營位、廣告位搁凸、內(nèi)容塊媚值、設(shè)置等）；靜態(tài)护糖、動態(tài)結(jié)合可以展示出豐富的信息褥芒，同時保持視覺統(tǒng)一
缺點：各板塊之間關(guān)系獨立，視圖將完全跳轉(zhuǎn)嫡良，如需頻繁切換則不建議采用
美圖秀秀采用的就是2*3的跳板式（靜態(tài)圖標(biāo)）導(dǎo)航模式,通過上下锰扶、分頁來突出優(yōu)先級。
靜態(tài)圖標(biāo)加上動態(tài)字符可以展示出豐富的信息（方便預(yù)覽）
陳列館式的設(shè)計通過在平面上顯示各個內(nèi)容項來實現(xiàn)導(dǎo)航皆刺，主要用來顯示一些文章少辣、菜譜、照片羡蛾、產(chǎn)品等漓帅，可以布局成輪盤、網(wǎng)格或用幻燈片演示。
淘寶二手中的主導(dǎo)航采用了陳列館式導(dǎo)航忙干，次導(dǎo)航采用的是抽屜式導(dǎo)航器予。
04 抽屜式導(dǎo)航（下拉式）
摘要：屬于Android原生控件的導(dǎo)航方式，后在ios中也常見到捐迫。一般在Android中用做主導(dǎo)航乾翔，在ios中往往會搭配其他的主導(dǎo)航模式做次級導(dǎo)航使用。在不同的地方可能被稱為：擴(kuò)展菜單施戴、側(cè)邊導(dǎo)航反浓、漢堡導(dǎo)航；
即是導(dǎo)航赞哗，又是一種跳轉(zhuǎn)方式（不彈出新頁面）雷则，抽屜打開后可以展現(xiàn)任何一種導(dǎo)航方式（結(jié)合列表式的偏多）。
不用時隱藏肪笋，要用時打開月劈，可布置較多功能，優(yōu)點如此藤乙，缺點亦如此
優(yōu)點：隱藏時不占用界面空間猜揪、適合做次導(dǎo)航、不頻繁使用功能收納（隱藏）
缺點：不直觀坛梁、不適用于主導(dǎo)航而姐、如遇頻繁操作的功能，用戶不斷開關(guān)抽屜體驗不好罚勾。
抽屜結(jié)合列表
抽屜結(jié)合矩陣
05 非主流創(chuàng)新導(dǎo)航
Path的招牌毅人，點聚式導(dǎo)航
Path的招牌設(shè)計，看似非常牛叉尖殃，實際也是形丈莺、態(tài)、合的演變送丰。更像是抽屜式的一種變形缔俄。
菜單與內(nèi)容混在一起
閱后即焚私密社交應(yīng)用Blink（碰巧與Blink君同名），設(shè)置器躏、聯(lián)系人俐载、群、添加聯(lián)系人全部是右邊的一列圓圈圖標(biāo)（側(cè)面Tab）登失，其中“設(shè)置”是抽屜式遏佣，點擊展開，聯(lián)系人頭像點擊后直接向其發(fā)送照片揽浙，太贊了状婶。
創(chuàng)新的拖拽定位導(dǎo)航
上圖是待辦事項工具 Suru 的隱藏菜單意敛，結(jié)合了抽屜與Tab，以下拉深度來定位到相應(yīng)的選項膛虫，松手則進(jìn)入定位的選項草姻。
這種設(shè)計非常創(chuàng)新，不過確實很非主流稍刀，Suru這樣做的目的是讓你專注于最重要的待辦事項操作上撩独，偶爾要用到設(shè)置等低頻功能時，下拉進(jìn)入账月，且越不重要的放在下拉越深的位置综膀，而且超過3個選項，體驗就開始下降了局齿。
三僧须，綜合案例
這張是從Blink君做產(chǎn)品分析Axure中截圖出來的（2014年的，所以是老版本美拍）项炼，原型是帶動態(tài)效果的，所以圖中說“可點擊”示绊，感興趣的可以私聊
主導(dǎo)航：
美拍的主導(dǎo)航采用Tab锭部，標(biāo)簽式，有3個Tab面褐，非常簡潔拌禾。
中間Tab是最主要的“美拍”鍵，采用與LOGO相呼應(yīng)的圖標(biāo)展哭。
左右兩邊的“更多”湃窍、“信息”Tab則雙雙采用抽屜式拓展導(dǎo)航，將不重要的信息和菜單隱藏了起來匪傍∧校“更多”頁面中又是采用的列表與擴(kuò)展列表式導(dǎo)航
3Tab中間首要，兩邊路對稱抽屜擴(kuò)展的布局方式在這個應(yīng)用中非常完美役衡，又實用茵休，有種比翼雙飛的感覺。
首頁次導(dǎo)航：
次級導(dǎo)航也是采用tabber手蝎，也是3個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)，分別對應(yīng)3個次導(dǎo)航標(biāo)簽及塘。
熱門——2*3陳列館式導(dǎo)航【視頻縮略圖】
廣場——跳板式（磁貼）導(dǎo)航【靜態(tài)封面圖】莽使，點擊進(jìn)入某個頻道后呈現(xiàn)2*3陳列館。
好友——1*1幻燈片形式的陳列館導(dǎo)航【視頻實時預(yù)覽】
結(jié)語：
App導(dǎo)航的形式是不是多姿多彩啊笙僚，最后別忘了芳肌，Blink君寫本文是來總結(jié)的——點線面，形態(tài)合肋层，6個字幫你快速掌握App導(dǎo)航的設(shè)計亿笤！
不過要設(shè)計出牛逼的App，不能單純的堆疊導(dǎo)航栋猖，在設(shè)計導(dǎo)航之前首先要理清產(chǎn)品的業(yè)務(wù)邏輯净薛，了解公司的戰(zhàn)略與資源，才能搭出好的導(dǎo)航框架蒲拉。
原文由互聯(lián)網(wǎng)產(chǎn)品經(jīng)理@BlinkQ創(chuàng)作肃拜，轉(zhuǎn)載請注明出處，原文永久鏈接：http://www.iblinkq.com/sence/appnavigation.html
參考文獻(xiàn)
一切都是站在巨人的肩上雌团，本文Blink君也是參考了包含不且不限于以下文章燃领，引用了文字或者圖片：
《九種移動應(yīng)用導(dǎo)航設(shè)計總結(jié)》
《4種常見的APP導(dǎo)航設(shè)計方式，讓我們的APP高大上》
《5種實用的移動手機(jī)APP導(dǎo)航菜單設(shè)計方案》
《APP設(shè)計中用戶體驗比較好的“跳轉(zhuǎn)”效果匯總》
《Path for iOS的交互細(xì)節(jié)-原型庫》
本文由@BlinkQ 原創(chuàng)投稿
轉(zhuǎn)載請注明來源于產(chǎn)品100并附帶本文鏈接
產(chǎn)品100非常歡迎產(chǎn)品界的各路大神锦援、人神猛蔽、女神、男神灵寺、土豪曼库、屌絲來稿！
