如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

我們在設(shè)計諸如CRM（客戶關(guān)系管理）、OA（辦公自動化）等面向B端用戶的后臺界面時，往往會被各種各樣錯綜繁雜的組件弄得暈頭轉(zhuǎn)向，不知該如何選擇。有時好不容易選完之后，又會發(fā)現(xiàn)有更合適的組件，導致反復修改設(shè)計稿，降低了工作效率。

那么在對比了幾個常用的組件庫（Ant Design / Element / iView）并結(jié)合自身的工作經(jīng)驗之后，我選擇了一些常用的組件，來和大家簡單總結(jié)下它們的使用場景以及可能出現(xiàn)的誤區(qū)。

在Ant Design 的組件庫中，分為了通用、布局、導航、數(shù)據(jù)錄入、數(shù)據(jù)展示、反饋、其他這七大類組件。今天先來看看數(shù)據(jù)錄入中的相關(guān)組件，我將其又分為了手動輸入以及點擊選擇兩大類。（評分、上傳等特征明顯的組件就不在此贅述了。）

手動輸入

1. 輸入框Input

輸入框是數(shù)據(jù)錄入中最常見也是最基礎(chǔ)的組件，在需要用戶輸入內(nèi)容的時候即可選用。

除了常規(guī)的輸入框，帶前/后綴、帶圖標、帶按鈕的輸入框也是較常用到的。

在輸入內(nèi)容中頭/尾是相對固定的時候，我們就可以采用帶前/后綴的輸入框來減少用戶手動輸入，比如網(wǎng)址輸入框就可以加上后綴。

有時候為了幫助用戶了解輸入內(nèi)容的類型，可以在輸入框中加上圖標，比如輸入用戶名或密碼的時候。

帶按鈕的輸入框最常使用的場景就是搜索框了。

2. 自動完成AutoComplete

自動完成其實是輸入框Input 的一項功能，但是 Ant Design 和 iView 中將其單獨拎出來了，為了避免大家搞混，我們這兒也單獨講。（Element中在輸入框 – 帶輸入建議）

顧名思義，自動完成就是輔助用戶輸入。在輸入一部分內(nèi)容后，提供相關(guān)的備選項，不僅可以減少手動輸入，還能更精準的輸入。常見的使用場景就是搜索框了。

3. 數(shù)字輸入框InputNumber

數(shù)字輸入框特用于需要輸入范圍數(shù)值的場景（電話QQ等號碼不宜使用）。右側(cè)的步進器則可以幫助用戶精準控制數(shù)值的增減。

當然作為輸入框的一種，也可以加上前/后綴來減少固定內(nèi)容的輸入，比如%或者貨幣單位（￥、$、元、円）。

點擊選擇

1. 單選框Radio

單選框顧名思義就是在一組選項中僅可選擇一個時使用。

由于單選框的選項都是平鋪展示的，所以選項不宜過多，當選項較多時建議采用選擇器Select（后文會提到）。

按鈕形式的單選框也可以被當作標簽頁Tabs 來使用（標簽頁Tabs的本質(zhì)其實就是單選框）。

2. 多選框Checkbox

多選框則是在一組選項中需要選擇多個時使用。

同樣，由于是平鋪展示，選項不宜過多。

多選框不同于單選框Radio 的是，它可以單獨使用，來表示兩種狀態(tài)之間的切換，類似于開關(guān)Switch。區(qū)別在于開關(guān)Switch 會直接觸發(fā)改變狀態(tài)，多選框則一般用于狀態(tài)標記，需要配合提交操作使用。

3. 選擇器Select

選擇器也是數(shù)據(jù)錄入中很常見的組件，它以下拉菜單的形式來呈現(xiàn)選項（選項較少時建議采用單選框Radio 或多選框Checkbox 平鋪展示）。

除了單選，還有多選的形式。

上文輸入組件中提到的自動完成AutoComplete，其實也是選擇器的一種衍生方式──帶輸入的選擇器。

4. 級聯(lián)選擇Cascader

級聯(lián)選擇是指，在選擇器Select 選項數(shù)量較大時，采用多級分類的方式將選項進行分隔，便于用戶選擇。比如地址選擇，就可以按省市區(qū)一層層分類。

5. 穿梭框Transfer

當多選框Checkbox 選項過多時，除了選擇器Select 的多選形式，還可以用穿梭框的形式來呈現(xiàn)。相比于選擇器Select，穿梭框占據(jù)更大的空間，當然也可以展示選項的更多信息。

6. 日期選擇器DatePicker

當需要錄入日期的時候，可以選用日期選擇器。用戶從彈出的日歷面板中直接選取即可。

當然，需要錄入一段時間的時候，也可以同時選擇開始日期和結(jié)束日期。

7. 時間選擇器TimePicker

時間選擇器與日期選擇器DatePicker 幾乎一樣，從彈出面板中選擇時間即可。

時間選擇器和日期選擇器DatePicker 還可以組合使用。

8. 滑塊Slider

滑塊的使用場景類似于數(shù)字輸入框InputNumber，需要在某個范圍內(nèi)錄入數(shù)值。不同的是，它可以直接選取而不用手動輸入。

當然，也可以和數(shù)字輸入框InputNumber 配合使用。

還可以選擇某個區(qū)間，比如價格區(qū)間。

當數(shù)據(jù)選項較少或者離散（不連續(xù)）時，還可以采用分段的形式。

總結(jié)

今天主要講了數(shù)據(jù)錄入的相關(guān)組件，共11個：

• 輸入框Input：最基礎(chǔ)組件，除常規(guī)外，還有帶前/后綴、帶圖標、帶按鈕的形式。
• 自動完成AutoComplete：輸入框Input 的一項功能，提供備選項輔助輸入。
• 數(shù)字輸入框InputNumber：錄入范圍數(shù)值，帶步進器精準控制，還可帶前/后綴。
• 單選框Radio：只能選擇一個，選項不宜過多，按鈕形式可做標簽頁Tabs。
• 多選框Checkbox：可多選，選項不宜過多，單個使用可做開關(guān)Switch。
• 選擇器Select：以下拉菜單的形式呈現(xiàn)更多選項，可單選/多選，可帶輸入。
• 級聯(lián)選擇Cascader：選項數(shù)量較大，采用分類的方式將選項分隔。
• 穿梭框Transfer：可多選，展示選項更多的信息。
• 日期選擇器DatePicker：選擇日期，可以選擇一段日期。
• 時間選擇器TimePicker：選擇時間，可以與日期選擇器DatePicker 組合使用。
• 滑塊Slider：錄入范圍數(shù)值，可與數(shù)字輸入框InputNumber 組合使用，可選擇區(qū)間，可用分段的形式。

  藍藍設(shè)計( www.0391cbd.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。