第四篇我們?nèi)嬲J(rèn)識(shí)一下B端的控件設(shè)計(jì)。

往期回顧：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

第 9，提醒類控件，用來(lái)提示、警示用戶的一系列控件類型。包含類似警告彈窗、強(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 作為參照，來(lái)劃分大、小按鈕，但在網(wǎng)頁(yè)項(xiàng)目中，并沒有那么明確的官方建議。

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

首先從小按鈕開始說(shuō)起，前面我們講過(guò)，中文最小字號(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ù)要求。

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

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

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

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

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

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

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

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

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

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

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

1. 輸入框的尺寸定義

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

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

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

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

所以，輸入框出現(xiàn)多行的時(shí)候，并不是簡(jiǎn)單把原來(lái)的尺寸 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ū)尺寸，同樣使用輸入框的大小來(lái)制定，并對(duì)內(nèi)容進(jìn)行居中。

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

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

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

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

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

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

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

結(jié)尾

B 端設(shè)計(jì)的上半部分先更新到這邊，下半篇會(huì)在本周內(nèi)完成。這個(gè)系列更新完成以后，我們會(huì)再合并一個(gè)修訂版本出來(lái)，敬請(qǐng)期待。

歡迎關(guān)注作者的微信公眾號(hào)：「超人的電話亭」