2016-11-18 ui設(shè)計(jì)分享達(dá)人
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中，?請點(diǎn)這里
導(dǎo)讀：最近在看一些產(chǎn)品文章時，總會看到一些詞匯（例如：“tabbar”、“抽屜菜單”、“宮格菜單”），開始也不是很能理解，但是結(jié)合上下文還是能猜出一二的。之后去搜了一下相關(guān)資料，得知這原來屬于App導(dǎo)航設(shè)計(jì)的范疇，所以就簡單總結(jié)了一下常見的App導(dǎo)航設(shè)計(jì)，跟大家共享。
1.Tab導(dǎo)航
又稱為“標(biāo)簽式導(dǎo)航”，分上、下兩種。
舉例：
左：多看閱讀 右：網(wǎng)易云閱讀
適用場景：
（1）上面的tab導(dǎo)航，一般適用于對當(dāng)前頁面的分類查看，或者改變當(dāng)前視圖。可以滑動，所以數(shù)量可多可少；
（2）下面的tab導(dǎo)航，一般是用來展示App的核心功能，可以迅速切換，適合用于需要頻繁切換的功能。受限于屏幕寬度，數(shù)量一般控制在5個以內(nèi)，4個為最佳，（以4個舉例）其中第2、3個最好操作。當(dāng)有更多操作的時候，可以將最后一項(xiàng)設(shè)置為“更多”，來將一些次要功能進(jìn)行隱藏。
優(yōu)勢：
1、讓用戶快速了解app的核心功能，且切換頁面方便，簡單，用戶不易“迷路”
2、所有入口都可以看見，容易尋找
劣勢：
1、占據(jù)一定屏幕高度，如果是下方tab,瀏覽時會阻擋內(nèi)容
2、可展示功能數(shù)量少，最多只有5個
2.抽屜式導(dǎo)航
舉例：
左：知乎日報 右：36Kr
適用場景：
將并不是太常用或者切換不頻繁的功能隱藏在主界面之后
優(yōu)勢：
（1）導(dǎo)航界面隱藏在主界面之后，有助于用戶集中注意力，營造沉浸式體驗(yàn)
（2）可容納多個條目，可擴(kuò)展性強(qiáng)
劣勢：
（1）用戶不容易發(fā)現(xiàn)，使用戶認(rèn)知成本增加
（2）用戶容易“迷路”
3.宮格導(dǎo)航
舉例：
左：美顏相機(jī) 右：美圖秀秀
適用場景：
適合用于獨(dú)立、無功能交叉、不頻繁切換的部分，多用于二級菜單
優(yōu)勢：
分類清晰、入口獨(dú)立、風(fēng)格簡約
劣勢：
并不會展示實(shí)質(zhì)內(nèi)容，不適合需要頻繁切換的功能
4.列表式導(dǎo)航
舉例：
糗事百科
適用場景：
通常位于二級頁面，不展示實(shí)質(zhì)內(nèi)容，作為內(nèi)容列表的一種圖形化方式展現(xiàn)
優(yōu)勢：
結(jié)構(gòu)清晰、簡單，能夠讓用戶快速定位想要找到的內(nèi)容
劣勢：
不展示實(shí)質(zhì)內(nèi)容，需要用戶點(diǎn)擊后才能知道具體內(nèi)容，增加了用戶的操作成本
5.舵式導(dǎo)航
也稱“點(diǎn)聚式”導(dǎo)航，path首創(chuàng)。
舉例：
新浪微博
適用場景：
適用于非常重要且用戶操作頻繁適用的功能點(diǎn)，將這些功能點(diǎn)匯聚，放在底部tab的中間或者右邊（根據(jù)app的具體功能確定）
優(yōu)勢：
突出的表現(xiàn)入口，能夠吸引用戶注意力，使得頻繁使用的入口容易被用戶接觸到
劣勢：
入口數(shù)量有限、可擴(kuò)展性差
6.輪播導(dǎo)航
舉例：
墨跡天氣：當(dāng)添加了多個城市，查看城市天氣時，為輪播式導(dǎo)航
適用場景：
常用于查看圖片類
優(yōu)勢：
（1）操作方便，只需手指左右滑動即可
（2）內(nèi)容突出展示，增加了曝光率
劣勢：
只能查看相鄰卡片展示的內(nèi)容，并不能跳躍性地進(jìn)行選擇
7.組合導(dǎo)航
舉例：
適用場景：
當(dāng)前很多app都使用了組合式導(dǎo)航。當(dāng)一種導(dǎo)航方式已經(jīng)不能滿足app的復(fù)雜功能時，組合導(dǎo)航就能很好的安排信息的排列方式，以最優(yōu)的方式來引導(dǎo)用戶使用app
優(yōu)勢：
可以根據(jù)app的功能需要，進(jìn)行多種導(dǎo)航方式的組合，來達(dá)到最優(yōu)的信息展現(xiàn)
劣勢：
app變得厚重，入口數(shù)量較多時，用戶容易眼花繚亂，給用戶造成心理壓力
小結(jié)：
不同的導(dǎo)航方式都有各自的優(yōu)缺點(diǎn)，導(dǎo)航方式的選擇要依據(jù)自己app的信息架構(gòu)和具體功能而定，最適合用戶的才是最好的！
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.gyxygd.cn
