如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中，?請(qǐng)點(diǎn)這里 

導(dǎo)讀：最近在看一些產(chǎn)品文章時(shí)，總會(huì)看到一些詞匯（例如：“tabbar”、“抽屜菜單”、“宮格菜單”），開(kāi)始也不是很能理解，但是結(jié)合上下文還是能猜出一二的。之后去搜了一下相關(guān)資料，得知這原來(lái)屬于App導(dǎo)航設(shè)計(jì)的范疇，所以就簡(jiǎn)單總結(jié)了一下常見(jiàn)的App導(dǎo)航設(shè)計(jì)，跟大家共享。

 

1.Tab導(dǎo)航

又稱(chēng)為“標(biāo)簽式導(dǎo)航”，分上、下兩種。

舉例：

左：多看閱讀   右：網(wǎng)易云閱讀

適用場(chǎng)景：
（1）上面的tab導(dǎo)航，一般適用于對(duì)當(dāng)前頁(yè)面的分類(lèi)查看，或者改變當(dāng)前視圖。可以滑動(dòng)，所以數(shù)量可多可少；
（2）下面的tab導(dǎo)航，一般是用來(lái)展示App的核心功能，可以迅速切換，適合用于需要頻繁切換的功能。受限于屏幕寬度，數(shù)量一般控制在5個(gè)以?xún)?nèi)，4個(gè)為最佳，（以4個(gè)舉例）其中第2、3個(gè)最好操作。當(dāng)有更多操作的時(shí)候，可以將最后一項(xiàng)設(shè)置為“更多”，來(lái)將一些次要功能進(jìn)行隱藏。

優(yōu)勢(shì)：
1、讓用戶(hù)快速了解app的核心功能，且切換頁(yè)面方便，簡(jiǎn)單，用戶(hù)不易“迷路”
2、所有入口都可以看見(jiàn)，容易尋找

劣勢(shì)：
1、占據(jù)一定屏幕高度，如果是下方tab,瀏覽時(shí)會(huì)阻擋內(nèi)容
2、可展示功能數(shù)量少，最多只有5個(gè)

2.抽屜式導(dǎo)航

舉例：

左：知乎日?qǐng)?bào)    右：36Kr

適用場(chǎng)景：
將并不是太常用或者切換不頻繁的功能隱藏在主界面之后

優(yōu)勢(shì)：
（1）導(dǎo)航界面隱藏在主界面之后，有助于用戶(hù)集中注意力，營(yíng)造沉浸式體驗(yàn)
（2）可容納多個(gè)條目，可擴(kuò)展性強(qiáng)

劣勢(shì)：
（1）用戶(hù)不容易發(fā)現(xiàn)，使用戶(hù)認(rèn)知成本增加
（2）用戶(hù)容易“迷路”

3.宮格導(dǎo)航

舉例：

左：美顏相機(jī)    右：美圖秀秀

適用場(chǎng)景：
適合用于獨(dú)立、無(wú)功能交叉、不頻繁切換的部分，多用于二級(jí)菜單

優(yōu)勢(shì)：
分類(lèi)清晰、入口獨(dú)立、風(fēng)格簡(jiǎn)約

劣勢(shì)：
并不會(huì)展示實(shí)質(zhì)內(nèi)容，不適合需要頻繁切換的功能

4.列表式導(dǎo)航

舉例：

糗事百科

適用場(chǎng)景：
通常位于二級(jí)頁(yè)面，不展示實(shí)質(zhì)內(nèi)容，作為內(nèi)容列表的一種圖形化方式展現(xiàn)

優(yōu)勢(shì)：
結(jié)構(gòu)清晰、簡(jiǎn)單，能夠讓用戶(hù)快速定位想要找到的內(nèi)容

劣勢(shì)：
不展示實(shí)質(zhì)內(nèi)容，需要用戶(hù)點(diǎn)擊后才能知道具體內(nèi)容，增加了用戶(hù)的操作成本

5.舵式導(dǎo)航

也稱(chēng)“點(diǎn)聚式”導(dǎo)航，path首創(chuàng)。

舉例：

新浪微博

適用場(chǎng)景：
適用于非常重要且用戶(hù)操作頻繁適用的功能點(diǎn)，將這些功能點(diǎn)匯聚，放在底部tab的中間或者右邊（根據(jù)app的具體功能確定）

優(yōu)勢(shì)：
突出的表現(xiàn)入口，能夠吸引用戶(hù)注意力，使得頻繁使用的入口容易被用戶(hù)接觸到

劣勢(shì)：
入口數(shù)量有限、可擴(kuò)展性差

6.輪播導(dǎo)航

舉例：

墨跡天氣：當(dāng)添加了多個(gè)城市，查看城市天氣時(shí)，為輪播式導(dǎo)航

適用場(chǎng)景：
常用于查看圖片類(lèi)

優(yōu)勢(shì)：
（1）操作方便，只需手指左右滑動(dòng)即可
（2）內(nèi)容突出展示，增加了曝光率

劣勢(shì)：
只能查看相鄰卡片展示的內(nèi)容，并不能跳躍性地進(jìn)行選擇

7.組合導(dǎo)航

舉例：

QQ

適用場(chǎng)景：
當(dāng)前很多app都使用了組合式導(dǎo)航。當(dāng)一種導(dǎo)航方式已經(jīng)不能滿(mǎn)足app的復(fù)雜功能時(shí)，組合導(dǎo)航就能很好的安排信息的排列方式，以最優(yōu)的方式來(lái)引導(dǎo)用戶(hù)使用app

優(yōu)勢(shì)：
可以根據(jù)app的功能需要，進(jìn)行多種導(dǎo)航方式的組合，來(lái)達(dá)到最優(yōu)的信息展現(xiàn)

劣勢(shì)：
app變得厚重，入口數(shù)量較多時(shí)，用戶(hù)容易眼花繚亂，給用戶(hù)造成心理壓力

小結(jié)：
不同的導(dǎo)航方式都有各自的優(yōu)缺點(diǎn)，導(dǎo)航方式的選擇要依據(jù)自己app的信息架構(gòu)和具體功能而定，最適合用戶(hù)的才是最好的！