編輯導(dǎo)語：對(duì)于B端控件設(shè)計(jì)，你的了解程度是多少呢？控件可以讓用戶自然、有效地完成系統(tǒng)功能的使用本文作者介紹了常規(guī)的B端控件設(shè)計(jì)，希望對(duì)你設(shè)計(jì)B端控件有所幫助，我們一起來看下吧。

一、B端基礎(chǔ)控件的認(rèn)識(shí)

控件一詞，直譯的話可以翻譯成 “用來控制的元件”，是我們對(duì) B 端系統(tǒng)進(jìn)行信息錄入、更改、操作的元素。讓用戶可以自然、有效地完成系統(tǒng)功能的使用，正確使用控件元素是必要的基礎(chǔ)。

控件包含的類型、細(xì)節(jié)、規(guī)范非常多，我們先來解釋一下，常見的主流控件都有哪些。

第一，按鈕類控件，在 UI 界面中應(yīng)用最多的控件類型，也是理解成本最低的元素。

但是，按鈕并不是只有一個(gè)矩形框中間放文字而已，還有多種細(xì)節(jié)的變體。包括但不局限于圓形、前置圖標(biāo)、呈現(xiàn)加載進(jìn)程等，標(biāo)簽控件本質(zhì)上也是按鈕的一種。

第二，表單類控件，表單是用來采集信息的控件。比如我們?nèi)ャy行辦理業(yè)務(wù)，就會(huì)讓你填寫一張相應(yīng)的表單，里面會(huì)收集各種不同的信息。

表單類的控件，就是都要根據(jù)我們想要采集的數(shù)據(jù)，以對(duì)應(yīng)的樣式、交互呈現(xiàn)給用戶。比如文本輸入框、單選、復(fù)選、下拉菜單、級(jí)聯(lián)選擇、滑動(dòng)條等等。

第三，時(shí)間選擇器，即選擇某一點(diǎn)或某一段時(shí)間的控件。嚴(yán)格來說，它也是表單控件中的一種，之所以單獨(dú)拿出來講，是因?yàn)樗撬斜韱慰丶凶顝?fù)雜的一類。

時(shí)間選擇期可以選擇日期、時(shí)、分、秒，也可以選擇一段時(shí)間，包含大量的條件和狀態(tài)判斷。

第四，面包屑控件，可以理解成是步驟或?qū)蛹?jí)的表現(xiàn)控件，直觀的反應(yīng)當(dāng)前頁面的位置，可以進(jìn)行快速的切換和返回。

第五，頁碼控件，在通過列表呈現(xiàn)數(shù)據(jù)項(xiàng)目的時(shí)候，往往一頁是展示不完的，所以我們會(huì)將它切割成若干不同的頁面，于是就會(huì)使用分頁控件幫助用戶進(jìn)行頁面的跳轉(zhuǎn)。

第六，導(dǎo)航欄，即 B 端內(nèi)容模塊的導(dǎo)航控件，通過導(dǎo)航欄快速切換到不同的模塊。主流的B端項(xiàng)目，都會(huì)使用側(cè)邊導(dǎo)航的形式，也有少部分項(xiàng)目會(huì)使用傳統(tǒng)項(xiàng)目的頂部導(dǎo)航設(shè)計(jì)。

第七，開關(guān)，即對(duì)某判斷事件進(jìn)行是或否的控制元素，和手機(jī)中我們使用的開關(guān)功能一致。

第八，分頁選擇控件，英文是 Tabs，在我的用法里從來不把 Tab 直接翻譯成 “標(biāo)簽” 和英文 Tag 沖突。它的功能即切換對(duì)應(yīng)內(nèi)容區(qū)域的控件，和手機(jī)分頁器一樣。

第九，提醒類控件，用來提示、警示用戶的一系列控件類型。包含類似警告彈窗、強(qiáng)提示、氣泡、側(cè)邊提示欄等等。

以上就是我們?cè)谠O(shè)計(jì) B 端中常見的控件類型，有一個(gè)基本的認(rèn)識(shí)，那么下面就分別講解它們?cè)O(shè)計(jì)的要點(diǎn)，以及常用的參數(shù)特征。

二、按鈕的設(shè)計(jì)要點(diǎn)

1. 按鈕的尺寸

按鈕是整個(gè) UI 中最基礎(chǔ)的控件，學(xué)習(xí)任何一種 UI 類型的控件，都從按鈕展開。在移動(dòng)端中，有官方建議的合理觸控區(qū)域 44pt 作為參照，來劃分大、小按鈕，但在網(wǎng)頁項(xiàng)目中，并沒有那么明確的官方建議。

所以，我們根據(jù)過往的經(jīng)驗(yàn)，依舊先將按鈕劃分成大、中、小三個(gè)等級(jí)，然后再講解它們對(duì)應(yīng)的長(zhǎng)寬數(shù)值區(qū)間。

首先從小按鈕開始說起，前面我們講過，中文最小字號(hào)在 11px，那么最小的按鈕尺寸就必然大于這個(gè)數(shù)值。所以，對(duì)于比較次要的按鈕、標(biāo)簽，建議使用 16-28px 高的按鈕。

中按鈕，一般應(yīng)用在一些表單確認(rèn)、取消、上傳等基礎(chǔ)功能的使用上，可以使用 28-44px 高的按鈕。

大按鈕，就比較特殊，只有在登陸或者是意義非常重大的場(chǎng)景下（比如刪除重要數(shù)據(jù)提示）才會(huì)使用，它的高通常在 44-64px，大于 64px 的按鈕在 B 端項(xiàng)目中基本不會(huì)存在，除非有特殊的業(yè)務(wù)要求。

前面講的都是按鈕的高，那么按鈕的寬怎么來的呢？按鈕的寬度設(shè)置有兩種，一種是定寬，一種是自適應(yīng)寬度。

定寬按鈕沒有非常明確的數(shù)值標(biāo)準(zhǔn)或比例標(biāo)準(zhǔn)，基本要求就是大于等于寬。常見的定寬按鈕寬高比為 1:1、2:3、2:1、3:1 。

雖然寬度沒有設(shè)限，但在網(wǎng)頁和手機(jī)客戶端不同，不會(huì)做出遠(yuǎn)遠(yuǎn)大于高，甚至撐滿屏幕的按鈕，這在巨大的電腦畫布中不僅不協(xié)調(diào)，而且會(huì)看起來非常不像按鈕。

自適應(yīng)按鈕則是根據(jù)寬度進(jìn)行伸縮的按鈕類型，通過定義左右內(nèi)邊距的數(shù)值，來計(jì)算按鈕實(shí)際的寬度。無論里面只有文字還是圖標(biāo)文字混合，使用自適應(yīng)按鈕都可以完美匹配。

2. 按鈕的狀態(tài)

除了長(zhǎng)寬尺寸外，還要額外關(guān)注按鈕的狀態(tài)。按鈕并不是一個(gè) “死” 的靜態(tài)視覺元素，它本身包含了若干種不同的狀態(tài)，需要通過視覺樣式進(jìn)行傳達(dá)。

比如最常見的，就是默認(rèn)、懸浮、點(diǎn)擊、不可點(diǎn)狀態(tài)。

除此以外，當(dāng)按鈕本身加入更多的功能、內(nèi)涵以后，我們都需要根據(jù)它的使用場(chǎng)景來考慮對(duì)應(yīng)的狀態(tài)，如下載按鈕，有些平臺(tái)點(diǎn)擊下載需要一個(gè)比較長(zhǎng)的加載過程，于是這個(gè)Loding的動(dòng)畫就可以在按鈕中進(jìn)行呈現(xiàn)，表示下載請(qǐng)求正在處理，而不是讓用戶以為這是一個(gè)無效的按鈕。

三、表單控件的設(shè)計(jì)

表單是一個(gè)大類，包含的控件非常多。如果我們把每個(gè)細(xì)分選項(xiàng)都單獨(dú)挑出來講，那可以寫一本 B 端字典了。

所以，我們可以從輸入框這個(gè)控件入手，優(yōu)先確認(rèn)輸入框的尺寸基礎(chǔ)，然后再根據(jù)它拓展出其它的相關(guān)控件元素出來。

1. 輸入框的尺寸定義

輸入框雖然不如按鈕出現(xiàn)頻率高，包含的尺寸規(guī)格極多，但同樣也有大小之分。

常規(guī)輸入框的高度在24-48之間，根據(jù)實(shí)際場(chǎng)景的需要，盡量以4的倍數(shù)來定義輸入框的高度。

單行輸入框?qū)挾韧ǔＪ枪潭ǖ?，不像按鈕會(huì)向右延伸，所以輸入框的寬度需要根據(jù)對(duì)應(yīng)的場(chǎng)景，輸入內(nèi)容的長(zhǎng)度來判斷，沒有統(tǒng)一的標(biāo)準(zhǔn)，盡量不要制定遠(yuǎn)低于實(shí)際內(nèi)容長(zhǎng)度的數(shù)值即可。

雖然我們定制的輸入框看上去好像就是給一個(gè)矩形背景，把字體丟進(jìn)去居中對(duì)齊就好。但是，開發(fā)中一個(gè)輸入框?qū)嶋H的尺寸，是通過內(nèi)部元素尺寸+內(nèi)邊距實(shí)現(xiàn)的。

所以，輸入框出現(xiàn)多行的時(shí)候，并不是簡(jiǎn)單把原來的尺寸x2，而是先確定內(nèi)部元素的行高，一個(gè)支持多行顯示，默認(rèn)高 36px 的輸入框，行高20，那么當(dāng)出現(xiàn)兩行的時(shí)候高 56，三行高 76，以此類推。

2. 下拉菜單

輸入框完成以后，那么之后的下拉菜單，在默認(rèn)狀態(tài)下和輸入框就幾乎使用了一樣的樣式，只是增加了可以下拉的示意或圖標(biāo)。

在下拉菜單中，如果包含了列表選項(xiàng)，那么每個(gè)列表的高度，也可以使用相同的尺寸，而不用給出一個(gè)新的數(shù)值。

3. 單選和復(fù)選控件

接著，就是單選和復(fù)選框的設(shè)計(jì)了，如果只看視覺效果，單選復(fù)選的實(shí)際大小好像都不大，不需要和輸入框有瓜葛。

這么想就不對(duì)了，實(shí)際上這類控件中，都有包含對(duì)應(yīng)的選區(qū)，它的實(shí)際大小并不是我們視覺上的邊緣。而我們使用的實(shí)際背景選區(qū)尺寸，同樣使用輸入框的大小來制定，并對(duì)內(nèi)容進(jìn)行居中。

比較值得新手注意的是，在設(shè)計(jì)這類控件時(shí)，單選和復(fù)選框的尺寸，要控制在12-20px，超過20像素的選框會(huì)明顯偏大，缺失細(xì)節(jié)感。

4. 滑動(dòng)條控件

之后，就是滑動(dòng)條控件的設(shè)計(jì)了?；瑒?dòng)條控件的樣式看起來并不復(fù)雜，一般由一個(gè)圓形滑塊（也有方形）和一個(gè)進(jìn)度條組成。

在這類控件中，進(jìn)度條的粗細(xì)雖然可以自由定義，但盡可能不要使用 1px，因?yàn)閷?shí)在太細(xì)了，做的淺了看不清楚，做得深了又有很強(qiáng)的割裂感。

關(guān)鍵點(diǎn)在于對(duì)滑塊本身尺寸的控制上，前面我們講過單選和復(fù)選框的尺寸，實(shí)際上這個(gè)滑塊是可以繼承單選或復(fù)選框尺寸的。當(dāng)它們使用相同大小的時(shí)候，往往在并列、并排的時(shí)候，會(huì)讓整個(gè)表單系統(tǒng)看起來更和諧、統(tǒng)一。

表單的設(shè)計(jì)，就是從輸入框和基礎(chǔ)的表單類型入手，然后再根據(jù)這些元素的尺寸拓展出后續(xù)其它表單控件的尺寸。

所以，掌握這種思路，就不需要對(duì)大量的表單控件死記硬背，可以靈活應(yīng)對(duì)不同的表單設(shè)計(jì)需求。

四、時(shí)間選擇器控件

1. 時(shí)間選擇器的組成

時(shí)間選擇器，是一個(gè)非常復(fù)雜的控件，通常它由一個(gè)下拉菜單和時(shí)間面板組合而成。

下拉菜單作為一個(gè)表單控件，設(shè)計(jì)的方式前面已經(jīng)說過了。時(shí)間的選擇包含兩種類型，單點(diǎn)選擇和范圍選擇，單點(diǎn)是具體到某天某日某時(shí)，比如鬧鐘提醒，而范圍是從某個(gè)時(shí)間點(diǎn)到另一個(gè)時(shí)間點(diǎn)之間的值，例如酒店預(yù)定時(shí)長(zhǎng)。

不管使用哪種選擇類型，我們優(yōu)先要注意時(shí)間的層級(jí)格式，要顯示年/月/日，還是精細(xì)到時(shí)/秒/分，以及鏈接層級(jí)的符號(hào)。

單點(diǎn)選擇模式的表單相對(duì)容易，就僅僅是顯示格式上的差異。但是，在范圍選擇中，表單的設(shè)計(jì)就有比較大的差異，要包含起始和結(jié)束兩個(gè)時(shí)間點(diǎn)。

我們可以在一個(gè)表單方框中將前后兩個(gè)時(shí)間點(diǎn)都囊括進(jìn)來，也可以將開始和結(jié)束拆分成兩個(gè)表單，兩種模式都有各自的交互邏輯和使用方式。

而點(diǎn)擊表單后，就是彈出的時(shí)間選擇面板。一個(gè)最完整的時(shí)間面板，會(huì)包含年份選擇、月份選擇、星期標(biāo)識(shí)、日期選擇、分時(shí)秒選擇。

2. 時(shí)間選擇面板的定義

下拉菜單部分的設(shè)計(jì)，和前面的表單輸入框基本一致，我就不在這里繼續(xù)討論了，主要來分享關(guān)于時(shí)間選擇面板的設(shè)計(jì)尺寸。設(shè)計(jì)該面板的時(shí)候，也是先從模塊入手：

每個(gè)模塊都有高度的設(shè)置規(guī)則，年/月和分時(shí)選擇欄，都可以采取定高的模式設(shè)計(jì)，可以使用 28-36px 的高度。

而對(duì)于日期選擇模塊，高度的設(shè)計(jì)則有比較特殊，模塊的總高度不需要提前制定，而是根據(jù)內(nèi)容行數(shù)決定。包含星期標(biāo)識(shí)行、日期行數(shù)。

每個(gè)日期的數(shù)字，都由一個(gè)完整的矩形 View 包裹，整個(gè)日期展示區(qū)域，就是由這些矩形拼裝而成，每個(gè)矩形可以是正方形也可以是縱向長(zhǎng)方形。

在這個(gè)模式下，如果要增加選中模式，可以直接通過填充背景 View 的色彩來完成。

日期數(shù)值的顯示也有狀態(tài)的區(qū)分，包含 “不可選” 和 “今天” 兩個(gè)。不可選的日期置灰即可，而標(biāo)識(shí)今天的日期數(shù)字，可以使用特殊的色彩或添加特定的符號(hào)標(biāo)識(shí)。

最后，就是包含具體分時(shí)選擇的設(shè)置了，如果這個(gè)時(shí)間選擇器中即包含了從日期到秒的選擇，那么在面板中，就建議使用手動(dòng)輸入的方式來完時(shí)、分、秒的設(shè)置。

五、面包屑控件

面包屑控件，用來表示用戶當(dāng)前所處頁面的層級(jí)，由頁面鏈接和分隔元素組成，是一個(gè)比較容易設(shè)計(jì)的樣式。頁面鏈接主要由文字展示，比較少會(huì)在這個(gè)部分玩花樣，最多關(guān)注當(dāng)前頁面和上級(jí)頁面的色彩差異。

在設(shè)計(jì)它們的時(shí)候，最簡(jiǎn)單的做法，就是使用文本框直接鍵入，如：電話亭首頁 > 課程 > B端入門電話亭首頁 / 課程 / B端入門如果要嚴(yán)謹(jǐn)一點(diǎn)，可以將手動(dòng)鍵入的大于號(hào)換成箭頭圖標(biāo)。

這種基礎(chǔ)的形式占據(jù)了 95% 以上的項(xiàng)目場(chǎng)景，只有在高度復(fù)雜，層級(jí)眾多的項(xiàng)目中，我們會(huì)額外在該控件中增加頁面下拉菜單，以及使用的篩選標(biāo)簽元素。

六、頁碼控件

1. 頁碼控件的組成

頁碼控件是用來控制列表翻頁的工具，當(dāng)列表?xiàng)l目數(shù)量超出單頁顯示數(shù)量以后就會(huì)均分成若干數(shù)量的頁面，以頁碼控件進(jìn)行翻頁和跳轉(zhuǎn)。

在這個(gè)應(yīng)用場(chǎng)景中，包含許多需要考慮的因素，核心問題來自頁面數(shù)量過多和有限的展示區(qū)間的矛盾。對(duì)于數(shù)據(jù)量較大的列表，展示的數(shù)據(jù)往往會(huì)超過4位數(shù)，這就需要我們提供多種交互元素來輔助用戶進(jìn)行頁面跳轉(zhuǎn)。在最完整的頁碼控件中，會(huì)包含下面這些元素：

不同的系統(tǒng)或者頁面，對(duì)所需的交互元素要求是不一致的，需要我們根據(jù)頁面的目標(biāo)來判斷應(yīng)該放哪些內(nèi)容。

2. 頁碼控件的尺寸

該控件的設(shè)計(jì)，樣式上主要的差異是是否包含矩形邊框，不過不管這個(gè)邊框是否可見，我們也依舊會(huì)以創(chuàng)建 View 視圖的方法來設(shè)計(jì)它。頁面控件的設(shè)計(jì)首先從頁碼數(shù)字開始，優(yōu)先制定高度，再根據(jù)數(shù)字?jǐn)?shù)來制定寬度。通常，這類標(biāo)簽按鈕的高度在 28-36px 之間。

寬度非固定的設(shè)計(jì)模式是一個(gè)必須注意的問題，因?yàn)?1 位數(shù)和 4 位數(shù)所需空間是有非常大差異的。只要確認(rèn)好左右間距的數(shù)值，那么設(shè)計(jì)后面的前/后翻頁、輸入框、頁數(shù)等內(nèi)容，就會(huì)變得非常清晰了。

頁碼設(shè)計(jì)中，不要遺漏的就是省略號(hào)了，它代表還有大量的頁碼沒有被展示出來，通常這個(gè)省略號(hào)只出現(xiàn)在最后一頁或者最開頭一頁中。

切記不要把省略號(hào)安置到序列的中部，變成類似下方這種狀態(tài)：1·2·3·4·5 …… 996·997·998·999

七、導(dǎo)航欄控件

1. 導(dǎo)航欄的組成

在今天，99% B端項(xiàng)目導(dǎo)航欄都坐在左側(cè)，內(nèi)容在右側(cè)，通過選擇左側(cè)導(dǎo)航的鏈接快速打開和跳轉(zhuǎn)到不同的模塊中去。

導(dǎo)航欄的設(shè)計(jì)相對(duì)一般組件來說，對(duì)頁面的視覺效果影響更大，因?yàn)閷?dǎo)航欄有較大的占比，而且通常為了和內(nèi)容做區(qū)分，都會(huì)采用和右側(cè)相反的色彩進(jìn)行凸顯，或使用品牌色。

常規(guī)的導(dǎo)航欄中，僅包含的內(nèi)容有后臺(tái) LOGO、導(dǎo)航選項(xiàng)。復(fù)雜的情況下可能還包含頭像、提醒、定制模塊，暫時(shí)不用考慮。導(dǎo)航選項(xiàng)是導(dǎo)航欄的關(guān)鍵所在，最簡(jiǎn)單的B端項(xiàng)目往往只有一級(jí)，但業(yè)務(wù)越多的項(xiàng)目導(dǎo)航選項(xiàng)的層級(jí)也就越多，會(huì)以樹樁的形式展開和收起。

對(duì)于一些適配支持比較好的項(xiàng)目，導(dǎo)航欄還會(huì)有縮略模式，即縮減寬度后只顯示圖標(biāo)或更改文字排列方向的狀態(tài)。

2. 導(dǎo)航欄的數(shù)值

在導(dǎo)航欄設(shè)計(jì)中，一般LOGO放在頂部，使用 28-64 之間的高度，然后下方才放導(dǎo)航選項(xiàng)。只要項(xiàng)目不太復(fù)雜，那么就建議為導(dǎo)航提供統(tǒng)一的高度，從32-48px 之間選擇。

即使是二級(jí)標(biāo)題，也可以使用相同的高度而不用特地縮小，通過變更文字的色彩、縮進(jìn)的方式來表現(xiàn)層級(jí)的區(qū)別，這樣在交互中更具整體性。

如果使用縮略型導(dǎo)航，則寬度控制在 32-64 即可。

八、開關(guān)控件

開關(guān)控件作為用來控制功能啟停的元素，包含開啟、關(guān)閉、禁用三個(gè)基本狀態(tài)。B端開關(guān)設(shè)計(jì)受到移動(dòng)端系統(tǒng)的影響，所以和我們手機(jī)上使用的開關(guān)控件樣式幾乎一致。

但是，并不是所有啟停場(chǎng)景下都適用這種開關(guān)，如果啟用和關(guān)閉的邏輯比較復(fù)雜，那么就可以使用表單的兩個(gè)單選項(xiàng)控件并添加文字提示，或者使用勾選完成開啟關(guān)閉。

九、分頁選擇控件

在B端的分頁器中，設(shè)計(jì)的規(guī)格和移動(dòng)端是不同的，移動(dòng)端應(yīng)為屏幕窄，經(jīng)常將 2、3 個(gè)分頁標(biāo)簽進(jìn)行均分來實(shí)現(xiàn)布局。

而在 B 端分頁控件，也優(yōu)先確定設(shè)計(jì)的高度，小分頁控件在 24-36 之間，大的在 36-64 之間。如果文字字?jǐn)?shù)不太多，就使用等寬的設(shè)計(jì)，如果文字?jǐn)?shù)量比較捉摸不定，就采取等內(nèi)邊距自適應(yīng)設(shè)計(jì)。

十、提醒類控件

最后，就是提醒類控件的設(shè)計(jì)了。提醒類控件一般包含兩個(gè)類型，弱提醒和強(qiáng)提醒。弱提醒是直接懸浮在畫面中，不會(huì)對(duì)遮擋以外區(qū)域有太大影響，并會(huì)自己消失的提示，也可以稱為 Toast 氣泡框。這個(gè)框的設(shè)計(jì)，是確定四周內(nèi)邊距的寬，然后再根據(jù)文字內(nèi)容來展示。

而強(qiáng)提示彈窗，則是一個(gè)正常的彈窗。我們會(huì)在這個(gè)彈窗中置入標(biāo)題、文本、按鈕三種要素。并且，為了體現(xiàn) “強(qiáng)”，會(huì)對(duì)窗口下方的界面使用黑色遮罩，讓用戶注意力集中到窗口中！這類黑色遮罩通常使用透明度為 40-60% 的黑色，太淺和太深都不好。

十一、結(jié)語

今天的分享就到這邊，對(duì)于控件組件的說明，我會(huì)在后面單開更全更更細(xì)節(jié)的干貨分享出來。

掌握這兩篇內(nèi)容中設(shè)計(jì)的邏輯，就可以拓展到其它類似組件和元素中去。主要掌握的是設(shè)計(jì)的方式，而不要硬背具體的數(shù)值。

本文由 @酸梅干超人 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于CC0協(xié)議