在ui設(shè)計中導(dǎo)航的設(shè)計可以說是提升整個ui設(shè)計用戶體驗感的關(guān)鍵,所以很多設(shè)計師在做ui設(shè)計的時候都會在導(dǎo)航上花更多的心思,下面我們跟隨小編一起來了解一下ui設(shè)計導(dǎo)航的相關(guān)資料吧。
ui設(shè)計導(dǎo)航之底部Tab欄
這是APP最常使用的導(dǎo)航模式,用于一級目錄的導(dǎo)航,位于頁面底部,無論用戶單手還是雙手操作都能輕松點擊,能告訴用戶當(dāng)前位置及用戶切換統(tǒng)一層級之間的不同模塊。
展現(xiàn)形式有:文字 + icon,也有純icon形式,大部分是文字+icon,可以減少用戶記憶負(fù)擔(dān)。
優(yōu)點:
1.屬于拇指熱區(qū)范圍內(nèi),操作方便,用戶體驗好。
2.iOS原生系統(tǒng),開發(fā)成本低。
3.切換快速方便,用戶不會輕易迷失。
4.底部Tab欄具有很強的包容性,可以形成最基本的信息框架,然后用其他的導(dǎo)航模式來承載具體的功能和內(nèi)容,內(nèi)容曝光率高。
缺點:
1.導(dǎo)航數(shù)量有限,常見的標(biāo)簽欄導(dǎo)航最多3-5個控件,不宜超過5個,擴展性不高。
2.占用底部空間,長時間逗留頁面,沉浸感體驗不足,所以在不需要的時候隱藏底部標(biāo)簽是很聰明的做法(如文章閱讀界面)。
(圖片來自網(wǎng)絡(luò))
ui設(shè)計導(dǎo)航之底部(舵式)拓展欄
“舵式”拓展欄,為凸出底部功能,把Tab做得比較突出,入口在底部標(biāo)簽中間,兩側(cè)是其他操作按鈕,很像輪船上用來指揮的船舵,故稱為“舵式導(dǎo)航”。
優(yōu)點:
1.集中強調(diào)某一功能。
2.常用于上傳照片、視頻,分享等操作的集成式的功能。
3.提高導(dǎo)航欄的趣味性,讓用戶貢獻更多內(nèi)容。
缺點:
1.層級較深,需要用戶二次點擊才能達到目的,增加了用戶交互路徑,不適合頻繁切換。
2.隱藏功能容易被忽視,因此功能入口過多,過多會給用戶造成選擇壓力,引起用戶的反感情緒。
ui設(shè)計導(dǎo)航之頂部Tab欄
頂部導(dǎo)航欄位于頁面頂部,一般位于導(dǎo)航欄或者狀態(tài)欄下方,用作于二級導(dǎo)航,基本都以純文字的形式出現(xiàn)(避免干擾用戶瀏覽頁面核心內(nèi)容),常見的頂部導(dǎo)航欄有:固定頂部標(biāo)簽導(dǎo)航&可滑動標(biāo)簽導(dǎo)航。
優(yōu)點:
1.滑動式頂部標(biāo)簽可無限添加標(biāo)簽,可擴展性強。
2.技術(shù)上,適配簡單,減少開發(fā)成本。
3.占據(jù)空間比底部導(dǎo)航欄小,節(jié)省空間。
4.劃屏切換,簡單便捷。
缺點:
標(biāo)簽數(shù)量多,容易導(dǎo)致產(chǎn)品頁面過多,越是后面的標(biāo)簽容易被遺忘,導(dǎo)致流量遺失。
ui設(shè)計導(dǎo)航之列表式導(dǎo)航欄
列表式APP導(dǎo)航是我們app ui設(shè)計中必不可少的一個信息承載模式,列表導(dǎo)航通常用于二級頁面。一般在列表導(dǎo)航里都會有下一個層級,可以通過箭頭來告訴用戶是否有下級菜單。當(dāng)列表信息比較多的時候,可以對列表進行分類,可以通過間距和添加小標(biāo)題分組。
優(yōu)點:
1.這種導(dǎo)航結(jié)構(gòu)清晰,易于理解,冷靜高效,能夠幫助用戶快速的定位去到對應(yīng)的頁面。
2.符合用戶從上往下的閱讀習(xí)慣。
3.可擴展性強。
缺點:
1.功能切換很不方便。
2.承載信息種類單一,容易引起單調(diào)感,很難讓用戶長時間停留。
3.當(dāng)蘊含信息量龐大時,列表越長,越容易引起用戶審美疲勞,且越往下功能效率越低。
(圖片來自網(wǎng)絡(luò))
ui設(shè)計導(dǎo)航之宮格式導(dǎo)航欄
一般作為信息或平臺的入口,為產(chǎn)品或項目信息提供聚合的載體,適合承載訂閱類產(chǎn)品或眾多屬性差異非常明顯的分類信息,此類導(dǎo)航信息的呈現(xiàn)內(nèi)容比較少,但是每個項目選取的效率比較高。
優(yōu)點:
1.可以劃分多個內(nèi)容、多個模式,各個功能相互獨立,由不同團隊獨立開發(fā)每個模塊再聚合。
2.可以通過入口來進行流量的分發(fā)。
3.擴展性好。
4.用戶能夠直觀選擇自己需要的功能模塊。
缺點:
1.無法讓用戶在第一時間看到內(nèi)容,具體的信息往往隱藏在下一級界面,會增加用戶的認(rèn)知成本。
2.同時多個入口的情況下用戶選擇壓力大。
3.不同入口之間缺乏聯(lián)動性,切換不方便,用戶的操作流程多。
相信看完了小編為你介紹的這么多超級詳細(xì)的ui設(shè)計導(dǎo)航模式之后,一定可以幫助你找到更多更適合自己的設(shè)計風(fēng)格的導(dǎo)航模式哦!