旗下產(chǎn)業(yè): A產(chǎn)業(yè)/?A實習(xí)/?A計劃
全國統(tǒng)一咨詢熱線:010-5367 2995
首頁 > 熱門文章 > UI設(shè)計 > UI設(shè)計中的APP導(dǎo)航模式總結(jié)

UI設(shè)計中的APP導(dǎo)航模式總結(jié)

時間:2020-09-07來源:m.5wd995.cn點擊量:作者:Gella
時間:2020-09-07點擊量:作者:Gella
  優(yōu)秀的APP導(dǎo)航設(shè)計,能夠合理地完美展示產(chǎn)品的功能,并快速引導(dǎo)用戶使用,增強用戶的識別度。合理的導(dǎo)航設(shè)計,會讓用戶輕松達到目的而又不會干擾和困擾用戶的選擇。今天AAA教育郭老師就針對UI設(shè)計中的APP導(dǎo)航模式進行簡單的說明。

  為什么需要導(dǎo)航?

  1、我可以去哪?

  導(dǎo)航為了清晰指引用戶完成任務(wù)。建立合理的導(dǎo)航系統(tǒng),設(shè)計順暢的任務(wù)路徑,讓用戶不再像無頭蒼蠅一樣,在各模塊之間迷失。

  一個好的導(dǎo)航,能夠扁平化用戶的任務(wù)路徑,減少用戶操作成本,從而提高用戶體驗。

  2、我現(xiàn)在在哪?用戶當(dāng)前位置要有清晰的標(biāo)記,從哪里來,到哪里去。

        常見的8種導(dǎo)航形式




 
  標(biāo)簽式導(dǎo)航可分為 底部標(biāo)簽式 、舵式導(dǎo)航、Tab標(biāo)簽式導(dǎo)航。

  一、底部標(biāo)簽式導(dǎo)航

        底部標(biāo)簽導(dǎo)航是目前最常見的導(dǎo)航形式。底部導(dǎo)航一般采用3-4個標(biāo)簽,最多不會超過5個。




 
  優(yōu)點:

  1、入口直接清晰,操作路徑短,便于在不同功能模塊進行跳轉(zhuǎn)2、直接展示入口內(nèi)容,內(nèi)容曝光度高

  缺點:1、功能之間無主次2、擴展性差,不利于后期的功能擴展

  二、舵式導(dǎo)航

  舵式導(dǎo)航是 底部導(dǎo)航的一種擴展形式,像輪船上用來指揮的船舵,兩側(cè)是其他操作按鈕。




 
        普通標(biāo)簽導(dǎo)航難以滿足導(dǎo)航的需求,就需要一些擴展形式,和標(biāo)簽導(dǎo)航相比,舵式導(dǎo)航把核心功能放在中間,標(biāo)簽更加突出醒目,同時對主功能標(biāo)簽做了擴展功能。

  使用場景:如1、產(chǎn)品需要特殊的引導(dǎo),如58同城,引導(dǎo)用戶發(fā)布任務(wù)。如2、社區(qū)產(chǎn)品引導(dǎo)用戶發(fā)帖子如3、凸顯核心功能,如百度地圖、高德等

  優(yōu)點:

  1、在默認加載的頁面之外,又能夠突出強調(diào)中間的入口2、入口直接清晰,操作路徑短,便于不同功能模塊進行跳轉(zhuǎn)3、直接展示入口內(nèi)容,內(nèi)容曝光率高

  缺點:(與標(biāo)簽導(dǎo)航存在同樣的弊端)

  1、功能之間無主次2、擴展性差,不利于后期的功能擴展

  三、Tab標(biāo)簽式導(dǎo)航

        一般 用于二級導(dǎo)航,當(dāng)內(nèi)容分類較多的時,一般采用頂部標(biāo)簽導(dǎo)航設(shè)計模式。



 
  使用場景:

  如:為當(dāng)前界面內(nèi)不同模塊的切換,或者查看不同的分類內(nèi)容優(yōu)點:標(biāo)簽數(shù)量可以隨意根據(jù)需求變化,可以左右滑動,衍生更多標(biāo)簽。

  缺點:操作熱區(qū)較小,有APP設(shè)計的交互前與后的樣式差異不大,容易造成誤操作的困惑。(不知道當(dāng)前在哪個標(biāo)簽下)

  四、抽屜式導(dǎo)航

       抽屜式導(dǎo)航的核心思路是“隱藏”。 隱藏非核心的操作與功能,讓用戶更專注于核心的功能操作上去, 一般用于二級菜單。




 
  優(yōu)點:

  1、節(jié)省頁面展示空間2、注意力聚焦在當(dāng)前頁面

  缺點:1、左上角的按鈕存在于單手操作熱區(qū)難以觸達;2、降低了用戶對產(chǎn)品部分功能的參與度。

  五、宮格式導(dǎo)航

  主要將入口全部集中在主頁面中,各個 入口相互獨立,沒有太多的交集,無法跳轉(zhuǎn)互通。

        采用這種導(dǎo)航的應(yīng)用已經(jīng)越來越少,往往用在二級頁作為內(nèi)容列表的一種圖形化形式呈現(xiàn),或是作為一系列工具入口的聚合。




 
  優(yōu)點:1、將入口進行聚合,入口也清晰直接2、操作路徑較短,用戶可以便捷的在不同的功能模塊之間進行跳轉(zhuǎn)3、擴展性好,方便增加多個入口

  缺點:1、用戶無法第一時間看到內(nèi)容或者執(zhí)行操作,選擇的壓力會比較大。2、返回路徑較長,容易產(chǎn)生用戶不良情緒。

  六、輪播式導(dǎo)航

  采用Banner輪播導(dǎo)航,當(dāng)應(yīng)用信息足夠扁平,內(nèi)容比較單薄時使用。特別是在產(chǎn)品初期,缺乏用戶和內(nèi)容,這種導(dǎo)航目前已經(jīng)很少用。

        該方式就可以 凸顯產(chǎn)品核心功能給予用戶使用。(如:較早時騰訊極光APP、應(yīng)用市場等)




 
  優(yōu)點:

  1、展示清晰直觀,美觀度高2、內(nèi)容曝光度高,突出強調(diào)了展示內(nèi)容3、交互動畫可多樣化

  缺點:1、展示內(nèi)容數(shù)量有限

  七、列表式導(dǎo)航

  現(xiàn)有APP中一種主要的信息承載模式,列表導(dǎo)航和宮格導(dǎo)航類似,屬于二級導(dǎo)航。列表式導(dǎo)航分為3類: 標(biāo)題式列表、內(nèi)容式列表、嵌入式列表。

  標(biāo)題式列表:一般只顯示一行文字,有的顯示一行文字加一張圖片等等。

  內(nèi)容式列表:主要以內(nèi)容為主,所以在列表中就會體現(xiàn)出部分內(nèi)容信息,點擊進去就是詳情。

        嵌入式列表:嵌入式其實就是由多個列表層級組合而成的導(dǎo)航。




 
  優(yōu)點:1、結(jié)構(gòu)清晰,易于理解;2、使用高效,能夠幫助用戶快速的定位去到對應(yīng)的頁面3、能夠在列表上直接給出關(guān)于活動、更新的提示

  缺點:1、排版方式單一2、多個入口之間不分級,沒優(yōu)先級之分

  八、組合式導(dǎo)航

  多用于產(chǎn)品本身 功能較為復(fù)雜,既需要用戶能 聚焦于內(nèi)容,又需要給出用戶不同頁面之間的入口,以便用戶進行直接跳轉(zhuǎn),那就采用組合式導(dǎo)航,利用不同導(dǎo)航的特性來滿足產(chǎn)品需求。

  組合式導(dǎo)航目前最常見的導(dǎo)航方式。

        如: 標(biāo)簽式導(dǎo)航+列表式 ;標(biāo)簽式+宮格式 ; 舵式+列表式+標(biāo)簽式等等;




 
  優(yōu)點:

  1、組合式多樣化

  2、能給出用戶不同頁面之間的入口,方便跳轉(zhuǎn)

  總結(jié)一下

  根據(jù)自己的產(chǎn)品功能和特性,采用不同導(dǎo)航模式

  每個產(chǎn)品迭代發(fā)展和變化,也會導(dǎo)致產(chǎn)品導(dǎo)航在過程中不停的產(chǎn)生變化,就必須依據(jù)用戶屬性和使用場景進行調(diào)整。不拘泥任何模式,解決問題才是根本。因此,您現(xiàn)在已經(jīng)了解了與UI設(shè)計師的工作相關(guān)的主要技能。如果您想了解更多信息,請訪問AAA教育,包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。



預(yù)約申請免費試聽課

填寫下面表單即可預(yù)約申請免費試聽!怕錢不夠?可先就業(yè)掙錢后再付學(xué)費! 怕學(xué)不會?助教全程陪讀,隨時解惑!擔(dān)心就業(yè)?一地學(xué)習(xí),可推薦就業(yè)!

?2007-2021/北京漫動者教育科技有限公司版權(quán)所有
備案號:京ICP備12034770號

?2007-2022/ m.5wd995.cn 北京漫動者數(shù)字科技有限公司 備案號: 京ICP備12034770號 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc

京公網(wǎng)安備 11010802035704號

網(wǎng)站地圖