首頁(yè) >
熱門(mén)文章 >
UI設(shè)計(jì) > UI設(shè)計(jì)中的APP導(dǎo)航模式總結(jié)
UI設(shè)計(jì)中的APP導(dǎo)航模式總結(jié)
時(shí)間：2020-09-07來(lái)源：m.lb577.com點(diǎn)擊量：次作者：Gella
時(shí)間：2020-09-07點(diǎn)擊量：次作者：Gella
優(yōu)秀的APP導(dǎo)航設(shè)計(jì)，能夠合理地完美展示產(chǎn)品的功能，并快速引導(dǎo)用戶(hù)使用，增強(qiáng)用戶(hù)的識(shí)別度。合理的導(dǎo)航設(shè)計(jì)，會(huì)讓用戶(hù)輕松達(dá)到目的而又不會(huì)干擾和困擾用戶(hù)的選擇。今天AAA教育郭老師就針對(duì)UI設(shè)計(jì)中的APP導(dǎo)航模式進(jìn)行簡(jiǎn)單的說(shuō)明。
為什么需要導(dǎo)航?
1、我可以去哪?
導(dǎo)航為了清晰指引用戶(hù)完成任務(wù)。建立合理的導(dǎo)航系統(tǒng)，設(shè)計(jì)順暢的任務(wù)路徑，讓用戶(hù)不再像無(wú)頭蒼蠅一樣，在各模塊之間迷失。
一個(gè)好的導(dǎo)航，能夠扁平化用戶(hù)的任務(wù)路徑，減少用戶(hù)操作成本，從而提高用戶(hù)體驗(yàn)。
2、我現(xiàn)在在哪?用戶(hù)當(dāng)前位置要有清晰的標(biāo)記，從哪里來(lái)，到哪里去。
常見(jiàn)的8種導(dǎo)航形式
標(biāo)簽式導(dǎo)航可分為 底部標(biāo)簽式 、舵式導(dǎo)航、Tab標(biāo)簽式導(dǎo)航。
一、底部標(biāo)簽式導(dǎo)航
底部標(biāo)簽導(dǎo)航是目前最常見(jiàn)的導(dǎo)航形式。底部導(dǎo)航一般采用3-4個(gè)標(biāo)簽，最多不會(huì)超過(guò)5個(gè)。
優(yōu)點(diǎn)：
1、入口直接清晰，操作路徑短，便于在不同功能模塊進(jìn)行跳轉(zhuǎn)2、直接展示入口內(nèi)容，內(nèi)容曝光度高
缺點(diǎn)：1、功能之間無(wú)主次2、擴(kuò)展性差，不利于后期的功能擴(kuò)展
二、舵式導(dǎo)航
舵式導(dǎo)航是 底部導(dǎo)航的一種擴(kuò)展形式，像輪船上用來(lái)指揮的船舵，兩側(cè)是其他操作按鈕。
普通標(biāo)簽導(dǎo)航難以滿(mǎn)足導(dǎo)航的需求，就需要一些擴(kuò)展形式，和標(biāo)簽導(dǎo)航相比，舵式導(dǎo)航把核心功能放在中間，標(biāo)簽更加突出醒目，同時(shí)對(duì)主功能標(biāo)簽做了擴(kuò)展功能。
使用場(chǎng)景：如1、產(chǎn)品需要特殊的引導(dǎo)，如58同城，引導(dǎo)用戶(hù)發(fā)布任務(wù)。如2、社區(qū)產(chǎn)品引導(dǎo)用戶(hù)發(fā)帖子如3、凸顯核心功能，如百度地圖、高德等
優(yōu)點(diǎn)：
1、在默認(rèn)加載的頁(yè)面之外，又能夠突出強(qiáng)調(diào)中間的入口2、入口直接清晰，操作路徑短，便于不同功能模塊進(jìn)行跳轉(zhuǎn)3、直接展示入口內(nèi)容，內(nèi)容曝光率高
缺點(diǎn)：(與標(biāo)簽導(dǎo)航存在同樣的弊端)
1、功能之間無(wú)主次2、擴(kuò)展性差，不利于后期的功能擴(kuò)展
三、Tab標(biāo)簽式導(dǎo)航
一般 用于二級(jí)導(dǎo)航，當(dāng)內(nèi)容分類(lèi)較多的時(shí)，一般采用頂部標(biāo)簽導(dǎo)航設(shè)計(jì)模式。
使用場(chǎng)景：
如：為當(dāng)前界面內(nèi)不同模塊的切換，或者查看不同的分類(lèi)內(nèi)容優(yōu)點(diǎn)：標(biāo)簽數(shù)量可以隨意根據(jù)需求變化，可以左右滑動(dòng)，衍生更多標(biāo)簽。
缺點(diǎn)：操作熱區(qū)較小，有APP設(shè)計(jì)的交互前與后的樣式差異不大，容易造成誤操作的困惑。(不知道當(dāng)前在哪個(gè)標(biāo)簽下)
四、抽屜式導(dǎo)航
抽屜式導(dǎo)航的核心思路是“隱藏”。 隱藏非核心的操作與功能，讓用戶(hù)更專(zhuān)注于核心的功能操作上去， 一般用于二級(jí)菜單。
優(yōu)點(diǎn)：
1、節(jié)省頁(yè)面展示空間2、注意力聚焦在當(dāng)前頁(yè)面
缺點(diǎn)：1、左上角的按鈕存在于單手操作熱區(qū)難以觸達(dá);2、降低了用戶(hù)對(duì)產(chǎn)品部分功能的參與度。
五、宮格式導(dǎo)航
主要將入口全部集中在主頁(yè)面中，各個(gè) 入口相互獨(dú)立，沒(méi)有太多的交集，無(wú)法跳轉(zhuǎn)互通。
采用這種導(dǎo)航的應(yīng)用已經(jīng)越來(lái)越少，往往用在二級(jí)頁(yè)作為內(nèi)容列表的一種圖形化形式呈現(xiàn)，或是作為一系列工具入口的聚合。
優(yōu)點(diǎn)：1、將入口進(jìn)行聚合，入口也清晰直接2、操作路徑較短，用戶(hù)可以便捷的在不同的功能模塊之間進(jìn)行跳轉(zhuǎn)3、擴(kuò)展性好，方便增加多個(gè)入口
缺點(diǎn)：1、用戶(hù)無(wú)法第一時(shí)間看到內(nèi)容或者執(zhí)行操作，選擇的壓力會(huì)比較大。2、返回路徑較長(zhǎng)，容易產(chǎn)生用戶(hù)不良情緒。
六、輪播式導(dǎo)航
采用Banner輪播導(dǎo)航，當(dāng)應(yīng)用信息足夠扁平，內(nèi)容比較單薄時(shí)使用。特別是在產(chǎn)品初期，缺乏用戶(hù)和內(nèi)容，這種導(dǎo)航目前已經(jīng)很少用。
該方式就可以 凸顯產(chǎn)品核心功能給予用戶(hù)使用。(如：較早時(shí)騰訊極光APP、應(yīng)用市場(chǎng)等)
優(yōu)點(diǎn)：
1、展示清晰直觀，美觀度高2、內(nèi)容曝光度高，突出強(qiáng)調(diào)了展示內(nèi)容3、交互動(dòng)畫(huà)可多樣化
缺點(diǎn)：1、展示內(nèi)容數(shù)量有限
七、列表式導(dǎo)航
現(xiàn)有APP中一種主要的信息承載模式，列表導(dǎo)航和宮格導(dǎo)航類(lèi)似，屬于二級(jí)導(dǎo)航。列表式導(dǎo)航分為3類(lèi)： 標(biāo)題式列表、內(nèi)容式列表、嵌入式列表。
標(biāo)題式列表：一般只顯示一行文字，有的顯示一行文字加一張圖片等等。
內(nèi)容式列表：主要以?xún)?nèi)容為主，所以在列表中就會(huì)體現(xiàn)出部分內(nèi)容信息，點(diǎn)擊進(jìn)去就是詳情。
嵌入式列表：嵌入式其實(shí)就是由多個(gè)列表層級(jí)組合而成的導(dǎo)航。
優(yōu)點(diǎn)：1、結(jié)構(gòu)清晰，易于理解;2、使用高效，能夠幫助用戶(hù)快速的定位去到對(duì)應(yīng)的頁(yè)面3、能夠在列表上直接給出關(guān)于活動(dòng)、更新的提示
缺點(diǎn)：1、排版方式單一2、多個(gè)入口之間不分級(jí)，沒(méi)優(yōu)先級(jí)之分
八、組合式導(dǎo)航
多用于產(chǎn)品本身 功能較為復(fù)雜，既需要用戶(hù)能 聚焦于內(nèi)容，又需要給出用戶(hù)不同頁(yè)面之間的入口，以便用戶(hù)進(jìn)行直接跳轉(zhuǎn)，那就采用組合式導(dǎo)航，利用不同導(dǎo)航的特性來(lái)滿(mǎn)足產(chǎn)品需求。
組合式導(dǎo)航目前最常見(jiàn)的導(dǎo)航方式。
如： 標(biāo)簽式導(dǎo)航+列表式 ;標(biāo)簽式+宮格式 ; 舵式+列表式+標(biāo)簽式等等;
優(yōu)點(diǎn)：
1、組合式多樣化
2、能給出用戶(hù)不同頁(yè)面之間的入口，方便跳轉(zhuǎn)
總結(jié)一下
根據(jù)自己的產(chǎn)品功能和特性，采用不同導(dǎo)航模式。
每個(gè)產(chǎn)品迭代發(fā)展和變化，也會(huì)導(dǎo)致產(chǎn)品導(dǎo)航在過(guò)程中不停的產(chǎn)生變化，就必須依據(jù)用戶(hù)屬性和使用場(chǎng)景進(jìn)行調(diào)整。不拘泥任何模式，解決問(wèn)題才是根本。因此，您現(xiàn)在已經(jīng)了解了與UI設(shè)計(jì)師的工作相關(guān)的主要技能。如果您想了解更多信息，請(qǐng)?jiān)L問(wèn)AAA教育，包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。
熱門(mén)推薦
UI設(shè)計(jì)
產(chǎn)品經(jīng)理
大數(shù)據(jù)分析
原畫(huà)設(shè)計(jì)
平面設(shè)計(jì)
新媒體運(yùn)營(yíng) 
