2022-9-1 ui設(shè)計(jì)分享達(dá)人
對B端產(chǎn)品架構(gòu)而言,一個(gè)合理的導(dǎo)航設(shè)計(jì)對能夠解決,對團(tuán)隊(duì)內(nèi)部:堆砌功能開發(fā)混亂;對外部用戶:找不到功能的問題,所以本篇主要總結(jié)一下如何正確選取合適的導(dǎo)航。
從產(chǎn)品結(jié)構(gòu)明確導(dǎo)航分類
B端后臺的導(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)航。
全局導(dǎo)航
表現(xiàn)為產(chǎn)品的一級導(dǎo)航,需要具有良好的穩(wěn)定性和拓展性。
提示:清晰穩(wěn)定的路徑比起少點(diǎn)擊一次更重要!
局部導(dǎo)航
局部導(dǎo)航包括:菜單欄、面包屑、選項(xiàng)卡、步驟條、文字鏈接。
特點(diǎn):1、在同一個(gè)架構(gòu)中,可以到這個(gè)節(jié)點(diǎn)的上下一級的通路;
2、有嚴(yán)格的父子級關(guān)系,局部導(dǎo)航與全局導(dǎo)航有層級關(guān)系,局部導(dǎo)航幫助用戶進(jìn)入更 加特定的頁面。
通俗而言局部導(dǎo)航依附于全局導(dǎo)航,常作為二級導(dǎo)航出現(xiàn)。
輔助導(dǎo)航
提供用戶在全局/局部導(dǎo)航不可到達(dá)的相關(guān)內(nèi)容的快捷途徑。
內(nèi)嵌導(dǎo)航
也叫上下文導(dǎo)航,常用做對頁面中的操作項(xiàng)進(jìn)行解釋;常見的有幫助引導(dǎo)鏈接等
友好導(dǎo)航
為用戶提供便利的前進(jìn)途徑,常見于新手引導(dǎo)和幫助助手的場景,在不需要時(shí)可進(jìn)行隱藏。
遠(yuǎn)程導(dǎo)航
指并不包含在產(chǎn)品結(jié)構(gòu)中的功能入口;常見于網(wǎng)站地圖、OA產(chǎn)品的工作臺等。
如何進(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ò)展
在進(jìn)行導(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ù)使用場景需求來進(jìn)行靈活添加,可以為了提升效率,在不同的導(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)可以將常用的操作功能進(jì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ù)雜,專注操作的后臺類產(chǎn)品;例如:SaaS產(chǎn)品等
優(yōu)點(diǎn):操作效率高、拓展性強(qiáng)、更容易進(jìn)行功能收納;
3. 混合導(dǎo)航
混合導(dǎo)航常用于操作很復(fù)雜,一級二級功能條目多的后臺產(chǎn)品;例如:云產(chǎn)品(二級導(dǎo)航功能超多)
優(yōu)點(diǎn):比較綜合
總結(jié):
1. 一級導(dǎo)航需要具備足夠的穩(wěn)定性和拓展性
①、清晰、穩(wěn)定的路徑比少點(diǎn)擊一次更重要
②、導(dǎo)航的排序盡量不要改變用戶的操作習(xí)慣
2. 二、三級導(dǎo)航進(jìn)行合理的分組收納
利用分組控制導(dǎo)航的顆粒度。在二級導(dǎo)航只有一個(gè)時(shí),無需設(shè)計(jì)分組
3. 判斷功能是否應(yīng)該作為全局導(dǎo)航
①、選擇相對高頻的分類,作為全局導(dǎo)航
作者:戴戴戴戴戴虎全
轉(zhuǎn)載請注明:站酷
藍(lán)藍(lán)設(shè)計(jì)( www.miumiuwan.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
②、低頻的分類,作為局部導(dǎo)航
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.miumiuwan.com