2023年APP設計模式之-導航設計

APP設計模式之——導航設計一、一級導航/主導航

1.標簽式導航

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

1）底部導航

采納文字加圖標的方式呈現(xiàn)。一般有3~5個標簽，適合在相關(guān)的幾類信息中間頻繁地切換使用。這類信息優(yōu)先級較高、用戶使用頻繁，彼此之間相互獨立，通過標簽式導航的引導，用戶可以快速地實現(xiàn)頁面之間的切換且不會迷失方向，簡潔而高效。

它的缺點是會占用肯定高度的空間，假如用戶是小屏幕手機，則視覺體驗不太好。

2）頂部導航

當內(nèi)容分類比較多，用戶對不同內(nèi)容的打開率相差不是很大，需要快速切換/調(diào)出的時候，常常會采納頂部導航設計模式，常見于工具類APP中，如WaveAnalytics、滴滴打車：

3）頂部、底部雙Tab導航

標簽式導航除了設在頂部和底部，另外有些內(nèi)容比較多的產(chǎn)品會采納頂部、底部混合使用標簽式導航，如簡書、網(wǎng)易云閱讀：

2.抽屜式導航

抽屜導航指的是一些功能菜單按鈕隱蔽在當前頁面后，點擊入口或側(cè)滑即可像拉抽屜一樣拉出菜單。

這種導航設計比較適合于那么不需要頻繁切換的次要功能，例如對設置、關(guān)于、會員、皮膚設置等功能的隱蔽。下圖分別是WaveAnalytics、GadgetsNews、MyRolls和Perisfind：

抽屜式導航的優(yōu)點在于節(jié)約頁面展現(xiàn)空間，使主頁面更加簡潔美觀，讓用戶將更多的留意力聚焦到當前頁面。

缺點在于次功能入口比較隱藏，用戶不簡單發(fā)覺；使用次功能需要二次點擊，增加用戶使用成本。

3.桌面式導航

桌面式導航類似于操作系統(tǒng)或啟動掌握面板，其特色是主頁由多個按鈕組成。均衡布局時，按鈕通常大小全都，以3*3、2*3、2*2和1*2等形式排布于桌面。點擊按鈕時，跳轉(zhuǎn)至其他內(nèi)部子系統(tǒng)/子模塊。

如圖，Strides和Finance采納了基于圓形按鈕的均衡布局：

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

注：當圓角矩形弧度越來越小，甚至消逝不見成為正方形的時候，往往用方形格子隔開各個按鈕，使得視覺效果最好，這種模式見于下一節(jié)的“宮格式導航”中。

市面上還存在著一些極少數(shù)應用，它們內(nèi)部生態(tài)繁雜，供應（自己的或者來自第三方服務）眼花繚亂、不勝枚舉的服務項目，有些服務項目單獨拎出來，做成一款應用，都可以匹敵一家小型互聯(lián)網(wǎng)公司，甚至是中型互聯(lián)網(wǎng)公司。

但是出于業(yè)務整合、平臺搭建、體系構(gòu)建、服務扁平化，它們會被塞到一個“殼子”里，形成“超級服務平臺類”APP，比如阿里系的支付寶和千牛工作臺：

支付寶首頁的服務項目，可以在“全部”頁面中進行共性化配置；千牛工作臺首頁的三方服務，可以在“設置”頁面中進行共性化配置。兩個APP都支持用戶依據(jù)自己實際需求和使用頻度，優(yōu)化服務項目的顯示挨次，進行入口優(yōu)化。

這種“超級服務平臺類”APP，目前我僅在阿里系的產(chǎn)品中看到過，其特點是：

高頻/超高頻使用，用戶粘性極高，應用處于市場壟斷地位，幾乎無可替代產(chǎn)品（生態(tài)浩大帶來的優(yōu)勢）；應用服務種類多且扁平化（使得并列式的桌面布局模式成為必選項）；可以當做企業(yè)移動后臺來使用（支付寶的服務包括衣食住行，可認為是企業(yè)個人），我稱之為“行走的ERP”；商業(yè)氛圍深厚。最佳實踐：菜單無主次之分，每個菜單所占空間大小全都。菜單有主次之分，主要的占空間較大，其余的占空間較小。在使用桌面式導航布局時，要充分考慮到給客戶供應共性化和定制化功能。

4.宮格式導航

宮格導航是將主要入口全部聚合在主頁面中（因其布局比較像傳統(tǒng)PC桌面上的圖標排列，又被稱為“桌面式導航”），每個宮格相互獨立，它們的信息間也沒有任何交集，無法跳轉(zhuǎn)互通。

由于這種特質(zhì)，宮格式導航被廣泛應用于各平臺系統(tǒng)的中心頁面。這樣的組織方式無法讓用戶在第一時間看到內(nèi)容，選擇壓力較大，因此現(xiàn)在采納這種導航的APP已經(jīng)越來越少，往往用在二級頁作為內(nèi)容列表的一種圖形化形式呈現(xiàn)，或是作為一系列工具入口的聚合。下圖應用分別是釘釘和epocrates：

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

5.舵式導航

在有些狀況下，簡潔的底部tab式導航難以滿意更多的操作功能，這個時候我們就需要一些擴展形式來滿意需求，新浪微博、lofter、閑魚底部采納的就是舵式導航，舵式導航（之前看到別人這么叫所以我也就這么稱呼吧）。

跟標簽式導航相比，區(qū)分在于舵式導航把類似生產(chǎn)內(nèi)容的主功能按鈕放在中間，標簽更加突出醒目，同時該主功能標簽做了功能擴展，也因此給設計增加了一些共性化的亮點。如新浪微博和育學園：

6.隱喻式導航

這種模式的特點是用一個頁面來體現(xiàn)整個應用程序。常用于嬉戲app，如AirSupremacy和2022:Mycountry。

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

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

二、二級導航

二級導航用于在頁面及模塊中進行導航，因此這種應用通常來講至少有3層信息結(jié)構(gòu)，最常見的就是國內(nèi)絕大多數(shù)APP都有的“我的”功能菜單。

1.列表式導航

列表式導航作為信息組織框架，是我們在產(chǎn)品設計中必不行少的一個信息承載模式。

列表導航與宮格導航類似，常用于二級頁面，不會默認展現(xiàn)任何實質(zhì)內(nèi)容，所以通常app不會在首頁使用它。這種導航結(jié)構(gòu)清楚，易于用戶理解，能夠關(guān)心用戶快速的定位去到對應的頁面。下圖應用分別是微信和Strides：

列表菜單導航的每個列表均指向相應的功能/內(nèi)容選項，它有很多衍生形態(tài)，包括共性化菜單列表、分組菜單列表和增加型菜單列表。增加型菜單列表是指在簡潔列表的基礎上，帶有額外的搜尋、掃瞄及過濾功能。

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

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

2.選項卡式

底部選項卡現(xiàn)在幾乎成了IOS和Android兩大系統(tǒng)（黑莓和webOS也比較廣泛，但由于已經(jīng)不是主流系統(tǒng)，因此暫不爭論）陣營中，絕大多數(shù)應用的標配。

也有特別多的應用，將Tab標簽設置再了導航欄下，即頂部導航，有點類似于傳統(tǒng)網(wǎng)站導航，如360云盤、扇貝單詞、豆瓣和Facebook等。

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

3.圖庫式

圖庫式界面被分割成用于導航的各個內(nèi)容區(qū)塊。內(nèi)容區(qū)通常載有單獨的文章、標題、照片、產(chǎn)品和其他能夠放置在內(nèi)容區(qū)、網(wǎng)格或幻燈片里展現(xiàn)的內(nèi)容。如TED、BBCNEWS、Bilibili、搜狐視頻等。

有時候假如內(nèi)容區(qū)是以分組形式布局，分組的內(nèi)容應設計得簡單被用戶掃瞄到，如使用側(cè)Tab形式（也稱抽屜式導航）去管理分組內(nèi)容，讓用戶能夠在Tab中切換，查看不同分組。

最佳實踐：圖庫式界面的設計模式適用于用戶想要掃瞄的、常常更新的內(nèi)容。

4.頁面旋轉(zhuǎn)式

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

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

最佳實踐：

頁面旋轉(zhuǎn)導航適用于頁面數(shù)量較少的狀況；使用指示器反應頁面數(shù)量和當前頁面；左右滑動手勢是最常見的旋轉(zhuǎn)導航手勢。5.圖片旋轉(zhuǎn)式

圖片旋轉(zhuǎn)式的常見形態(tài)，是類似于2D旋轉(zhuǎn)木馬形