在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)航模式哦!