發(fā)布時間:2024-03-15 16:23:46 瀏覽量:303次
優(yōu)秀的APP導(dǎo)航設(shè)計(jì),能夠合理地完美展示產(chǎn)品的功能,并快速引導(dǎo)用戶使用,增強(qiáng)用戶的識別度。合理的導(dǎo)航設(shè)計(jì),會讓用戶輕松達(dá)到目的而又不會干擾和困擾用戶的選擇。
網(wǎng)上對介紹導(dǎo)航文章已經(jīng)有很多,有部分已過時,今天自己再重新整理一遍,方便自己也方便更多人理解。
為什么需要導(dǎo)航?
1、我可以去哪?
導(dǎo)航為了清晰指引用戶完成任務(wù)。建立合理的導(dǎo)航系統(tǒng),設(shè)計(jì)順暢的任務(wù)路徑,讓用戶不再像無頭蒼蠅一樣,在各模塊之間迷失。一個好的導(dǎo)航,能夠扁平化用戶的任務(wù)路徑,減少用戶操作成本,從而提高用戶體驗(yàn)。
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)點(diǎn):
1、入口直接清晰,操作路徑短,便于在不同功能模塊進(jìn)行跳轉(zhuǎn)
2、直接展示入口內(nèi)容,內(nèi)容曝光度高
缺點(diǎn):
1、功能之間無主次
2、擴(kuò)展性差,不利于后期的功能擴(kuò)展
二、舵式導(dǎo)航
舵式導(dǎo)航是 底部導(dǎo)航的一種擴(kuò)展形式,像輪船上用來指揮的船舵,兩側(cè)是其他操作按鈕。
普通標(biāo)簽導(dǎo)航難以滿足導(dǎo)航的需求,就需要一些擴(kuò)展形式,和標(biāo)簽導(dǎo)航相比,舵式導(dǎo)航 把核心功能放在中間,標(biāo)簽更加突出醒目,同時對主功能標(biāo)簽做了擴(kuò)展功能。
使用場景:
如1、產(chǎn)品需要特殊的引導(dǎo),如58同城,引導(dǎo)用戶發(fā)布任務(wù)。
如2、社區(qū)產(chǎn)品引導(dǎo)用戶發(fā)帖子
如3、凸顯核心功能,如百度地圖、高德等
優(yōu)點(diǎn):
1、在默認(rèn)加載的頁面之外,又能夠突出強(qiáng)調(diào)中間的入口
2、入口直接清晰,操作路徑短,便于不同功能模塊進(jìn)行跳轉(zhuǎn)
3、直接展示入口內(nèi)容,內(nèi)容曝光率高
缺點(diǎn):(與標(biāo)簽導(dǎo)航存在同樣的弊端)
1、功能之間無主次
2、擴(kuò)展性差,不利于后期的功能擴(kuò)展
三、Tab標(biāo)簽式導(dǎo)航
一般 用于二級導(dǎo)航,當(dāng)內(nèi)容分類較多的時,一般采用 頂部標(biāo)簽導(dǎo)航設(shè)計(jì)模式。
使用場景:
如:為當(dāng)前界面內(nèi)不同模塊的切換,或者查看不同的分類內(nèi)容
優(yōu)點(diǎn):
標(biāo)簽數(shù)量可以隨意根據(jù)需求變化,可以左右滑動,衍生更多標(biāo)簽。
缺點(diǎn):
操作熱區(qū)較小,有APP設(shè)計(jì)的交互前與后的樣式差異不大,容易造成誤操作的困惑。(不知道當(dāng)前在哪個標(biāo)簽下)
四、抽屜式導(dǎo)航
抽屜式導(dǎo)航的核心思路是“隱藏”。 隱藏非核心的操作與功能,讓用戶更專注于核心的功能操作上去, 一般用于二級菜單。
優(yōu)點(diǎn):
1、節(jié)省頁面展示空間
2、注意力聚焦在當(dāng)前頁面
缺點(diǎn):
1、左上角的按鈕存在于單手操作熱區(qū)難以觸達(dá);
2、降低了用戶對產(chǎn)品部分功能的參與度。
五、宮格式導(dǎo)航
主要將入口全部集中在主頁面中,各個 入口相互獨(dú)立,沒有太多的交集,無法跳轉(zhuǎn)互通。
采用這種導(dǎo)航的應(yīng)用已經(jīng)越來越少,往往用在二級頁作為內(nèi)容列表的一種圖形化形式呈現(xiàn),或是作為一系列工具入口的聚合。
優(yōu)點(diǎn):
1、將入口進(jìn)行聚合,入口也清晰直接
2、操作路徑較短,用戶可以便捷的在不同的功能模塊之間進(jìn)行跳轉(zhuǎn)
3、擴(kuò)展性好,方便增加多個入口
缺點(diǎn):
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)點(diǎn):
1、展示清晰直觀,美觀度高
2、內(nèi)容曝光度高,突出強(qiáng)調(diào)了展示內(nèi)容
3、交互動畫可多樣化
缺點(diǎn):
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)容信息,點(diǎn)擊進(jìn)去就是詳情。
嵌入式列表:嵌入式其實(shí)就是由多個列表層級組合而成的導(dǎo)航。
優(yōu)點(diǎn):
1、結(jié)構(gòu)清晰,易于理解;
2、使用高效,能夠幫助用戶快速的定位去到對應(yīng)的頁面
3、能夠在列表上直接給出關(guān)于活動、更新的提示
缺點(diǎn):
1、排版方式單一
2、多個入口之間不分級,沒優(yōu)先級之分
八、組合式導(dǎo)航
多用于產(chǎn)品本身 功能較為復(fù)雜,既需要用戶能 聚焦于內(nèi)容,又需要給出用戶不同頁面之間的入口,以便用戶進(jìn)行直接跳轉(zhuǎn),那就采用組合式導(dǎo)航,利用不同導(dǎo)航的特性來滿足產(chǎn)品需求。
組合式導(dǎo)航目前最常見的導(dǎo)航方式。
如: 標(biāo)簽式導(dǎo)航+列表式 ;標(biāo)簽式+宮格式 ; 舵式+列表式+標(biāo)簽式 等等;
優(yōu)點(diǎn):
1、組合式多樣化
2、能給出用戶不同頁面之間的入口,方便跳轉(zhuǎn)
總結(jié)
根據(jù)自己的產(chǎn)品功能和特性,采用不同導(dǎo)航模式。
每個產(chǎn)品迭代發(fā)展和變化,也會導(dǎo)致產(chǎn)品導(dǎo)航在過程中不停的產(chǎn)生變化,就必須依據(jù)用戶屬性和使用場景進(jìn)行調(diào)整。不拘泥任何模式,解決問題才是根本。
~此文轉(zhuǎn)載,如有侵權(quán),請聯(lián)系刪除
熱門資訊
1. iPhone6的UI設(shè)計(jì)尺寸規(guī)范,原來如此重要!
想要了解iPhone6界面設(shè)計(jì)的尺寸規(guī)范嗎?這里為您詳細(xì)介紹iPhone6的UI設(shè)計(jì)尺寸規(guī)范,包括界面尺寸、圖標(biāo)尺寸、可點(diǎn)擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
2. 12個絕佳的UI設(shè)計(jì)網(wǎng)站,助力你的創(chuàng)作之旅!
將為大家介紹12個絕佳的UI設(shè)計(jì)網(wǎng)站,這些網(wǎng)站不僅可以為你提供靈感,還可以幫助你學(xué)習(xí)新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個面向設(shè)計(jì)師的...
3. 移動端UI設(shè)計(jì)中常見的5種APP界面類型,你get到了嗎?
通過介紹移動端UI設(shè)計(jì)中的閃屏頁、引導(dǎo)頁、浮層引導(dǎo)頁、空白頁和首頁等5種APP界面類型,幫助大家更好地了解UI設(shè)計(jì)的基本知識
4. 10個免費(fèi)學(xué)習(xí)UI設(shè)計(jì)的網(wǎng)站 提升你的設(shè)計(jì)能力
怎樣可以提升你的UI設(shè)計(jì)能力!第一個:站酷站酷想必是設(shè)計(jì)師都知道的一個網(wǎng)站,里面不止有UI設(shè)計(jì)的資源,還有其他設(shè)計(jì)的,不如:平面設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)、字體...
5. 移動端列表頁和表單頁設(shè)計(jì)秘訣:讓你的APP點(diǎn)擊率翻倍
在移動端設(shè)計(jì)中,列表頁和表單頁是不可或缺的部分。一個好的列表頁和表單頁設(shè)計(jì)能夠讓用戶輕松地獲取信息并產(chǎn)生點(diǎn)擊欲望,從而提高點(diǎn)擊率。本文將為你...
6. 推薦10本適合UI設(shè)計(jì)師看的書籍,輕松掌握技能!
對于想要提高自己的設(shè)計(jì)能力和創(chuàng)造力的小白和UI設(shè)計(jì)師來說,這本書是一個很好的選擇。4.《設(shè)計(jì)的覺醒》(IKKO TANAKA)推薦理由: 這本書是日本現(xiàn)代平面...
7. 零基礎(chǔ)學(xué)UI設(shè)計(jì)要多久?培訓(xùn)完能拿多少工資?
探索零基礎(chǔ)UI設(shè)計(jì)培訓(xùn)的時長與薪資前景。了解數(shù)字藝術(shù)教育領(lǐng)域的專業(yè)課程,以及培訓(xùn)后的職業(yè)發(fā)展機(jī)會。
8. 物聯(lián)網(wǎng)APP UI設(shè)計(jì):創(chuàng)造智能硬件領(lǐng)域的沉浸式體驗(yàn)
ui設(shè)計(jì)應(yīng)該讓用戶一目了然,能夠快速找到所需的信息和功能。在設(shè)計(jì)過程中,應(yīng)盡量使用簡潔的圖標(biāo)、文字和色彩,避免過多的視覺干擾。符合用戶習(xí)慣:ui設(shè)...
9. 武漢UI設(shè)計(jì)培訓(xùn)班費(fèi)用怎么樣?想學(xué)UI設(shè)計(jì)要多少錢?
想了解武漢UI設(shè)計(jì)培訓(xùn)班的費(fèi)用是多少嗎?不知道學(xué)UI設(shè)計(jì)要花多少錢?不妨看看這篇文章,了解UI設(shè)計(jì)培訓(xùn)班的學(xué)費(fèi)價(jià)格以及學(xué)習(xí)內(nèi)容。
10. 設(shè)計(jì)中的色彩心理學(xué):淺析中西方色彩的歷史演變與設(shè)計(jì)應(yīng)用
摘要:本文探討了色彩的歷史演變和設(shè)計(jì)應(yīng)用。通過對色彩在早期文明社會中的實(shí)用運(yùn)用、不同文化背景下色彩觀念的差異、色彩在設(shè)計(jì)中的重要性以及新興技...
最新文章
同學(xué)您好!