起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識再談App導航設計
App導航，是應用的信息結構在用戶界面上的展現方式。
優秀的App導航設計，能夠充分運用“組織、隱藏、轉移、刪 除”交互設計4策略，在十分局限的屏幕窗口中完美的組織豐富的信息、展示產品的功能，并快速引導用戶使用產品功能。同時，導航設計也結合了產品信息架構、 交互設計、視覺設計，要想更好的設計產品，有必要進行系統的理解。
各種講移動App導航設計的文章也很多，至少有提到十多種不同的的App導航類型，與多種搭配方式。那么問題來了，這么多導航方式種類繁多、稱呼不一、變化多端，怎么快速的掌握呢？別擔心，看Blink君總分總講解，你也能快速掌握。
一，3乘3歸納
最基本的導航方式只有3種：標簽式、列表式、矩陣式（請看下圖）。這3種從形狀上可以抽象為：點線面。
每種導航可以有3種狀態：靜態、動靜結合、動態（請看下圖）。簡稱3態。靜態導航，顧名思義就是靜態的文字或圖標圖片組成的導航，最為常見；動靜結合導航，是在靜態的基礎上，增加圖標、字符等動態變化的內容；動態導航，則是直接動態抽取內容本身圖片或文字生成的導航。
幾乎沒有哪個應用只有單一層級的導航，通常是多種導航進行搭配，這些搭配方式，總結為3種：組合、層級、收放。簡稱3合（結 合、組合）。組合導航，就是在一個導航區域中集合多種不同的導航類型；層級導航，就是導航的嵌套，通常App都會有頂級導航、次級導航；收放導航，是指將 部分導航內容隱藏，用戶點做相應的操作（如按鈕）后滑出或彈出的導航。
因此，各種導航歸納為：形、態、合3種屬性，每種屬性3個子類，可以記作：點線面，形態合?！?個字，你已經能推演出絕大多數導航形式了。下面還是具體說說。
二，主流導航分別說
01 標簽系導航
- 摘要： 通常稱為標簽欄或者選項卡，位置在屏幕底部或者頂部，底部標簽欄是iOS原生導航控件（Tab bar）
- 優點：主流（淘寶、微信、支付寶）、符合習慣、ios原生控件，開發簡單
- 缺點：數量有限，一般不超過5個（不然需要結合其他方式，運用層級和收放）
網易云音樂，經典的底部4Tab
iOS原裝App Podcast，5Tab，頂部是Navigation bar，然后是3段式Segmented control（分段控件）
美拍，簡約的底部3Tab主導航（現在最新版是5Tab了，Blink覺得這版很經典），頂部是3Tab二級導航，中間內容區又是矩陣系導航
02 列表系導航
摘要： 最常見的主導航模式之一，又可分為分組列表、個性化列表、行內擴展式列表（這個一般用做次級導航）和增強性列表（是在簡單的列表菜單之上增加搜索、瀏覽或過濾之類的功能后形成的）
優點：由上至下查看符合習慣，列表菜單很適合用來顯示較長或擁有次級文字內容的標題，每行可以融入較多信息。
缺點：條目太多或分布不合理會導致用戶查找困難
印象筆記的ios版使用了列表式導航混合跳板式導航的設計，其中列表式導航中又使用了分組列表和擴展列表。
AppStore，列表式分類導航，每行的圖標是動態提取的
03 矩陣系導航
摘要：已矩陣組合成的導航，在不同的文章中可能被稱作：跳板（圖標卡片式）、磁貼式、陳列館式……一般用做主導航，常用的布局模式33（常說的九宮格布局）23、22和21網格。但也不一定要拘泥于網格，也可以按照不同的優先級順序，放大或者縮小網格，以突顯出內容的層次感。
優點：便于組合不同的信息類型（運營位、廣告位、內容塊、設置等）；靜態、動態結合可以展示出豐富的信息，同時保持視覺統一
缺點：各板塊之間關系獨立，視圖將完全跳轉，如需頻繁切換則不建議采用
美圖秀秀采用的就是2*3的跳板式（靜態圖標）導航模式,通過上下、分頁來突出優先級。
靜態圖標加上動態字符可以展示出豐富的信息（方便預覽）
陳列館式的設計通過在平面上顯示各個內容項來實現導航，主要用來顯示一些文章、菜譜、照片、產品等，可以布局成輪盤、網格或用幻燈片演示。
淘寶二手中的主導航采用了陳列館式導航，次導航采用的是抽屜式導航。
04 抽屜式導航（下拉式）
摘要： 屬于Android原生控件的導航方式，后在ios中也常見到。一般在Android中用做主導航，在ios中往往會搭配其他的主導航模式做次級導航使用。在不同的地方可能被稱為：擴展菜單、側邊導航、漢堡導航；
即是導航，又是一種跳轉方式（不彈出新頁面），抽屜打開后可以展現任何一種導航方式（結合列表式的偏多）。
不用時隱藏，要用時打開，可布置較多功能，優點如此，缺點亦如此
優點：隱藏時不占用界面空間、適合做次導航、不頻繁使用功能收納（隱藏）
缺點：不直觀、不適用于主導航、如遇頻繁操作的功能，用戶不斷開關抽屜體驗不好。
抽屜結合列表
抽屜結合矩陣
05 牛叉的創新式
Path的招牌設計，看似非常牛叉，實際也是形、態、合的演變。
閱后即焚私密社交應用Blink（碰巧與Blink君同名），設置、聯系人、群、添加聯系人全部是右邊的一列圓圈圖標（側面Tab），其中“設置”是抽屜式，點擊展開，聯系人頭像點擊后直接向其發送照片，太贊了。
三，綜合案例
這張是從Blink君做產品分析Axure中截圖出來的（2014年的，所以是老版本美拍），原型是帶動態效果的，所以圖中說“可點擊”，感興趣的可以私聊
主導航：
美拍的主導航采用Tab，標簽式，有3個Tab，非常簡潔。
中間Tab是最主要的“美拍”鍵，采用與LOGO相呼應的圖標。
左右兩邊的“更多”、“信息”Tab則雙雙采用抽屜式拓展導航，將不重要的信息和菜單隱藏了起來?！案唷表撁嬷杏质遣捎玫牧斜砼c擴展列表式導航
3Tab中間首要，兩邊路對稱抽屜擴展的布局方式在這個應用中非常完美，又實用，有種比翼雙飛的感覺。
首頁次導航：
次級導航也是采用tabber，也是3個Tab，字標。
其當前選中的Tab紫紅色下劃線的方式在該應用其他文字標簽導航位置均為同樣設置，充滿一致性。
內容區：
上面已經出現了標簽式導航、列表式導航、抽屜式導航（抽屜也屬于是一種跳轉方式）。作用以視頻為主的應用，美拍在主內容區更向我們展現了方塊系導航的3種形態，分別對應3個次導航標簽。
- 熱門——2*3陳列館式導航【視頻縮略圖】
- 廣場——跳板式（磁貼）導航【靜態封面圖】，點擊進入某個頻道后呈現2*3陳列館。
- 好友——1*1幻燈片形式的陳列館導航【視頻實時預覽】
結語：
App導航的形式是不是多姿多彩啊，最后別忘了，Blink君寫本文是來總結的——點線面，形態合，6個字幫你快速掌握App導航的設計！
不過要設計出牛逼的App，不能單純的堆疊導航，在設計導航之前首先要理清產品的業務邏輯，了解公司的戰略與資源，才能搭出好的導航框架。
原文作者：@BlinkQ
感謝，漲姿勢了
謝謝
不錯