圖片來(lái)源圖蟲(chóng)：已授站長(zhǎng)之家使用

來(lái)源：海鹽社（ID：hys-ssc ）

作者：姜正

前言

一次優(yōu)秀的用戶體驗(yàn)必不可少的就是一個(gè)優(yōu)秀的導(dǎo)航設(shè)計(jì)，但往往大家總是容易忽略這一點(diǎn)！試想如果用戶在使用產(chǎn)品的時(shí)候不知道自己在哪里、該到哪里去，這種情況下會(huì)給用戶造成極差的用戶體驗(yàn)，導(dǎo)致用戶直接放棄當(dāng)前操作。所以今天和大家分享一下關(guān)于導(dǎo)航設(shè)計(jì)的匯總以及優(yōu)缺點(diǎn)的分析。

目錄

1.導(dǎo)航的定義

2.導(dǎo)航的作用

3.導(dǎo)航的種類&樣式

4.總結(jié)

1.導(dǎo)航的定義

導(dǎo)航設(shè)計(jì)的定義是：元素的組合，允許用戶在信息架構(gòu)中穿行。

簡(jiǎn)單點(diǎn)理解就是：我們從用戶的心智模型出發(fā)，結(jié)合業(yè)務(wù)目標(biāo)，對(duì)信息架構(gòu)的一個(gè)梳理，來(lái)幫助用戶完成目標(biāo)。

2.導(dǎo)航的作用

導(dǎo)航設(shè)計(jì)最大的作用就是：告訴用戶當(dāng)前在哪里，從哪里來(lái)，能到哪里去。

當(dāng)然我們還需要為用戶跳轉(zhuǎn)提供方法，并且能明確讓用戶感受到導(dǎo)航欄元素與頁(yè)面的關(guān)系，最后是表達(dá)出內(nèi)容與用戶瀏覽界面的關(guān)系。

3.導(dǎo)航的種類&樣式

a.底部導(dǎo)航欄設(shè)計(jì)

底部導(dǎo)航欄設(shè)計(jì)是我們最常見(jiàn)的導(dǎo)航模式之一，位于頁(yè)面底部，用于一級(jí)頁(yè)面當(dāng)中負(fù)責(zé)各主業(yè)務(wù)模塊的切換，一般會(huì)保持3～ 5 個(gè)標(biāo)簽，適用于頻繁切換業(yè)務(wù)模塊的產(chǎn)品。例如優(yōu)酷、豆瓣、淘寶、網(wǎng)易云音樂(lè)：

優(yōu)點(diǎn)：切換快速方便，用戶不會(huì)輕易迷失；iOS 原生系統(tǒng)，開(kāi)發(fā)成本低；屬于拇指熱區(qū)范圍內(nèi)，操作方便，用戶體驗(yàn)好。

缺點(diǎn)：導(dǎo)航數(shù)量有限，最多3～ 5 個(gè)，可擴(kuò)展性不高；占用一定的空間，沉浸式體驗(yàn)不足，且在小機(jī)型上極其容易影響顯示區(qū)域的視覺(jué)大小。

b.頂部導(dǎo)航

頂部導(dǎo)航欄位于頁(yè)面頂部，一般位于導(dǎo)航欄或者狀態(tài)欄下方，用作于二級(jí)導(dǎo)航，基本都以純文字的形式出現(xiàn)（避免干擾用戶瀏覽頁(yè)面核心內(nèi)容），常見(jiàn)的頂部導(dǎo)航欄有：固定頂部標(biāo)簽導(dǎo)航&可滑動(dòng)標(biāo)簽導(dǎo)航。例如UC頭條、LOFTER、網(wǎng)易有錢、京東金融：

優(yōu)點(diǎn)：滑動(dòng)式頂部標(biāo)簽可無(wú)限添加標(biāo)簽，可擴(kuò)展性強(qiáng)；技術(shù)上，適配簡(jiǎn)單，減少開(kāi)發(fā)成本；占據(jù)空間比底部導(dǎo)航欄小，節(jié)省空間；劃屏切換，簡(jiǎn)單便捷。

缺點(diǎn)：標(biāo)簽數(shù)量多，容易導(dǎo)致產(chǎn)品頁(yè)面過(guò)多，用戶需要耗費(fèi)大量精力不斷滑動(dòng)；越是后面的標(biāo)簽容易被遺忘，導(dǎo)致流量遺失。

c.舵式導(dǎo)航

舵式導(dǎo)航一般位于底部標(biāo)簽欄中間，以“+”號(hào) 的形式出現(xiàn)，是產(chǎn)品中需要重點(diǎn)突出的功能，一般用于UGC內(nèi)容生產(chǎn)發(fā)布。例如閑魚(yú)、微博、LOFTER、轉(zhuǎn)轉(zhuǎn)：

優(yōu)點(diǎn)：以顏色或大小的區(qū)別來(lái)展示核心，視覺(jué)沖擊力強(qiáng)，讓人更加有有點(diǎn)擊的欲望；展示效果上靈活多變，增添了交互趣味。

缺點(diǎn)：層級(jí)較深，需要用戶二次點(diǎn)擊才能到達(dá)目標(biāo)，增加了用戶的交互路徑，不適合頻繁切換；其次隱藏的功能不能太多，如果過(guò)多會(huì)給用戶造成選擇壓力，引起用戶的反感情緒。

d.側(cè)邊欄導(dǎo)航

側(cè)邊欄導(dǎo)航是除了核心功能意外的主要功能全部隱藏在側(cè)邊欄里，一般通過(guò)點(diǎn)擊左上角的 icon 彈出，左側(cè)區(qū)域現(xiàn)實(shí)導(dǎo)航中的內(nèi)容。例如小紅書(shū)、優(yōu)酷、滴墨書(shū)摘、滴滴：

優(yōu)點(diǎn)：隱藏次要功能，聚焦核心內(nèi)容；隱藏減少非核心功能，沉浸式體驗(yàn)優(yōu)秀；節(jié)省頁(yè)面空間；標(biāo)齊選項(xiàng)可擴(kuò)展性強(qiáng)。

缺點(diǎn)：其他功能使用率低；切換功能操作麻煩，交互路勁長(zhǎng)。

標(biāo)簽： 導(dǎo)航欄設(shè)計(jì) 導(dǎo)航欄設(shè)計(jì)優(yōu)化 導(dǎo)航欄設(shè)計(jì)樣式 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。