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

本文將以常用的控件類型為例，分別從常見形態(tài)、適用場景、各自優(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è)問題

1. 功能的數(shù)量

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

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

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

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

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

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

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

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

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

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

3. 層級(jí)的劃分

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

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

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

二. Tab

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

1. Tab的形式

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

層級(jí)上

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

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

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

數(shù)量上

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

功能上

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

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

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

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

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