UI設計常見的8種APP導航模式

優秀的APP導航設計,能夠合理地完美展示產品的功能,並快速引導用户使用,增強用户的識別度。合理的導航設計,會讓用户輕鬆達到目的而又不會干擾和困擾用户的選擇。

網上對介紹導航文章已經有很多,有部分已過時,今天自己再重新整理一遍,方便自己也方便更多人理解。

為什麼需要導航?

1、我可以去哪?

導航為了清晰指引用户完成任務。建立合理的導航系統,設計順暢的任務路徑,讓用户不再像無頭蒼蠅一樣,在各模塊之間迷失。一個好的導航,能夠扁平化用户的任務路徑,減少用户操作成本,從而提高用户體驗。

2、我現在在哪?

用户當前位置要有清晰的標記,從哪裏來,到哪裏去。

常見的8種導航形式

UI設計常見的8種APP導航模式

標籤式導航可分為底部標籤式、舵式導航、Tab標籤式導航。

一、底部標籤式導航

底部標籤導航是目前最常見的導航形式。底部導航一般採用3-4個標籤,最多不會超過5個。

UI設計常見的8種APP導航模式

優點:

1、入口直接清晰,操作路徑短,便於在不同功能模塊進行跳轉

2、直接展示入口內容,內容曝光度高

缺點:

1、功能之間無主次

2、擴展性差,不利於後期的功能擴展

二、舵式導航

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

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

UI設計常見的8種APP導航模式

使用場景:

如1、產品需要特殊的引導,如58同城,引導用户發佈任務。

如2、社區產品引導用户發帖子

如3、凸顯核心功能,如百度地圖、高德等

優點:

1、在默認加載的頁面之外,又能夠突出強調中間的入口

2、入口直接清晰,操作路徑短,便於不同功能模塊進行跳轉

3、直接展示入口內容,內容曝光率高

缺點:(與標籤導航存在同樣的弊端)

1、功能之間無主次

2、擴展性差,不利於後期的功能擴展

三、Tab標籤式導航

一般用於二級導航,當內容分類較多的時,一般採用頂部標籤導航設計模式。

UI設計常見的8種APP導航模式

使用場景:

如:為當前界面內不同模塊的切換,或者查看不同的分類內容

優點:

標籤數量可以隨意根據需求變化,可以左右滑動,衍生更多標籤。

缺點:

操作熱區較小,有APP設計的交互前與後的樣式差異不大,容易造成誤操作的困惑。(不知道當前在哪個標籤下)

四、抽屜式導航

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

UI設計常見的8種APP導航模式

優點:

1、節省頁面展示空間

2、注意力聚焦在當前頁面

缺點:

1、左上角的按鈕存在於單手操作熱區難以觸達;

2、降低了用户對產品部分功能的參與度。

五、宮格式導航

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

採用這種導航的應用已經越來越少,往往用在二級頁作為內容列表的一種圖形化形式呈現,或是作為一系列工具入口的聚合。

UI設計常見的8種APP導航模式

優點:

1、將入口進行聚合,入口也清晰直接

2、操作路徑較短,用户可以便捷的在不同的功能模塊之間進行跳轉

3、擴展性好,方便增加多個入口

缺點:

1、用户無法第一時間看到內容或者執行操作,選擇的壓力會比較大。

2、返回路徑較長,容易產生用户不良情緒。

六、輪播式導航

採用Banner輪播導航,當應用信息足夠扁平,內容比較單薄時使用。特別是在產品初期,缺乏用户和內容,這種導航目前已經很少用。

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

UI設計常見的8種APP導航模式

優點:

1、展示清晰直觀,美觀度高

2、內容曝光度高,突出強調了展示內容

3、交互動畫可多樣化

缺點:

1、展示內容數量有限

七、列表式導航

現有APP中一種主要的信息承載模式,列表導航和宮格導航類似,屬於二級導航。

列表式導航分為3類:標題式列表、內容式列表、嵌入式列表。

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

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

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

UI設計常見的8種APP導航模式

優點:

1、結構清晰,易於理解;

2、使用高效,能夠幫助用户快速的定位去到對應的頁面

3、能夠在列表上直接給出關於活動、更新的提示

缺點:

1、排版方式單一

2、多個入口之間不分級,沒優先級之分

八、組合式導航

多用於產品本身功能較為複雜,既需要用户能聚焦於內容,又需要給出用户不同頁面之間的入口,以便用户進行直接跳轉,那就採用組合式導航,利用不同導航的特性來滿足產品需求。

組合式導航目前最常見的導航方式。

如:標籤式導航+列表式 ;標籤式+宮格式 ; 舵式+列表式+標籤式等等;

UI設計常見的8種APP導航模式

優點:

1、組合式多樣化

2、能給出用户不同頁面之間的入口,方便跳轉

總結

根據自己的產品功能和特性,採用不同導航模式。

每個產品迭代發展和變化,也會導致產品導航在過程中不停的產生變化,就必須依據用户屬性和使用場景進行調整。不拘泥任何模式,解決問題才是根本。

~此文轉載,如有侵權,請聯繫刪除

版權聲明:本文源自 網絡, 於,由 楠木軒 整理發佈,共 2072 字。

轉載請註明: UI設計常見的8種APP導航模式 - 楠木軒