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