超詳細！總監出品的B端設計規范指南（四）：控件

第四篇我們全面認識一下B端的控件設計。

往期回顧：

B端基礎控件的認識

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

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

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

但是，按鈕并不是只有一個矩形框中間放文字而已，還有多種細節的變體。包括但不局限于圓形、前置圖標、呈現加載進程等，標簽控件本質上也是按鈕的一種。

第 2，表單類控件，表單是用來采集信息的控件。比如我們去銀行辦理業務，就會讓你填寫一張相應的表單，里面會收集各種不同的信息。

表單類的控件，就是都要根據我們想要采集的數據，以對應的樣式、交互呈現給用戶。比如文本輸入框、單選、復選、下拉菜單、級聯選擇、滑動條等等。

第 3，時間選擇器，即選擇某一點或某一段時間的控件。嚴格來說，它也是表單控件中的一種，之所以單獨拿出來講，是因為它是所有表單控件中最復雜的一類。

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

第 4，面包屑控件，可以理解成是步驟或層級的表現控件，直觀的反應當前頁面的位置，可以進行快速的切換和返回。

第 5，頁碼控件，在通過列表呈現數據項目的時候，往往一頁是展示不完的，所以我們會將它切割成若干不同的頁面，于是就會使用分頁控件幫助用戶進行頁面的跳轉。

第 6，導航欄，即 B 端內容模塊的導航控件，通過導航欄快速切換到不同的模塊。主流的 B 端項目，都會使用側邊導航的形式，也有少部分項目會使用傳統項目的頂部導航設計。

第 7，開關，即對某判斷事件進行是或否的控制元素，和手機中我們使用的開關功能一致。

第 8，分頁選擇控件，英文是 Tabs，在我的用法里從來不把 Tab 直接翻譯成 “標簽” 和英文 Tag 沖突。它的功能即切換對應內容區域的控件，和手機分頁器一樣。

第 9，提醒類控件，用來提示、警示用戶的一系列控件類型。包含類似警告彈窗、強提示、氣泡、側邊提示欄等等。

以上就是我們在設計 B 端中常見的控件類型，有一個基本的認識，那么下面就分別講解它們設計的要點，以及常用的參數特征。

按鈕的設計要點

1. 按鈕的尺寸

按鈕是整個 UI 中最基礎的控件，學習任何一種 UI 類型的控件，都從按鈕展開。在移動端中，有官方建議的合理觸控區域 44pt 作為參照，來劃分大、小按鈕，但在網頁項目中，并沒有那么明確的官方建議。

所以，我們根據過往的經驗，依舊先將按鈕劃分成大、中、小三個等級，然后再講解它們對應的長寬數值區間。

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

中按鈕，一般應用在一些表單確認、取消、上傳等基礎功能的使用上，可以使用 28-44px 高的按鈕。

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

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

定寬按鈕沒有非常明確的數值標準或比例標準，基本要求就是大于等于寬。常見的定寬按鈕寬高比為 1:1、2:3、2:1、3:1。

雖然寬度沒有設限，但在網頁和手機客戶端不同，不會做出遠遠大于高，甚至撐滿屏幕的按鈕，這在巨大的電腦畫布中不僅不協調，而且會看起來非常不像按鈕。

自適應按鈕則是根據寬度進行伸縮的按鈕類型，通過定義左右內邊距的數值，來計算按鈕實際的寬度。無論里面只有文字還是圖標文字混合，使用自適應按鈕都可以完美匹配。

2. 按鈕的狀態

除了長寬尺寸外，還要額外關注按鈕的狀態。按鈕并不是一個 “死” 的靜態視覺元素，它本身包含了若干種不同的狀態，需要通過視覺樣式進行傳達。

比如最常見的，就是默認、懸浮、點擊、不可點狀態。

除此以外，當按鈕本身加入更多的功能、內涵以后，我們都需要根據它的使用場景來考慮對應的狀態，如下載按鈕，有些平臺點擊下載需要一個比較長的加載過程，于是這個 Loding 的動畫就可以在按鈕中進行呈現，表示下載請求正在處理，而不是讓用戶以為這是一個無效的按鈕。

表單控件的設計

表單是一個大類，包含的控件非常多。如果我們把每個細分選項都單獨挑出來講，那可以寫一本 B 端字典了。

所以，我們可以從輸入框這個控件入手，優先確認輸入框的尺寸基礎，然后再根據它拓展出其它的相關控件元素出來。

1. 輸入框的尺寸定義

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

常規輸入框的高度在 24-48 之間，根據實際場景的需要，盡量以 4 的倍數來定義輸入框的高度。

單行輸入框寬度通常是固定的，不像按鈕會向右延伸，所以輸入框的寬度需要根據對應的場景，輸入內容的長度來判斷，沒有統一的標準，盡量不要制定遠低于實際內容長度的數值即可。

雖然我們定制的輸入框看上去好像就是給一個矩形背景，把字體丟進去居中對齊就好。但是，開發中一個輸入框實際的尺寸，是通過內部元素尺寸+內邊距實現的。

所以，輸入框出現多行的時候，并不是簡單把原來的尺寸 x2，而是先確定內部元素的行高，一個支持多行顯示，默認高 36px 的輸入框，行高 20，那么當出現兩行的時候高 56，三行高 76，以此類推。

2. 下拉菜單

輸入框完成以后，那么之后的下拉菜單，在默認狀態下和輸入框就幾乎使用了一樣的樣式，只是增加了可以下拉的示意或圖標。

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

3. 單選和復選控件

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

這么想就不對了，實際上這類控件中，都有包含對應的選區，它的實際大小并不是我們視覺上的邊緣。而我們使用的實際背景選區尺寸，同樣使用輸入框的大小來制定，并對內容進行居中。

比較值得新手注意的是，在設計這類控件時，單選和復選框的尺寸，要控制在 12-20px，超過 20 像素的選框會明顯偏大，缺失細節感。

4. 滑動條控件

之后，就是滑動條控件的設計了。滑動條控件的樣式看起來并不復雜，一般由一個圓形滑塊（也有方形）和一個進度條組成。

在這類控件中，進度條的粗細雖然可以自由定義，但盡可能不要使用 1px，因為實在太細了，做的淺了看不清楚，做得深了又有很強的割裂感。

關鍵點在于對滑塊本身尺寸的控制上，前面我們講過單選和復選框的尺寸，實際上這個滑塊是可以繼承單選或復選框尺寸的。當它們使用相同大小的時候，往往在并列、并排的時候，會讓整個表單系統看起來更和諧、統一。

表單的設計，就是從輸入框和基礎的表單類型入手，然后再根據這些元素的尺寸拓展出后續其它表單控件的尺寸。

所以，掌握這種思路，就不需要對大量的表單控件死記硬背，可以靈活應對不同的表單設計需求。

結尾

B 端設計的上半部分先更新到這邊，下半篇會在本周內完成。這個系列更新完成以后，我們會再合并一個修訂版本出來，敬請期待。

歡迎關注作者的微信公眾號：「超人的電話亭」