APP設(shè)計(jì)模式：淺析導(dǎo)航欄設(shè)計(jì)

　

文章總結(jié)了APP種常見的幾類導(dǎo)航欄及特點(diǎn)，希望給大家?guī)硇﹩l(fā)。

1 一級(jí)導(dǎo)航/主導(dǎo)航1.1 標(biāo)簽式導(dǎo)航

標(biāo)簽式導(dǎo)航又叫Tab式導(dǎo)航，是目前移動(dòng)端市場(chǎng)上最為廣泛的導(dǎo)航設(shè)計(jì)。標(biāo)簽導(dǎo)航通常分為底部，頂部，頂、底混合使用這三種模式。

1.1.1 底部導(dǎo)航

采用文字加圖標(biāo)的方式展現(xiàn)。一般有3~5個(gè)標(biāo)簽，適合在相關(guān)的幾類信息中間頻繁的切換使用。這類信息優(yōu)先級(jí)較高、用戶使用頻繁，相互之間彼此獨(dú)立，通過標(biāo)簽式導(dǎo)航的引導(dǎo)，用戶可以迅速的實(shí)現(xiàn)頁面之間的切換且不會(huì)迷失標(biāo)的目的，簡(jiǎn)單而高效。它的缺點(diǎn)是會(huì)占用必然高度的空間，如果用戶是小屏幕手機(jī)，則視覺體驗(yàn)不太好。

下圖應(yīng)用別離為微信、Facebook：

1.1.2頂部導(dǎo)航

當(dāng)內(nèi)容分類比較多，用戶對(duì)差別內(nèi)容的打開率相差不是很大，需要快速切換/調(diào)出的時(shí)候，經(jīng)常會(huì)采用頂部導(dǎo)航設(shè)計(jì)模式，常見于工具類APP中，如Wave Analytics、滴滴打車：

1.1.3 頂部、底部雙Tab導(dǎo)航

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

1.2 抽屜式導(dǎo)航

抽屜導(dǎo)航指的是一些功能菜單按鈕隱藏在當(dāng)前頁面后，點(diǎn)擊入口或側(cè)滑即可像拉抽屜一樣拉出菜單。這種導(dǎo)航設(shè)計(jì)比較適合于那么不需要頻繁切換的次要功能，例如對(duì)設(shè)置、關(guān)于、會(huì)員、皮膚設(shè)置等功能的隱藏。下圖別離是Wave Analytics、Gadgets News、My Rolls和Perisfind：

抽屜式導(dǎo)航的優(yōu)點(diǎn)在于節(jié)省頁面展示空間，使主頁面更加簡(jiǎn)潔美不雅觀，讓用戶將更多的注意力聚焦到當(dāng)前頁面。

缺點(diǎn)在于次功能入口比較隱蔽，用戶不容易發(fā)現(xiàn)；使用次功能需要二次點(diǎn)擊，增加用戶使用成本。

1.3 桌面式導(dǎo)航

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

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

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

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

市面上還存在著一些極少數(shù)應(yīng)用，它們內(nèi)部生態(tài)繁雜，提供（本身的或者來自第三方辦事）眼花繚亂、不勝枚舉的辦事項(xiàng)目，有些辦事項(xiàng)目單獨(dú)拎出來，做成一款應(yīng)用，都可以匹敵一家小型互聯(lián)網(wǎng)公司，甚至是中型互聯(lián)網(wǎng)公司，但是出于業(yè)務(wù)整合、平臺(tái)搭建、體系構(gòu)建、辦事扁平化，它們會(huì)被塞到一個(gè)“殼子”里，形成“超級(jí)辦事平臺(tái)類”APP，好比阿里系的支付寶和千牛工作臺(tái)：

支付寶首頁的辦事項(xiàng)目，可以在“全部”頁面中進(jìn)行個(gè)性化配置；千牛工作臺(tái)首頁的三方辦事，可以在“設(shè)置”頁面中進(jìn)行個(gè)性化配置。兩個(gè)APP都支持用戶按照本身實(shí)際需求和使用頻度，優(yōu)化辦事項(xiàng)目的顯示挨次，進(jìn)行入口優(yōu)化。

這種“超級(jí)辦事平臺(tái)類”APP，目前我僅在阿里系的產(chǎn)品中看到過，其特點(diǎn)是：

高頻/超高頻使用，用戶粘性極高，應(yīng)用處于市場(chǎng)壟斷地位，幾乎無可替代產(chǎn)品（生態(tài)龐大帶來的優(yōu)勢(shì)）；應(yīng)用辦事種類多且扁平化（使得并列式的桌面布局模式成為必選項(xiàng)）；可以當(dāng)做企業(yè)移動(dòng)后臺(tái)來使用（支付寶的辦事包孕衣食住行，可認(rèn)為是企業(yè)個(gè)人），我稱之為“行走的ERP”；商業(yè)氛圍濃厚。

最佳實(shí)踐：菜單無主次之分，每個(gè)菜單所占空間大小一致。菜單有主次之分，主要的占空間較大，其余的占空間較小。在使用桌面式導(dǎo)航布局時(shí)，要充分考慮到給客戶提供個(gè)性化和定制化功能。

1.4 宮格式導(dǎo)航

標(biāo)簽：烏魯木齊 鹽城 九江 東營 林芝