移動導(dǎo)航的基本模式(上)

17 評論 8760 瀏覽 99 收藏 8 分鐘

一個好的導(dǎo)航設(shè)計能幫助用戶快速了解該產(chǎn)品的功能和信息架構(gòu)。為用戶提供更好的用戶體驗,文章匯總了目前常見的幾類導(dǎo)航設(shè)計。一起來學(xué)習(xí)下。

移動導(dǎo)航是APP中最重要的組件,它相當(dāng)于產(chǎn)品的骨骼,連接著各個功能。

一個好的導(dǎo)航設(shè)計能幫助用戶快速了解該產(chǎn)品的功能和信息架構(gòu),一個app中也會存在多種不同層級的導(dǎo)航模式。

這篇文章整理了目前市面上使用較多的導(dǎo)航以及它們各自的優(yōu)缺點(diǎn)和分別適用的場景。

標(biāo)簽導(dǎo)航

標(biāo)簽導(dǎo)航是IOS系統(tǒng)中最常見的導(dǎo)航,它繼承了桌面導(dǎo)航的樣式,對圖標(biāo)進(jìn)行了扁平化處理。在IOS系統(tǒng)原生頁面中可以看到許多頁面都使用了標(biāo)簽導(dǎo)航的設(shè)計,包括我們常用的微信、支付寶、微博等軟件,都使用標(biāo)簽導(dǎo)航做為它們的一級導(dǎo)航??梢哉f標(biāo)簽導(dǎo)航是最符合IOS用戶習(xí)慣的一種導(dǎo)航。

總結(jié):標(biāo)簽導(dǎo)航適用于主導(dǎo)航各功能重要程度一致,并且主功能數(shù)量在3-5個之間,相互之間切換頻繁的場景。

TAB導(dǎo)航

TAB導(dǎo)航是IOS和安卓端都十分常見的導(dǎo)航,它和標(biāo)簽導(dǎo)航本質(zhì)上其實相似,但是展現(xiàn)形式有很大區(qū)別。tab導(dǎo)航一般處于頁面的頂部,在使用數(shù)量和形式上更加靈活。

總結(jié):通過案例可以發(fā)現(xiàn)TAB導(dǎo)航在使用上十分靈活多變,外觀簡潔,能完美運(yùn)用到各場景,是目前十分流行的導(dǎo)航模式。

舵式導(dǎo)航

舵式導(dǎo)航是標(biāo)簽導(dǎo)航的變體,也是比較常見的導(dǎo)航之一。因為外觀看起來像船舵,所以取名舵式導(dǎo)航。和標(biāo)簽導(dǎo)航不同的是它將核心功能放在導(dǎo)航正中央,并用對比強(qiáng)烈的色彩來和其他導(dǎo)航進(jìn)行區(qū)分,常用于發(fā)布按鈕。

總結(jié):舵式導(dǎo)航彌補(bǔ)了標(biāo)簽導(dǎo)航功能數(shù)量的限制,重點(diǎn)突出了核心功能,適用于發(fā)布功能下有多種同級分類選項的應(yīng)用,常用+號表示,以及在功能型產(chǎn)品中核心功能的開關(guān)按鈕。但是相比標(biāo)簽導(dǎo)航不足的是,舵式導(dǎo)航將核心功能全部隱藏在+號中,需要用戶二次點(diǎn)擊才能到達(dá)目標(biāo),增加了點(diǎn)擊次數(shù),藏在+號中的功能使用頻率會比一級導(dǎo)航大大降低。

抽屜式導(dǎo)航

抽屜式導(dǎo)航外觀小巧,占用空間少,容量大。外觀設(shè)計的像抽屜,可以自由伸縮,也是我們常說的漢堡菜單。它的核心目的是隱藏不常用的功能,減少主界面導(dǎo)航控件數(shù)量,讓界面更加干凈利落。這種設(shè)計模式曾經(jīng)非常流行。但是正因為它的小巧,又處在頁面左上方,是單手操作時非常不容易點(diǎn)擊到的區(qū)域,這也導(dǎo)致藏在抽屜里的功能很少用戶會使用。所以目前抽屜導(dǎo)航在市面上的使用量已經(jīng)越來越少。但目前仍有一些主流軟件在使用抽屜導(dǎo)航的設(shè)計,一般用來放置輔助功能。

總結(jié):抽屜式導(dǎo)航適合作為產(chǎn)品的輔助導(dǎo)航,一般用來放置需要但是不常用到的功能,例如設(shè)置、當(dāng)前用戶等信息。

宮格式導(dǎo)航

宮格式導(dǎo)航也是較為常見的一種,它的特點(diǎn)是占據(jù)空間大,入口扁平化,以平鋪的形式展示所有功能,這一點(diǎn)和桌面類似,在使用上讓功能一目了然,在設(shè)計上更加富有情感化。

總結(jié):宮格導(dǎo)航常用在二級菜單,在使用上充分利用了頁面空間,使頁面更飽滿,視覺更清晰。但缺點(diǎn)是不方便同級功能之間互相切換,必須退出到導(dǎo)航頁面重新選擇。常用作同級別下使用頻率相近又彼此獨(dú)立且功能之間切換頻
率不高的場景。

總結(jié)

看完這五種導(dǎo)航模式我們不難發(fā)現(xiàn),在不同層級和功能下導(dǎo)航的使用方式和場景上都各有不同,也有多種導(dǎo)航互相結(jié)合的設(shè)計。每一種導(dǎo)航都有各自的使用場景。當(dāng)我們需要在一級導(dǎo)航之間頻繁切換時則可使用標(biāo)簽導(dǎo)航,當(dāng)產(chǎn)品分類細(xì)致且互相切換頻繁時則可以使用tab導(dǎo)航,當(dāng)需要重點(diǎn)突出核心功能時則可以使用舵式導(dǎo)航,抽屜式導(dǎo)航則用來隱藏需要但不常用到的功能,宮格式導(dǎo)航則適用于同級別下使用頻率相近又彼此獨(dú)立且功能之間切換頻率不高的場景。

下期我會繼續(xù)分享另外五種常見導(dǎo)航:列表式導(dǎo)航、分段式導(dǎo)航、浮動導(dǎo)航、輪播導(dǎo)航以及復(fù)合式導(dǎo)航。下期見~

相關(guān)閱讀

移動導(dǎo)航的基本模式(下)

 

本文由 @李惠丸 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 謝謝您的分享,小白表示給跪

    回復(fù)
  2. 不錯哦,總結(jié)得很好,學(xué)習(xí)了

    回復(fù)
    1. 謝謝支持

      來自湖北 回復(fù)
  3. 我看了還做了筆記,謝謝 ??

    來自江蘇 回復(fù)
    1. :mrgreen:

      來自湖北 回復(fù)
  4. 可以轉(zhuǎn)載嗎?

    來自湖北 回復(fù)
    1. 可以的,保留底部信息就行哦~

      來自湖北 回復(fù)
    2. 好的

      來自湖北 回復(fù)
  5. 這篇文章很系統(tǒng)地整理了導(dǎo)航,期待下一篇呀??!

    來自日本 回復(fù)
    1. (^ω^)謝謝鼓勵~

      來自湖北 回復(fù)
  6. 好喜歡?。⊥枳邮裁磿r候發(fā)下篇?。。?!期待期待 ?? ?? ??

    來自北京 回復(fù)
    1. 下篇正在編輯,整理好了就發(fā)哦~ 謝謝支持~O(∩_∩)O~

      來自湖北 回復(fù)
  7. 丸子丸子 ?

    來自廣東 回復(fù)
  8. 佳婷動作比我快啊 ??

    來自廣東 回復(fù)
    1. 哈哈哈,你座板凳吧~ ??

      來自湖北 回復(fù)
  9. ?? 好棒,期待下一篇

    來自廣東 回復(fù)
    1. 謝謝親愛的~ ?

      來自湖北 回復(fù)