APP設計模式之——導航設計

標籤式導航又叫Tab式導航，是目前移動端市場上最為廣泛的導航設計。標籤導航通常分為底部，頂部，頂、底混合使用這三種模式。

1.1.1 底部導航

採用文字加圖標的方式展現。一般有3~5個標籤，適合在相關的幾類信息中間頻繁的切換使用。這類信息優先順序較高、用戶使用頻繁，彼此之間相互獨立，通過標籤式導航的引導，用戶可以迅速的實現頁面之間的切換且不會迷失方向，簡單而高效。它的缺點是會佔用一定高度的空間，如果用戶是小屏幕手機，則視覺體驗不太好。

下圖應用分別為微信、Facebook：

1.1.2 頂部導航

當內容分類比較多，用戶對不同內容的打開率相差不是很大，需要快速切換/調出的時候，經常會採用頂部導航設計模式，常見於工具類APP中，如Wave Analytics、滴滴打車：

1.1.3 頂部、底部雙Tab導航

標籤式導航除了設在頂部和底部，另外有些內容比較多的產品會採用頂部、底部混合使用標籤式導航，如簡書、網易雲閱讀：

抽屜導航指的是一些功能菜單按鈕隱藏在當前頁面後，點擊入口或側滑即可像拉抽屜一樣拉出菜單。這種導航設計比較適合於那麼不需要頻繁切換的次要功能，例如對設置、關於、會員、皮膚設置等功能的隱藏。下圖分別是Wave Analytics、Gadgets News、My Rolls和Perisfind：

抽屜式導航的優點在於節省頁面展示空間，使主頁面更加簡潔美觀，讓用戶將更多的注意力聚焦到當前頁面。

缺點在於次功能入口比較隱蔽，用戶不容易發現；使用次功能需要二次點擊，增加用戶使用成本。

1.3 桌面式導航

桌面式導航類似於操作系統或啟動控制面板，其特色是主頁由多個按鈕組成。均衡布局時，按鈕通常大小一致，以3*3、2*3、2*2和1*2等形式排佈於桌面。點擊按鈕時，跳轉至其他內部子系統/子模塊。

如圖，Strides和Finance採用了基於圓形按鈕的均衡布局：

而360和日語五十音圖則採用了基於圓角矩形按鈕的均衡布局：

註：當圓角矩形弧度越來越小，甚至消失不見成為正方形的時候，往往用方形格子隔開各個按鈕，使得視覺效果最好，這種模式見於下一節的「宮格式導航」中。

市面上還存在著一些極少數應用，它們內部生態繁雜，提供（自己的或者來自第三方服務）眼花繚亂、不勝枚舉的服務項目，有些服務項目單獨拎出來，做成一款應用，都可以匹敵一家小型互聯網公司，甚至是中型互聯網公司，但是出於業務整合、平台搭建、體系構建、服務扁平化，它們會被塞到一個「殼子」里，形成「超級服務平台類」APP，比如阿里系的支付寶和千牛工作台：

支付寶首頁的服務項目，可以在「全部」頁面中進行個性化配置；千牛工作台首頁的三方服務，可以在「設置」頁面中進行個性化配置。兩個APP都支持用戶根據自己實際需求和使用頻度，優化服務項目的顯示順序，進行入口優化。

這種「超級服務平台類」APP，目前我僅在阿里系的產品中看到過，其特點是：①高頻/超高頻使用，用戶粘性極高，應用處於市場壟斷地位，幾乎無可替代產品（生態龐大帶來的優勢）；②應用服務種類多且扁平化（使得並列式的桌面布局模式成為必選項）；③可以當做企業移動後台來使用（支付寶的服務包括衣食住行，可認為是企業個人），我稱之為「行走的ERP」；④商業氛圍濃厚。

最佳實踐：菜單無主次之分，每個菜單所佔空間大小一致。菜單有主次之分，主要的占空間較大，其餘的占空間較小。在使用桌面式導航布局時，要充分考慮到給客戶提供個性化和定製化功能。

1.4 宮格式導航

宮格導航是將主要入口全部聚合在主頁面中（因其布局比較像傳統PC桌面上的圖標排列，又被稱為「桌面式導航」），每個宮格相互獨立，它們的信息間也沒有任何交集，無法跳轉互通。因為這種特質，宮格式導航被廣泛應用於各平台系統的中心頁面。這樣的組織方式無法讓用戶在第一時間看到內容，選擇壓力較大，因此現在採用這種導航的APP已經越來越少，往往用在二級頁作為內容列表的一種圖形化形式呈現，或是作為一系列工具入口的聚合。下圖應用分別是釘釘和epocrates：

作為二級導航的宮格式導航：

1.5 舵式導航

在有些情況下，簡單的底部tab式導航難以滿足更多的操作功能，這個時候我們就需要一些擴展形式來滿足需求 ，新浪微博、lofter、閑魚底部採用的就是舵式導航，舵式導航（之前看到別人這麼叫所以我也就這麼稱呼吧）跟標籤式導航相比，區別在於舵式導航把類似生產內容的主功能按鈕放在中間，標籤更加突出醒目，同時該主功能標籤做了功能擴展，也因此給設計增加了一些個性化的亮點。如新浪微博和育學園：

1.6 隱喻式導航

這種模式的特點是用一個頁面來體現整個應用程序。常用於遊戲app，如Air Supremacy和2020:My country。

此外，在分類物品（如各類筆記、書籍、酒品）應用，和其他單一功能應用中也能經常看到隱喻式Tab。如DAKA、石墨文檔、拼圖醬和Moment：

t最佳實踐：使用隱喻式要慎重，一個執行起來不明確的隱喻，反而會起到反作用。

2 二級導航

二級導航用於在頁面及模塊中進行導航，因此這種應用通常來講至少有3層信息結構，最常見的就是國內絕大多數APP都有的「我的」功能菜單。

2.1 列表式導航

列表式導航作為信息組織框架，是我們在產品設計中必不可少的一個信息承載模式。列表導航與宮格導航類似，常用於二級頁面，不會默認展示任何實質內容，所以通常app不會在首頁使用它。這種導航結構清晰，易於用戶理解，能夠幫助用戶快速的定位去到對應的頁面。下圖應用分別是微信和Strides：

列表菜單導航的每個列表均指向相應的功能/內容選項，它有許多衍生形態，包括個性化菜單列表、分組菜單列表和增強型菜單列表。增強型菜單列表是指在簡單列表的基礎上，帶有額外的搜索、瀏覽及過濾功能。

下圖應用分別是：QQ、有道雲筆記、Retrica和Strides：

最佳實踐：列表菜單導航適合長標題或者有副標題說明，使用類表菜單導航應該提供一個從子頁面返回類表頁面的方式，通常在標題欄添加一個帶有菜單字樣的按鈕作為返回按鈕。

2.2 選項卡式

底部選項卡現在幾乎成了IOS和Android兩大系統（黑莓和webOS也比較廣泛，但因為已經不是主流系統，因此暫不討論）陣營中，絕大多數應用的標配。如Facebook、Twitter、微信和新浪微博：

也有非常多的應用，將Tab標籤設置再了導航欄下，即頂部導航，有點類似於傳統網站導航，如360雲盤、扇貝單詞、豆瓣和Facebook等。

最佳實踐：使用選項卡導航要注意視覺上對已選擇和未選擇的選項進行有效區分。

2.3 圖庫式

圖庫式界面被分割成用於導航的各個內容區塊。內容區通常載有單獨的文章、標題、照片、產品和其他能夠放置在內容區、網格或幻燈片里展示的內容。如TED、BBC NEWS、Bilibili、搜狐視頻等。

有時候如果內容區是以分組形式布局，分組的內容應設計得容易被用戶瀏覽到，如使用側Tab形式（也稱抽屜式導航）去管理分組內容，讓用戶能夠在Tab中切換，查看不同分組，下圖應用分別是My Rolls和Perisfind：

最佳實踐：圖庫式界面的設計模式適用於用戶想要瀏覽的、經常更新的內容。

2.4 頁面旋轉式

頁面旋轉常見模式是使用左右滑動手勢在頁面間快速切換，用戶滑動時將顯示下一個頁面。頁面指示器（IOS系統下面的小點）顯示一共有多少頁可供切換。下圖應用分別是tapas和ConnectID：

頁面旋轉導航模式有一定的局限性，當頁面超過8個時，要考慮使用列表導航。

最佳實踐：

①頁面旋轉導航適用於頁面數量較少的情況；

②使用指示器反應頁面數量和當前頁面；

③左右滑動手勢是最常見的旋轉導航手勢。

2.5 圖片旋轉式

圖片旋轉式的常見形態，是類似於2D旋轉木馬形式，圖片可以左右滑動，且沿任意方向一直滑動可重新回到初始圖片處。下圖分別來自應用TED、BBC NEWS、IMOB：

3 其他類型

3.1 儀錶盤式

儀錶盤匯總展示了一些關鍵指標。進入每一種度量方式後，都可以了解更多額外信息。這種主導航模式常用於金融應用程序、分析工具、銷售和營銷應用程序，如友盟統計：

最佳實踐：儀錶盤只需要載入被研究確認過的關鍵數據即可，不需要過多內容。

待續...