超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

B端設(shè)計(jì)必備!揭秘高效控件使用的超實(shí)用小技巧與秘籍

2024-11-1    藍(lán)藍(lán)小助手 B端ui設(shè)計(jì)文章及欣賞

以下是我在B端產(chǎn)品設(shè)計(jì)的過(guò)程中總結(jié)的一些控件使用心得,希望對(duì)你有所幫助。

在B端系統(tǒng)中,設(shè)計(jì)師免不了要和各種控件打交道,但是出于B端產(chǎn)品本身業(yè)務(wù)的復(fù)雜情況,加上不同端口設(shè)備對(duì)交互的影響,我們?cè)谑褂每丶臅r(shí)候更加需要仔細(xì)的甄別、并合理的選用,(個(gè)人認(rèn)為)使用B端控件的準(zhǔn)則,并不是越炫酷越新穎越好,有時(shí)候,能合適的解決問(wèn)題才更重要。


本文將以常用的控件類型為例,分別從常見(jiàn)形態(tài)、適用場(chǎng)景、各自優(yōu)劣等方面去對(duì)控件進(jìn)行分析和拆解,幫助你更好的作出選用決策。



一.導(dǎo)航


作為產(chǎn)品結(jié)構(gòu)把控的第一梯隊(duì),導(dǎo)航承載著對(duì)產(chǎn)品功能分發(fā)和層級(jí)交互的重要作用,幫助用戶定位到自己需要的功能。設(shè)計(jì)導(dǎo)航的時(shí)候,我們需要從業(yè)務(wù)出發(fā)去梳理功能架構(gòu)。同時(shí)需要理清楚幾個(gè)問(wèn)題


1. 功能的數(shù)量


一般來(lái)說(shuō)導(dǎo)航的功能數(shù)量會(huì)控制在7±2個(gè),太多會(huì)造成用戶的記憶負(fù)擔(dān),降低查找功能的效率。太少了說(shuō)明功能的分發(fā)效率還不夠高(或者是產(chǎn)品真的很簡(jiǎn)潔)。但由于目前B端產(chǎn)品的功能體系都比較復(fù)雜,加上不斷迭代增加的新功能,整體來(lái)說(shuō)超過(guò)9個(gè)的導(dǎo)航都很常見(jiàn),一般來(lái)說(shuō)都是10個(gè)左右,如果不通過(guò)設(shè)計(jì)手段加以優(yōu)化,很容易造成較差的體驗(yàn)。





設(shè)計(jì)小技巧
在功能數(shù)量多的情況下,為了提升功能查找的效率,就會(huì)對(duì)導(dǎo)航的排布做一些必要的調(diào)整

1. 增加分類,通過(guò)相似性原則把同類的功能靠近,使其層級(jí)清晰
2. 縮短功能描述字符,減少理解成本。減輕記憶負(fù)擔(dān)。



2. 導(dǎo)航的位置

常見(jiàn)的導(dǎo)航位置多見(jiàn)于頂部或者左側(cè)位置,首先在選用兩者之前我們得先知道兩者的區(qū)別



  • 功能的可拓展性:側(cè)邊導(dǎo)航的承載性顯然更好,后續(xù)產(chǎn)品迭代也更方便增加入口。而相比之下頂部導(dǎo)航的可外露功能較少,可拓展性較弱。


  • 操作效率:B端用戶使用產(chǎn)品的時(shí)候往往目的性是很強(qiáng)的,且基本上都有固定的操作流程,側(cè)邊導(dǎo)航的縱向排布更為緊湊,閱讀路徑更短,識(shí)別速度更快,更利于用戶高頻切換,頂部導(dǎo)航雖然也有二級(jí)菜單,但相比之下操作效率是比較低的。


  • 適用場(chǎng)景:大多數(shù)B端產(chǎn)品都會(huì)選擇側(cè)邊導(dǎo)航,但是在一些平臺(tái)體系化的官網(wǎng)都會(huì)選擇頂部導(dǎo)航,將產(chǎn)品矩陣放置在下拉菜單中,而頁(yè)面本身則突出信息展示和介紹。


設(shè)計(jì)小技巧

側(cè)邊導(dǎo)航和頂部導(dǎo)航并不是非此即彼,還可以結(jié)合起來(lái)搭配使用,在一些大平臺(tái)的產(chǎn)品矩陣中,頂部導(dǎo)航和側(cè)邊導(dǎo)航會(huì)相輔相成,并加入搜索功能,輔助用戶更快速的找到所需產(chǎn)品。


3. 層級(jí)的劃分

目前比較常見(jiàn)的產(chǎn)品導(dǎo)航中多為一級(jí)或一二級(jí)。早期的產(chǎn)品中還能見(jiàn)到很多hover出現(xiàn)的二級(jí)三級(jí)菜單,現(xiàn)在已經(jīng)很少見(jiàn)到了,因?yàn)檫@種hover出現(xiàn)的不確定性和帶給用戶的試錯(cuò)率太高,容易造成誤操作,引起用戶的挫敗心理。而且層級(jí)太深的話也不利于用戶對(duì)于該功能的感知,所以逐漸的被淘汰。



設(shè)計(jì)小技巧

設(shè)計(jì)導(dǎo)航需要注意盡量減少層級(jí)的嵌套,多采用直觀、平鋪式的設(shè)計(jì),必要時(shí)增加分類輔助理解。






二. Tab

如果說(shuō)導(dǎo)航是產(chǎn)品進(jìn)行功能分發(fā)的重要途徑,那么功能內(nèi)的內(nèi)容劃分就是靠Tab來(lái)進(jìn)行把關(guān)了。Tab切換常用用于信息劃分,比如說(shuō)在規(guī)定區(qū)域內(nèi)信息無(wú)法全部展示時(shí),會(huì)通過(guò)tab的形式前置凸顯該頁(yè)面的內(nèi)容,或者是信息比較混雜,也會(huì)用到tab進(jìn)行劃分類別,核心都是為了幫助用戶快速定位所需信息。


1. Tab的形式


下圖是我整理的B端較為常見(jiàn)的四種Tab樣式,不知道大家有沒(méi)有想過(guò),同樣是分類信息,這四種tab使用起來(lái)究竟有什么區(qū)別。



層級(jí)上


其實(shí)這4種tab都可以單獨(dú)拿來(lái)使用互不影響,但是在層級(jí)復(fù)雜涉及到導(dǎo)航嵌套導(dǎo)航的時(shí)候,我們就需要去區(qū)分他們之間的展示關(guān)系,一般來(lái)說(shuō)1號(hào)導(dǎo)航的層級(jí)是最高的(管的最寬),在產(chǎn)品的頂部導(dǎo)航和頁(yè)面中承擔(dān)比較大范圍內(nèi)容的切換。他也常和2號(hào)進(jìn)行搭配使用,2號(hào)層級(jí)要低一些。一般會(huì)用在更為細(xì)化的分類。



3號(hào)準(zhǔn)確來(lái)說(shuō)其實(shí)屬于分段篩選器(樣式會(huì)有區(qū)別),但是我們經(jīng)常也會(huì)把它當(dāng)作一個(gè)小的tab去使用,常用在圖表模塊中對(duì)內(nèi)容進(jìn)行不同維度的切換。相比于1/2號(hào)來(lái)說(shuō),他們更節(jié)省縱向空間,且更加針對(duì)具體模塊,操控范圍較窄一些



4號(hào)其實(shí)在移動(dòng)端更為常見(jiàn),單獨(dú)使用或是和1號(hào)搭配起來(lái)用于細(xì)分品類的切換,或者是大批量的篩選條件中使用




數(shù)量上


不同的場(chǎng)景下去選用Tab的時(shí)候,我們也需要兼顧考慮數(shù)量和具體功能,比如說(shuō)124導(dǎo)航能承載的功能一般比較多(2-6個(gè)),但是3如果放置4個(gè)以上的話就會(huì)略顯擁擠(一般2-4個(gè))。

功能上

相比起3號(hào)來(lái)說(shuō),4號(hào)在一些特殊場(chǎng)景下它會(huì)有更好的一個(gè)拓展性,比如說(shuō)在日期切換的時(shí)候,4號(hào)還可以通過(guò)下拉的方式賦予這個(gè)tab更豐富的值。比較常用的就是在日期篩選的時(shí)候通過(guò)自定義下拉出具體的日期?;蛘呦聢D所示選擇具體的季度。







除了切換信息之外,2號(hào)tab還帶有標(biāo)簽關(guān)閉的特殊功能,其實(shí)最開(kāi)始也是從瀏覽器的標(biāo)簽頁(yè)樣式演變過(guò)來(lái),所以保留了關(guān)閉的交互,當(dāng)產(chǎn)品內(nèi)置需要打開(kāi)多個(gè)頁(yè)面進(jìn)行協(xié)同對(duì)比的時(shí)候,標(biāo)簽tab就是個(gè)不錯(cuò)的選擇。它支持不打斷當(dāng)前操作流程的情況下用戶去新開(kāi)一個(gè)頁(yè)面,同時(shí)方便返回當(dāng)前頁(yè)。




設(shè)計(jì)小技巧

除了以上說(shuō)到的層級(jí)、功能、數(shù)量之外,我們是否選用一個(gè)tab樣式還需要考慮到具體頁(yè)面的設(shè)計(jì),比如說(shuō)顏色和整體UI風(fēng)格

舉一個(gè)小例子,在之前設(shè)計(jì)一個(gè)頁(yè)面的具體模塊的Tab切換時(shí),其實(shí)1、3、4都可以使用,但仔細(xì)斟酌一下,3號(hào)的底色和邊界框加在模塊的底色上,會(huì)讓整體的嵌套感過(guò)深(我這里只粗略示例,實(shí)際數(shù)據(jù)中觀感會(huì)更明顯),而四號(hào)的分裂感又比較強(qiáng),相比之下,1號(hào)的樣式更為簡(jiǎn)潔開(kāi)放,對(duì)于較寬的頁(yè)面也會(huì)有更好的包容性。




作者:宋晚一
鏈接:https://www.zcool.com.cn/article/ZMTQ4Mzg4MA==.html
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

image.png

藍(lán)藍(lán)設(shè)計(jì)(www.miumiuwan.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。

image.png

關(guān)鍵詞:UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司高端網(wǎng)站設(shè)計(jì)公司銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開(kāi)發(fā)、軟件wpf開(kāi)發(fā)、軟件vue開(kāi)發(fā)

分享本文至:

日歷

鏈接

個(gè)人資料

存檔