如何設(shè)計(jì)合理的B端導(dǎo)航?先學(xué)會(huì)從產(chǎn)品架構(gòu)入手
對一個(gè)B端產(chǎn)品來說,合理的導(dǎo)航設(shè)計(jì)是非常重要的。本篇文章就從導(dǎo)航分類、如何合理的選擇導(dǎo)航以及如何靈活使用導(dǎo)航這三部分說清楚,該如何選擇合適的B端導(dǎo)航,感興趣的朋友快來看看吧。
Halo,這里是設(shè)計(jì)夾,今天為大家分享的是「B端導(dǎo)航」。本篇主要總結(jié)一下如何正確選取合適的B端導(dǎo)航。
對B端產(chǎn)品架構(gòu)而言,一個(gè)合理的導(dǎo)航設(shè)計(jì)能夠解決多方面問題。
對團(tuán)隊(duì)內(nèi)部:解決堆砌功能開發(fā)混亂;對外部用戶:解決找不到功能的問題。所以本篇從產(chǎn)品結(jié)構(gòu)、使用場景等方面總結(jié)如何選取合適的導(dǎo)航。
一、從產(chǎn)品結(jié)構(gòu)明確導(dǎo)航分類
B端后臺(tái)的導(dǎo)航大類從產(chǎn)品架構(gòu)層面來講可以分為:全局導(dǎo)航(頂部、側(cè)邊、混合)、局部導(dǎo)航(菜單欄、面包屑、選項(xiàng)卡、步驟條、文字鏈接)、輔助導(dǎo)航、內(nèi)嵌導(dǎo)航、友好導(dǎo)航和遠(yuǎn)程導(dǎo)航。
1. 全局導(dǎo)航
表現(xiàn)為產(chǎn)品的一級導(dǎo)航,需要具有良好的穩(wěn)定性和拓展性。提示:清晰穩(wěn)定的路徑比少點(diǎn)擊一次更重要!
2. 局部導(dǎo)航
局部導(dǎo)航包括:菜單欄、面包屑、選項(xiàng)卡、步驟條、文字鏈接。
局部導(dǎo)航在同一個(gè)架構(gòu)中,可以到這個(gè)節(jié)點(diǎn)上下一級的通路;有嚴(yán)格的父子級關(guān)系,局部導(dǎo)航與全局導(dǎo)航有層級關(guān)系,幫助用戶進(jìn)入特定頁面。
通常來說局部導(dǎo)航依附于全局導(dǎo)航,常作為二級導(dǎo)航出現(xiàn)。
3. 輔助導(dǎo)航
提供用戶在全局/局部導(dǎo)航不可到達(dá)的相關(guān)內(nèi)容的快捷途徑。
4. 內(nèi)嵌導(dǎo)航
也叫上下文導(dǎo)航,常用做對頁面中的操作項(xiàng)進(jìn)行解釋,例如幫助引導(dǎo)鏈接等。
5. 友好導(dǎo)航
為用戶提供便利的前進(jìn)途徑,常見于新手引導(dǎo)、幫助助手等場景,在不需要時(shí)可進(jìn)行隱藏。
6. 遠(yuǎn)程導(dǎo)航
指不包含在產(chǎn)品結(jié)構(gòu)中的功能入口,常見于網(wǎng)站地圖、OA產(chǎn)品的工作臺(tái)等。
二、如何進(jìn)行合適的導(dǎo)航選擇
1. 保證產(chǎn)品結(jié)構(gòu)的穩(wěn)定性
B端產(chǎn)品通常情況下都是復(fù)雜的,對用戶來說具備一定的使用門檻和學(xué)習(xí)成本。
所以導(dǎo)航首先要保證產(chǎn)品架構(gòu)的穩(wěn)定性,同時(shí)保證交互操作路徑符合用戶操作習(xí)慣。重點(diǎn):不可為了追求少一次點(diǎn)擊而隨便進(jìn)行更改!
2. 便于后續(xù)擴(kuò)展
在導(dǎo)航選擇時(shí)需要考慮到后續(xù)產(chǎn)品的發(fā)展情況,在保證產(chǎn)品結(jié)構(gòu)穩(wěn)定性的前提下,為后續(xù)的功能擴(kuò)展打好基礎(chǔ)。
3. 操作清晰、易懂
在多層級的導(dǎo)航中要保證每一層級導(dǎo)航的視覺反饋清晰、明確。
4. 靈活適應(yīng)
導(dǎo)航的功能選項(xiàng)可以根據(jù)使用場景的需求靈活添加,可以為了提升效率,在不同的導(dǎo)航選項(xiàng)下出現(xiàn)相同的功能入口。
5. 保持一致的交互規(guī)范
相同類型的導(dǎo)航控件,交互樣式要保持一致。例如,飛書面包屑的文字交互樣式和文字鏈接的交互樣式就做出了明顯的區(qū)分。
6. 可不遵循層級關(guān)系
根據(jù)導(dǎo)航的定義而言,導(dǎo)航就是對信息進(jìn)行分類,引導(dǎo)用戶完成操作。我們可以根據(jù)用戶反饋和數(shù)據(jù)埋點(diǎn),將常用的操作功能前置,打破層級約束,實(shí)現(xiàn)對用戶的操作提效。
三、根據(jù)場景,靈活使用導(dǎo)航
1. 頂部導(dǎo)航
頂部導(dǎo)航常用于官網(wǎng)類結(jié)構(gòu)簡單的產(chǎn)品。
優(yōu)點(diǎn):節(jié)省空間、視覺干擾小,有沉浸式使用體驗(yàn);
缺點(diǎn):結(jié)構(gòu)簡單,拓展性低。
2. 側(cè)邊導(dǎo)航
側(cè)邊導(dǎo)航常用于操作比較復(fù)雜,專注操作的后臺(tái)類產(chǎn)品,例如SaaS產(chǎn)品等。
優(yōu)點(diǎn):操作效率高、拓展性強(qiáng)、更容易進(jìn)行功能收納。
3. 混合導(dǎo)航
混合導(dǎo)航常用于操作很復(fù)雜,一級二級功能條目多的后臺(tái)產(chǎn)品。例如云產(chǎn)品(二級導(dǎo)航功能超多)。
優(yōu)點(diǎn):比較綜合。
四、最后
最后對如何選擇B端導(dǎo)航進(jìn)行三點(diǎn)總結(jié):
- 一級導(dǎo)航需要足夠的穩(wěn)定性和拓展性:清晰、穩(wěn)定的路徑比少點(diǎn)擊一次更重要;導(dǎo)航的排序盡量不要改變用戶的操作習(xí)慣。
- 二、三級導(dǎo)航要合理分組收納:利用分組控制導(dǎo)航的顆粒度,在二級導(dǎo)航只有一個(gè)時(shí),無需分組。
- 判斷功能是否應(yīng)該作為全局導(dǎo)航:選擇相對高頻的分類,作為全局導(dǎo)航;低頻的分類,作為局部導(dǎo)航。
專欄作家
作者:Clippp,微信公眾號:Clip設(shè)計(jì)夾。每周精選設(shè)計(jì)文章,專注分享關(guān)于產(chǎn)品、交互、UI視覺上的設(shè)計(jì)思考。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。
題圖來自 Unsplash,基于CC0協(xié)議。
該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。儲(chǔ)空間服務(wù)。
- 目前還沒評論,等你發(fā)揮!