<strike id="cy2gs"><menu id="cy2gs"></menu></strike>
  • <del id="cy2gs"><dfn id="cy2gs"></dfn></del>
  • App各類導航設計適用場景及優劣勢總結

    2016-11-18    鶴鶴

    如果您想訂閱本博客內容,每天自動發到您的郵箱中,?請點這里 

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

     

    1.Tab導航

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

    舉例:

    01.webp.jpg

    左:多看閱讀   右:網易云閱讀

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

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

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

    2.抽屜式導航

    舉例:

    02.webp.jpg

    左:知乎日報    右:36Kr

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

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

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

    3.宮格導航

    舉例:

    03.webp.jpg

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

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

    優勢:
    分類清晰、入口獨立、風格簡約

    劣勢:
    并不會展示實質內容,不適合需要頻繁切換的功能

    4.列表式導航

    舉例:

    04.webp.jpg

    糗事百科

    適用場景:
    通常位于二級頁面,不展示實質內容,作為內容列表的一種圖形化方式展現

    優勢:
    結構清晰、簡單,能夠讓用戶快速定位想要找到的內容

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

    5.舵式導航

    也稱“點聚式”導航,path首創。

    舉例:

    05.webp.jpg

    新浪微博

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

    優勢:
    突出的表現入口,能夠吸引用戶注意力,使得頻繁使用的入口容易被用戶接觸到

    劣勢:
    入口數量有限、可擴展性差

    6.輪播導航

    舉例:

    06.webp.jpg

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

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

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

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

    7.組合導航

    舉例:

    07.webp.jpg

    QQ

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

    優勢:
    可以根據app的功能需要,進行多種導航方式的組合,來達到最優的信息展現

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

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

     

    日歷

    鏈接

    個人資料

    藍藍設計的小編 http://www.skdbbs.com

    存檔

    主站蜘蛛池模板: 精品无码国产污污污免费网站国产| 国产亚洲精品线观看动态图| 九九99精品久久久久久| 国产精品手机在线观看你懂的| 九九精品99久久久香蕉| 亚洲综合精品香蕉久久网| 亚洲中文字幕无码久久精品1 | 骚片AV蜜桃精品一区| 东京热TOKYO综合久久精品| 老司机午夜网站国内精品久久久久久久久| 精品乱人伦一区二区三区| 精品无码久久久久久尤物| 网友偷拍日韩精品| 欧美精品色婷婷五月综合| 精品国产综合区久久久久久| 四虎国产精品永久地址99| 国内精品久久国产大陆| 99久久99这里只有免费的精品| 久久精品人人槡人妻人人玩AV| 亚洲愉拍99热成人精品热久久 | 午夜在线视频91精品 | 97精品一区二区视频在线观看| 麻豆亚洲AV永久无码精品久久| 中文字幕精品无码一区二区三区 | 国产精品原创巨作av女教师| 亚洲AV无码久久精品成人| 中文字幕精品一区| 亚洲精品无码专区久久久| 在线观看亚洲精品福利片 | 国产精品自拍一区| 国产精品久久久天天影视| 国产精品久久久久久搜索| 国产精品www| 91精品国产福利在线观看麻豆| 精品乱子伦一区二区三区高清免费播放| 亚洲色图国产精品| 2022精品国偷自产免费观看| 91精品日韩人妻无码久久不卡| 欧美精品天天操| 亚洲国产精品无码久久久不卡| 亚洲国模精品一区|