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