用4個(gè)章節(jié),幫你快速讀懂B端全局導(dǎo)航設(shè)計(jì)
你是否有過(guò)這樣的體驗(yàn),進(jìn)入龐大且陌生的火車(chē)站后迷失方向:從哪里進(jìn)站?在哪里安檢?取票窗口在哪?這時(shí)你迫切需要一個(gè)準(zhǔn)確的導(dǎo)視牌,幫助你在建筑空間中定位,并找到前進(jìn)方向。
在軟件系統(tǒng)中用戶(hù)也會(huì)面臨類(lèi)似的問(wèn)題。帶著目標(biāo)進(jìn)入系統(tǒng)后,用戶(hù)會(huì)通過(guò)網(wǎng)頁(yè)內(nèi)散布著的信息氣味,去尋覓目標(biāo)功能入口,而提供這些信息和入口的便是導(dǎo)航系統(tǒng)。它解決了用戶(hù)"我在哪""到哪里去"的問(wèn)題,并為用戶(hù)提供移動(dòng)方式即頁(yè)面間跳轉(zhuǎn)。
本文將基于 B 端場(chǎng)景的全局導(dǎo)航展開(kāi),歸納總結(jié)相關(guān)概念并提出設(shè)計(jì)建議。
一、為什么需要全局導(dǎo)航
根據(jù)導(dǎo)航的觸達(dá)范圍,在 B 端設(shè)計(jì)中常使用的導(dǎo)航可分六種類(lèi)型:
其中全局導(dǎo)航聯(lián)結(jié)了系統(tǒng)的所有板塊,從系統(tǒng)整體為用戶(hù)提供定位與導(dǎo)航,允許用戶(hù)在系統(tǒng)淺層進(jìn)行橫向移動(dòng)。全局導(dǎo)航是用戶(hù)使用網(wǎng)站功能的第一觸點(diǎn),和首頁(yè)內(nèi)容一起塑造了用戶(hù)對(duì)網(wǎng)站的第一印象。全局導(dǎo)航對(duì)用戶(hù)體驗(yàn)的影響可以歸納為以下幾點(diǎn):
- 呈現(xiàn)信息架構(gòu):構(gòu)建用戶(hù)對(duì)網(wǎng)站功能和內(nèi)容的整體認(rèn)知。
- 提供關(guān)于當(dāng)前位置的線(xiàn)索:幫助用戶(hù)了解當(dāng)前位置與可前進(jìn)路徑。
- 提供可訪(fǎng)問(wèn)入口:幫助用戶(hù)快速抵達(dá)目標(biāo)頁(yè)面。
- 提供一致性的產(chǎn)品體驗(yàn):全局導(dǎo)航通常是所有頁(yè)面的共同元素,可以強(qiáng)化品牌形象。
二、全局導(dǎo)航的基礎(chǔ)樣式
1. 導(dǎo)航菜單的構(gòu)成
導(dǎo)航菜單由多個(gè)菜單項(xiàng)集合而成。
- 容器:承載導(dǎo)航菜單內(nèi)容的容器,容器顏色通常與頁(yè)面背景色形成對(duì)比。
- 選項(xiàng)內(nèi)容:通過(guò)簡(jiǎn)短文本表述菜單選項(xiàng)選項(xiàng),也可以采用圖標(biāo)+文本的形式。
- 交互狀態(tài):normal、hover、press、disable,點(diǎn)擊菜單熱區(qū)后跳轉(zhuǎn)至對(duì)應(yīng)的頁(yè)面。
在頁(yè)面瀏覽過(guò)程中,用戶(hù)的瀏覽動(dòng)線(xiàn)是從左上到右下進(jìn)行掃視,因此全局導(dǎo)航普遍被放置在頁(yè)面頂部,或者頁(yè)面左側(cè),由此產(chǎn)生了常用的幾種全局導(dǎo)航菜單范式。
2. 水平導(dǎo)航菜單
導(dǎo)航菜單放置于頁(yè)面頂欄,橫向水平延展。其中選項(xiàng)優(yōu)先級(jí)從左到右遞減。
優(yōu)點(diǎn)
- 導(dǎo)航欄面積較小,有較大屏幕空間用于內(nèi)容展示。
- 頁(yè)面簡(jiǎn)潔,選項(xiàng)數(shù)量有限,減輕用戶(hù)的認(rèn)知負(fù)載。
- 在長(zhǎng)頁(yè)面中,導(dǎo)航上下布局與用戶(hù)瀏覽方向一致(縱向滾動(dòng)查看),沉浸感更強(qiáng)。
缺點(diǎn)
- 導(dǎo)航菜單間切換較為不便。
- 若菜單選項(xiàng)名稱(chēng)過(guò)長(zhǎng)、數(shù)量過(guò)多會(huì)受到橫向尺寸限制。
- 導(dǎo)航菜單橫向排布,用戶(hù)掃視效率低。
適用于:導(dǎo)航菜單數(shù)量較少的場(chǎng)景;內(nèi)容向下延展的長(zhǎng)頁(yè)面,如官網(wǎng)頁(yè)面
3. 垂直導(dǎo)航菜單
導(dǎo)航菜單放置于頁(yè)面左側(cè)欄,縱向垂直延展。其中選項(xiàng)優(yōu)先級(jí)從上到下遞減。
優(yōu)點(diǎn)
- 用戶(hù)可以快速在導(dǎo)航菜單之間切換。
- 充足的縱向空間可以容納更多選項(xiàng),選項(xiàng)過(guò)多時(shí)可以對(duì)一級(jí)導(dǎo)航進(jìn)行分類(lèi)。
- 縱向排布的菜單內(nèi)容,方便用戶(hù)快速掃視并識(shí)別。
缺點(diǎn)
- 導(dǎo)航欄面積較大,用于內(nèi)容展示的區(qū)域變小。
- 視覺(jué)突出,瀏覽過(guò)程中打斷感強(qiáng)。
- 適用于:導(dǎo)航項(xiàng)較多、功能屬性強(qiáng)的場(chǎng)景,如大部分 toB 網(wǎng)頁(yè)。
4. 混合式導(dǎo)航菜單
同時(shí)使用水平導(dǎo)航菜單和垂直導(dǎo)航菜單。通常頂欄為一級(jí)導(dǎo)航,承載全局類(lèi)目和功能;側(cè)邊欄為二級(jí)導(dǎo)航,提供具體網(wǎng)站架構(gòu)和功能。
優(yōu)點(diǎn)
- 外顯一級(jí)、二級(jí)導(dǎo)航,提升網(wǎng)站結(jié)構(gòu)可見(jiàn)性。
- 可以容納更多信息層級(jí)。
- 充分利用屏幕空間,信息密度高 。
缺點(diǎn)
- 菜單面積較大,視覺(jué)復(fù)雜度高。
- 用戶(hù)瀏覽動(dòng)線(xiàn)復(fù)雜,需要合理設(shè)計(jì)架構(gòu)。
適合量級(jí)大,復(fù)雜度高的的系統(tǒng),如各種云服務(wù)后臺(tái)。
三、全局導(dǎo)航的拓展能力
1. 彈出
為了容納更多的信息量級(jí),hover 在一級(jí)導(dǎo)航下可以彈出二級(jí)菜單。
頂部導(dǎo)航/側(cè)邊導(dǎo)航的不同彈出方式:
當(dāng)二級(jí)菜單內(nèi)容過(guò)多時(shí),也可以像各種云服務(wù)網(wǎng)站一樣彈出站點(diǎn)地圖。但需要對(duì)二級(jí)導(dǎo)航進(jìn)行合理分類(lèi)、規(guī)劃,否則影響用戶(hù)信息搜尋速度。
2. 搜索
當(dāng)二級(jí)導(dǎo)航過(guò)多時(shí),增加搜索功能可以幫助用戶(hù)更快速觸達(dá)入口。
四、設(shè)計(jì)建議
用戶(hù)使用導(dǎo)航菜單是一個(gè)信息尋覓的過(guò)程,包括信號(hào)捕獲、行為實(shí)施、反饋與評(píng)估等流程。在系統(tǒng)設(shè)計(jì)時(shí)需要注意全局導(dǎo)航的可用性,確保用戶(hù)快速找到目標(biāo)入口,提高系統(tǒng)使用效率。本環(huán)節(jié)將從導(dǎo)航使用體驗(yàn)出發(fā),對(duì)全局導(dǎo)航的設(shè)計(jì)要點(diǎn)進(jìn)行歸納總結(jié)。
全局要有足夠的視覺(jué)權(quán)重,默認(rèn)折疊全局導(dǎo)航會(huì)使用戶(hù)難以發(fā)現(xiàn)入口。一般默認(rèn)側(cè)邊欄展開(kāi),不需要時(shí)收起。
保持結(jié)構(gòu)簡(jiǎn)潔,若導(dǎo)航層級(jí)過(guò)深(如三級(jí)導(dǎo)航及以上)可見(jiàn)性將大大降低。
控制水平菜單選項(xiàng)數(shù)量,避免過(guò)長(zhǎng)溢出,同時(shí)需要考慮未來(lái)業(yè)務(wù)的可拓展性。
保證可讀易于掃視。菜單選項(xiàng)名稱(chēng)保持辨識(shí)度,避免大量使用重復(fù)文本。
準(zhǔn)確映射內(nèi)容,跳轉(zhuǎn)頁(yè)面的可預(yù)見(jiàn)性,采用易于理解和識(shí)別的名稱(chēng)/圖標(biāo)。
五、小結(jié)
全局導(dǎo)航是 B 端系統(tǒng)中不可或缺的一環(huán),目前已經(jīng)有非常成熟的設(shè)計(jì)解決方案。水平菜單和垂直菜單都很大程度上平衡了界面簡(jiǎn)潔和功能實(shí)用,在 B 端系統(tǒng)得到廣泛應(yīng)用。
在系統(tǒng)設(shè)計(jì)前期,需要根據(jù)內(nèi)容整體框架和頁(yè)面布局,選擇合適的導(dǎo)航菜單類(lèi)型。在全局導(dǎo)航的具體設(shè)計(jì)中,則需要著重考慮提高菜單選項(xiàng)的可見(jiàn)性和用戶(hù)使用效率。
最后,用戶(hù)的交互行為不僅依賴(lài)當(dāng)下的界面外觀和內(nèi)容,還依賴(lài)用戶(hù)的先驗(yàn)知識(shí)和使用經(jīng)驗(yàn),因此優(yōu)秀的導(dǎo)航系統(tǒng)應(yīng)該與用戶(hù)的心智模型相匹配。
作者:應(yīng)謀鬼計(jì)
想了解更多網(wǎng)站技術(shù)的內(nèi)容,請(qǐng)?jiān)L問(wèn):網(wǎng)站技術(shù)
本文來(lái)源:http://www.sonygallery.com.cn/seodongtai/19153.html