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

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

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

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

 

1.Tab導航

又稱為“標簽式導航”,分上、下兩種。

舉例:

01.webp.jpg

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

適用場景:
(1)上面的tab導航,一般適用于對當前頁面的分類查看,或者改變當前視圖??梢曰瑒?,所以數(shù)量可多可少;
(2)下面的tab導航,一般是用來展示App的核心功能,可以迅速切換,適合用于需要頻繁切換的功能。受限于屏幕寬度,數(shù)量一般控制在5個以內(nèi),4個為最佳,(以4個舉例)其中第2、3個最好操作。當有更多操作的時候,可以將最后一項設(shè)置為“更多”,來將一些次要功能進行隱藏。

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

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

2.抽屜式導航

舉例:

02.webp.jpg

左:知乎日報    右:36Kr

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

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

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

3.宮格導航

舉例:

03.webp.jpg

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

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

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

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

4.列表式導航

舉例:

04.webp.jpg

糗事百科

適用場景:
通常位于二級頁面,不展示實質(zhì)內(nèi)容,作為內(nèi)容列表的一種圖形化方式展現(xiàn)

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

劣勢:
不展示實質(zhì)內(nèi)容,需要用戶點擊后才能知道具體內(nèi)容,增加了用戶的操作成本

5.舵式導航

也稱“點聚式”導航,path首創(chuàng)。

舉例:

05.webp.jpg

新浪微博

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

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

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

6.輪播導航

舉例:

06.webp.jpg

墨跡天氣:當添加了多個城市,查看城市天氣時,為輪播式導航

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

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

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

7.組合導航

舉例:

07.webp.jpg

QQ

適用場景:
當前很多app都使用了組合式導航。當一種導航方式已經(jīng)不能滿足app的復雜功能時,組合導航就能很好的安排信息的排列方式,以最優(yōu)的方式來引導用戶使用app

優(yōu)勢:
可以根據(jù)app的功能需要,進行多種導航方式的組合,來達到最優(yōu)的信息展現(xiàn)

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

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

 

分享本文至:

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://m.820esy.cn

存檔