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