2019-2-14 濤濤
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
我們在設(shè)計諸如CRM（客戶關(guān)系管理）、OA（辦公自動化）等面向B端用戶的后臺界面時，往往會被各種各樣錯綜繁雜的組件弄得暈頭轉(zhuǎn)向，不知該如何選擇。有時好不容易選完之后，又會發(fā)現(xiàn)有更合適的組件，導(dǎo)致反復(fù)修改設(shè)計稿，降低了工作效率。那么在對比了幾個常用的組件庫（Ant Design / Element / iView）并結(jié)合自身的工作經(jīng)驗之后，我選擇了一些常用的組件，來和大家簡單總結(jié)下它們的使用場景以及可能出現(xiàn)的誤區(qū)。
在Ant Design 的組件庫中，分為了通用、布局、導(dǎo)航、數(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ù)值的增減。
當(dāng)然作為輸入框的一種，也可以加上前/后綴來減少固定內(nèi)容的輸入，比如%或者貨幣單位（￥、$、元、円）。
1. 單選框Radio
單選框顧名思義就是在一組選項中僅可選擇一個時使用。
由于單選框的選項都是平鋪展示的，所以選項不宜過多，當(dāng)選項較多時建議采用選擇器Select（后文會提到）。
按鈕形式的單選框也可以被當(dāng)作標簽頁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
當(dāng)多選框Checkbox 選項過多時，除了選擇器Select 的多選形式，還可以用穿梭框的形式來呈現(xiàn)。相比于選擇器Select，穿梭框占據(jù)更大的空間，當(dāng)然也可以展示選項的更多信息。
6. 日期選擇器DatePicker
當(dāng)需要錄入日期的時候，可以選用日期選擇器。用戶從彈出的日歷面板中直接選取即可。
當(dāng)然，需要錄入一段時間的時候，也可以同時選擇開始日期和結(jié)束日期。
7. 時間選擇器TimePicker
時間選擇器與日期選擇器DatePicker 幾乎一樣，從彈出面板中選擇時間即可。
時間選擇器和日期選擇器DatePicker 還可以組合使用。
8. 滑塊Slider
滑塊的使用場景類似于數(shù)字輸入框InputNumber，需要在某個范圍內(nèi)錄入數(shù)值。不同的是，它可以直接選取而不用手動輸入。
當(dāng)然，也可以和數(shù)字輸入框InputNumber 配合使用。
還可以選擇某個區(qū)間，比如價格區(qū)間。
當(dāng)數(shù)據(jù)選項較少或者離散（不連續(xù)）時，還可以采用分段的形式。
今天主要講了數(shù)據(jù)錄入的相關(guān)組件，共11個：
藍藍設(shè)計( www.newchinaweekly.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
藍藍設(shè)計的小編 http://www.newchinaweekly.com