超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

App各類導(dǎo)航設(shè)計適用場景及優(yōu)劣勢總結(jié)

2016-11-18    ui設(shè)計分享達(dá)人

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中,?請點這里 

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

 

1.Tab導(dǎo)航

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

舉例:

01.webp.jpg

左:多看閱讀   右:網(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è)置為“更多”,來將一些次要功能進(jìn)行隱藏。

優(yōu)勢:
1、讓用戶快速了解app的核心功能,且切換頁面方便,簡單,用戶不易“迷路”
2、所有入口都可以看見,容易尋找

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

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

舉例:

02.webp.jpg

左:知乎日報    右:36Kr

適用場景:
將并不是太常用或者切換不頻繁的功能隱藏在主界面之后

優(yōu)勢:
(1)導(dǎo)航界面隱藏在主界面之后,有助于用戶集中注意力,營造沉浸式體驗
(2)可容納多個條目,可擴展性強

劣勢:
(1)用戶不容易發(fā)現(xiàn),使用戶認(rèn)知成本增加
(2)用戶容易“迷路”

3.宮格導(dǎo)航

舉例:

03.webp.jpg

左:美顏相機    右:美圖秀秀

適用場景:
適合用于獨立、無功能交叉、不頻繁切換的部分,多用于二級菜單

優(yōu)勢:
分類清晰、入口獨立、風(fēng)格簡約

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

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

舉例:

04.webp.jpg

糗事百科

適用場景:
通常位于二級頁面,不展示實質(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)。

舉例:

05.webp.jpg

新浪微博

適用場景:
適用于非常重要且用戶操作頻繁適用的功能點,將這些功能點匯聚,放在底部tab的中間或者右邊(根據(jù)app的具體功能確定)

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

劣勢:
入口數(shù)量有限、可擴展性差

6.輪播導(dǎo)航

舉例:

06.webp.jpg

墨跡天氣:當(dāng)添加了多個城市,查看城市天氣時,為輪播式導(dǎo)航

適用場景:
常用于查看圖片類

優(yōu)勢:
(1)操作方便,只需手指左右滑動即可
(2)內(nèi)容突出展示,增加了曝光率

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

7.組合導(dǎo)航

舉例:

07.webp.jpg

QQ

適用場景:
當(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)缺點,導(dǎo)航方式的選擇要依據(jù)自己app的信息架構(gòu)和具體功能而定,最適合用戶的才是最好的!

 

分享本文至:

日歷

鏈接

個人資料

存檔