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