2024-11-1 藍藍小助手
以下是我在B端產(chǎn)品設(shè)計的過程中總結(jié)的一些控件使用心得，希望對你有所幫助。
在B端系統(tǒng)中，設(shè)計師免不了要和各種控件打交道，但是出于B端產(chǎn)品本身業(yè)務(wù)的復雜情況，加上不同端口設(shè)備對交互的影響，我們在使用控件的時候更加需要仔細的甄別、并合理的選用，（個人認為）使用B端控件的準則，并不是越炫酷越新穎越好，有時候，能合適的解決問題才更重要。
本文將以常用的控件類型為例，分別從常見形態(tài)、適用場景、各自優(yōu)劣等方面去對控件進行分析和拆解，幫助你更好的作出選用決策。
作為產(chǎn)品結(jié)構(gòu)把控的第一梯隊，導航承載著對產(chǎn)品功能分發(fā)和層級交互的重要作用，幫助用戶定位到自己需要的功能。設(shè)計導航的時候，我們需要從業(yè)務(wù)出發(fā)去梳理功能架構(gòu)。同時需要理清楚幾個問題
一般來說導航的功能數(shù)量會控制在7±2個，太多會造成用戶的記憶負擔，降低查找功能的效率。太少了說明功能的分發(fā)效率還不夠高（或者是產(chǎn)品真的很簡潔）。但由于目前B端產(chǎn)品的功能體系都比較復雜，加上不斷迭代增加的新功能，整體來說超過9個的導航都很常見，一般來說都是10個左右，如果不通過設(shè)計手段加以優(yōu)化，很容易造成較差的體驗。
設(shè)計小技巧
在功能數(shù)量多的情況下，為了提升功能查找的效率，就會對導航的排布做一些必要的調(diào)整
1. 增加分類，通過相似性原則把同類的功能靠近，使其層級清晰
2. 縮短功能描述字符，減少理解成本。減輕記憶負擔。
常見的導航位置多見于頂部或者左側(cè)位置，首先在選用兩者之前我們得先知道兩者的區(qū)別
設(shè)計小技巧
側(cè)邊導航和頂部導航并不是非此即彼，還可以結(jié)合起來搭配使用，在一些大平臺的產(chǎn)品矩陣中，頂部導航和側(cè)邊導航會相輔相成，并加入搜索功能，輔助用戶更快速的找到所需產(chǎn)品。
目前比較常見的產(chǎn)品導航中多為一級或一二級。早期的產(chǎn)品中還能見到很多hover出現(xiàn)的二級三級菜單，現(xiàn)在已經(jīng)很少見到了，因為這種hover出現(xiàn)的不確定性和帶給用戶的試錯率太高，容易造成誤操作，引起用戶的挫敗心理。而且層級太深的話也不利于用戶對于該功能的感知，所以逐漸的被淘汰。
設(shè)計小技巧
設(shè)計導航需要注意盡量減少層級的嵌套，多采用直觀、平鋪式的設(shè)計，必要時增加分類輔助理解。
如果說導航是產(chǎn)品進行功能分發(fā)的重要途徑，那么功能內(nèi)的內(nèi)容劃分就是靠Tab來進行把關(guān)了。Tab切換常用用于信息劃分，比如說在規(guī)定區(qū)域內(nèi)信息無法全部展示時，會通過tab的形式前置凸顯該頁面的內(nèi)容，或者是信息比較混雜，也會用到tab進行劃分類別，核心都是為了幫助用戶快速定位所需信息。
下圖是我整理的B端較為常見的四種Tab樣式，不知道大家有沒有想過，同樣是分類信息，這四種tab使用起來究竟有什么區(qū)別。
其實這4種tab都可以單獨拿來使用互不影響，但是在層級復雜涉及到導航嵌套導航的時候，我們就需要去區(qū)分他們之間的展示關(guān)系，一般來說1號導航的層級是最高的（管的最寬），在產(chǎn)品的頂部導航和頁面中承擔比較大范圍內(nèi)容的切換。他也常和2號進行搭配使用，2號層級要低一些。一般會用在更為細化的分類。
3號準確來說其實屬于分段篩選器（樣式會有區(qū)別），但是我們經(jīng)常也會把它當作一個小的tab去使用，常用在圖表模塊中對內(nèi)容進行不同維度的切換。相比于1/2號來說，他們更節(jié)省縱向空間，且更加針對具體模塊，操控范圍較窄一些
4號其實在移動端更為常見，單獨使用或是和1號搭配起來用于細分品類的切換，或者是大批量的篩選條件中使用
不同的場景下去選用Tab的時候，我們也需要兼顧考慮數(shù)量和具體功能，比如說124導航能承載的功能一般比較多（2-6個），但是3如果放置4個以上的話就會略顯擁擠（一般2-4個）。
相比起3號來說，4號在一些特殊場景下它會有更好的一個拓展性，比如說在日期切換的時候，4號還可以通過下拉的方式賦予這個tab更豐富的值。比較常用的就是在日期篩選的時候通過自定義下拉出具體的日期。或者下圖所示選擇具體的季度。
除了切換信息之外，2號tab還帶有標簽關(guān)閉的特殊功能，其實最開始也是從瀏覽器的標簽頁樣式演變過來，所以保留了關(guān)閉的交互，當產(chǎn)品內(nèi)置需要打開多個頁面進行協(xié)同對比的時候，標簽tab就是個不錯的選擇。它支持不打斷當前操作流程的情況下用戶去新開一個頁面，同時方便返回當前頁。
設(shè)計小技巧
除了以上說到的層級、功能、數(shù)量之外，我們是否選用一個tab樣式還需要考慮到具體頁面的設(shè)計，比如說顏色和整體UI風格
舉一個小例子，在之前設(shè)計一個頁面的具體模塊的Tab切換時，其實1、3、4都可以使用，但仔細斟酌一下，3號的底色和邊界框加在模塊的底色上，會讓整體的嵌套感過深（我這里只粗略示例，實際數(shù)據(jù)中觀感會更明顯），而四號的分裂感又比較強，相比之下，1號的樣式更為簡潔開放，對于較寬的頁面也會有更好的包容性。
藍藍設(shè)計(www.payeee.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan。
關(guān)鍵詞：UI咨詢、UI設(shè)計服務(wù)公司、軟件界面設(shè)計公司、界面設(shè)計公司、UI設(shè)計公司、UI交互設(shè)計公司、數(shù)據(jù)可視化設(shè)計公司、用戶體驗公司、高端網(wǎng)站設(shè)計公司、銀行金融軟件UI界面設(shè)計、能源及監(jiān)控軟件UI界面設(shè)計、氣象行業(yè)UI界面設(shè)計、軌道交通界面設(shè)計、地理信息系統(tǒng)GIS UI界面設(shè)計、航天軍工軟件UI界面設(shè)計、醫(yī)療行業(yè)軟件UI界面設(shè)計、教育行業(yè)軟件UI界面設(shè)計、企業(yè)信息化UI界面設(shè)計、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)
藍藍設(shè)計的小編 http://www.payeee.cn