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

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

一.導(dǎo)航

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

1. 功能的數(shù)量

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

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

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

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

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

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

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

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

設(shè)計小技巧

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

3. 層級的劃分

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

設(shè)計小技巧

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

二. Tab

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

1. Tab的形式

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

層級上

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

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

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

數(shù)量上

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

功能上

相比起3號來說，4號在一些特殊場景下它會有更好的一個拓展性，比如說在日期切換的時候，4號還可以通過下拉的方式賦予這個tab更豐富的值。比較常用的就是在日期篩選的時候通過自定義下拉出具體的日期?；蛘呦聢D所示選擇具體的季度。

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

設(shè)計小技巧

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

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