<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://m.skdbbs.com

    存檔

    主站蜘蛛池模板: 久久99精品国产| 精品一区二区三区免费视频| 最新国产精品亚洲| 日韩国产成人精品视频| 久久精品国产亚洲7777| 91精品视频在线| 2021国产成人精品国产| 中国大陆精品视频XXXX| 久久精品国产精品亚洲艾草网美妙| 久久er热视频在这里精品| 爽爽精品dvd蜜桃成熟时电影院| 久久精品夜色噜噜亚洲A∨ | 国产精品亚洲欧美大片在线观看| 国产精品ⅴ无码大片在线看| 亚洲AV无码成人精品区天堂| 欧美在线精品一区二区三区| 久久精品国产亚洲Aⅴ蜜臀色欲 | 亚洲欧美精品综合中文字幕| 久久久久久亚洲精品不卡| 国产精品无打码在线播放| 2021年精品国产福利在线| 国产精品第13页| 99国产精品无码| 精品黑人一区二区三区| 日韩精品专区AV无码| 永久免费精品影视网站| 亚洲精品成人片在线观看| 日韩精品一区二区午夜成人版| 久久精品免费网站网| 精品精品国产理论在线观看| 国产精品国产三级国产AⅤ| 99精品国产成人一区二区| 欧美精品黑人巨大在线播放| 久久这里只精品国产99热| 久久九九有精品国产23百花影院| 欧美精品888| 北条麻妃国产九九九精品视频| 夜色www国产精品资源站| 国产高清一级毛片精品| 精品国产毛片一区二区无码| 久久久人妻精品无码一区|