發(fā)布時間:2024-03-15 16:23:46 瀏覽量:336次
優(yōu)秀的APP導航設計,能夠合理地完美展示產品的功能,并快速引導用戶使用,增強用戶的識別度。合理的導航設計,會讓用戶輕松達到目的而又不會干擾和困擾用戶的選擇。
網上對介紹導航文章已經有很多,有部分已過時,今天自己再重新整理一遍,方便自己也方便更多人理解。
為什么需要導航?
1、我可以去哪?
導航為了清晰指引用戶完成任務。建立合理的導航系統(tǒng),設計順暢的任務路徑,讓用戶不再像無頭蒼蠅一樣,在各模塊之間迷失。一個好的導航,能夠扁平化用戶的任務路徑,減少用戶操作成本,從而提高用戶體驗。
2、我現在在哪?
用戶當前位置要有清晰的標記,從哪里來,到哪里去。
常見的8種導航形式

標簽式導航可分為 底部標簽式 、舵式導航、Tab標簽式導航。
一、底部標簽式導航
底部標簽導航是目前最常見的導航形式。底部導航 一般采用3-4個標簽,最多不會超過5個。

優(yōu)點:
1、入口直接清晰,操作路徑短,便于在不同功能模塊進行跳轉
2、直接展示入口內容,內容曝光度高
缺點:
1、功能之間無主次
2、擴展性差,不利于后期的功能擴展
二、舵式導航
舵式導航是 底部導航的一種擴展形式,像輪船上用來指揮的船舵,兩側是其他操作按鈕。
普通標簽導航難以滿足導航的需求,就需要一些擴展形式,和標簽導航相比,舵式導航 把核心功能放在中間,標簽更加突出醒目,同時對主功能標簽做了擴展功能。

使用場景:
如1、產品需要特殊的引導,如58同城,引導用戶發(fā)布任務。
如2、社區(qū)產品引導用戶發(fā)帖子
如3、凸顯核心功能,如百度地圖、高德等
優(yōu)點:
1、在默認加載的頁面之外,又能夠突出強調中間的入口
2、入口直接清晰,操作路徑短,便于不同功能模塊進行跳轉
3、直接展示入口內容,內容曝光率高
缺點:(與標簽導航存在同樣的弊端)
1、功能之間無主次
2、擴展性差,不利于后期的功能擴展
三、Tab標簽式導航
一般 用于二級導航,當內容分類較多的時,一般采用 頂部標簽導航設計模式。

使用場景:
如:為當前界面內不同模塊的切換,或者查看不同的分類內容
優(yōu)點:
標簽數量可以隨意根據需求變化,可以左右滑動,衍生更多標簽。
缺點:
操作熱區(qū)較小,有APP設計的交互前與后的樣式差異不大,容易造成誤操作的困惑。(不知道當前在哪個標簽下)
四、抽屜式導航
抽屜式導航的核心思路是“隱藏”。 隱藏非核心的操作與功能,讓用戶更專注于核心的功能操作上去, 一般用于二級菜單。

優(yōu)點:
1、節(jié)省頁面展示空間
2、注意力聚焦在當前頁面
缺點:
1、左上角的按鈕存在于單手操作熱區(qū)難以觸達;
2、降低了用戶對產品部分功能的參與度。
五、宮格式導航
主要將入口全部集中在主頁面中,各個 入口相互獨立,沒有太多的交集,無法跳轉互通。
采用這種導航的應用已經越來越少,往往用在二級頁作為內容列表的一種圖形化形式呈現,或是作為一系列工具入口的聚合。

優(yōu)點:
1、將入口進行聚合,入口也清晰直接
2、操作路徑較短,用戶可以便捷的在不同的功能模塊之間進行跳轉
3、擴展性好,方便增加多個入口
缺點:
1、用戶無法第一時間看到內容或者執(zhí)行操作,選擇的壓力會比較大。
2、返回路徑較長,容易產生用戶不良情緒。
六、輪播式導航
采用Banner輪播導航,當應用信息足夠扁平, 內容比較單薄時使用。特別是在產品初期,缺乏用戶和內容,這種導航目前已經很少用。
該方式就可以 凸顯產品核心功能給予用戶使用。(如:較早時騰訊極光APP、應用市場等)

優(yōu)點:
1、展示清晰直觀,美觀度高
2、內容曝光度高,突出強調了展示內容
3、交互動畫可多樣化
缺點:
1、展示內容數量有限
七、列表式導航
現有APP中一種主要的信息承載模式,列表導航和宮格導航類似,屬于二級導航。
列表式導航分為3類: 標題式列表、內容式列表、嵌入式列表。
標題式列表:一般只顯示一行文字,有的顯示一行文字加一張圖片等等。
內容式列表:主要以內容為主,所以在列表中就會體現出部分內容信息,點擊進去就是詳情。
嵌入式列表:嵌入式其實就是由多個列表層級組合而成的導航。

優(yōu)點:
1、結構清晰,易于理解;
2、使用高效,能夠幫助用戶快速的定位去到對應的頁面
3、能夠在列表上直接給出關于活動、更新的提示
缺點:
1、排版方式單一
2、多個入口之間不分級,沒優(yōu)先級之分
八、組合式導航
多用于產品本身 功能較為復雜,既需要用戶能 聚焦于內容,又需要給出用戶不同頁面之間的入口,以便用戶進行直接跳轉,那就采用組合式導航,利用不同導航的特性來滿足產品需求。
組合式導航目前最常見的導航方式。
如: 標簽式導航+列表式 ;標簽式+宮格式 ; 舵式+列表式+標簽式 等等;

優(yōu)點:
1、組合式多樣化
2、能給出用戶不同頁面之間的入口,方便跳轉
總結
根據自己的產品功能和特性,采用不同導航模式。
每個產品迭代發(fā)展和變化,也會導致產品導航在過程中不停的產生變化,就必須依據用戶屬性和使用場景進行調整。不拘泥任何模式,解決問題才是根本。
~此文轉載,如有侵權,請聯系刪除
熱門資訊
怎樣可以提升你的UI設計能力!第一個:站酷站酷想必是設計師都知道的一個網站,里面不止有UI設計的資源,還有其他設計的,不如:平面設計、網頁設計、字體...
2. iPhone6的UI設計尺寸規(guī)范,原來如此重要!
想要了解iPhone6界面設計的尺寸規(guī)范嗎?這里為您詳細介紹iPhone6的UI設計尺寸規(guī)范,包括界面尺寸、圖標尺寸、可點擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
3. 移動端UI設計中常見的5種APP界面類型,你get到了嗎?
通過介紹移動端UI設計中的閃屏頁、引導頁、浮層引導頁、空白頁和首頁等5種APP界面類型,幫助大家更好地了解UI設計的基本知識
4. 12個絕佳的UI設計網站,助力你的創(chuàng)作之旅!
將為大家介紹12個絕佳的UI設計網站,這些網站不僅可以為你提供靈感,還可以幫助你學習新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個面向設計師的...
在移動端設計中,列表頁和表單頁是不可或缺的部分。一個好的列表頁和表單頁設計能夠讓用戶輕松地獲取信息并產生點擊欲望,從而提高點擊率。本文將為你...
6. 史上最全,平面設計UI設計必備的77個國內外素材、設計資源網站
ui設計社區(qū),大神太多了。3、behance: https://www.behance.net/ ,著名設計... 對于品牌設計師來說,除了圖案素材收集之外,還有一個很重要的,就是設計故...
對于想要提高自己的設計能力和創(chuàng)造力的小白和UI設計師來說,這本書是一個很好的選擇。4.《設計的覺醒》(IKKO TANAKA)推薦理由: 這本書是日本現代平面...
8. 設計中的色彩心理學:淺析中西方色彩的歷史演變與設計應用
摘要:本文探討了色彩的歷史演變和設計應用。通過對色彩在早期文明社會中的實用運用、不同文化背景下色彩觀念的差異、色彩在設計中的重要性以及新興技...
想了解武漢UI設計培訓班的費用是多少嗎?不知道學UI設計要花多少錢?不妨看看這篇文章,了解UI設計培訓班的學費價格以及學習內容。
探索零基礎UI設計培訓的時長與薪資前景。了解數字藝術教育領域的專業(yè)課程,以及培訓后的職業(yè)發(fā)展機會。
最新文章
同學您好!