<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

    存檔

    主站蜘蛛池模板: 久久亚洲精品中文字幕三区| 欧美精品三区| 国产乱人伦偷精品视频不卡| 国产精品丝袜一区二区三区| 四虎影视永久在线精品| 国产vA免费精品高清在线观看| 国产剧情国产精品一区| 亚洲精品高清在线| 国产精品香蕉在线观看| 久久精品国产秦先生| 国产亚洲欧美精品久久久| 亚洲日韩国产AV无码无码精品| 黑人巨茎精品欧美一区二区| 91麻精品国产91久久久久| laowang在线精品视频| 九九精品99久久久香蕉| 亚洲国产另类久久久精品黑人| 牛牛在线精品观看免费正| 国产三级国产精品国产普男人| 欧美亚洲精品在线| HEYZO无码综合国产精品227| 日韩精品无码熟人妻视频| 亚洲国产精品一区二区第四页| 久久久精品久久久久久| 国产在线91精品入口| 国产精品无码不卡一区二区三区| 久久亚洲国产午夜精品理论片 | 无码人妻精品中文字幕| 午夜在线视频91精品| 亚洲第一区精品日韩在线播放| 久久国产精品波多野结衣AV| 精品无码久久久久久国产| 精品无码久久久久久国产 | 国产精品99久久99久久久| 久热这里只有精品12| 久久精品人人做人人妻人人玩 | 久久久久人妻一区精品果冻| 欧洲精品码一区二区三区免费看| 久久亚洲av无码精品浪潮| 午夜精品久久久久9999高清| 中文字幕日韩精品在线|