2019-2-14 濤濤
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
我們在設計諸如CRM（客戶關系管理）、OA（辦公自動化）等面向B端用戶的后臺界面時，往往會被各種各樣錯綜繁雜的組件弄得暈頭轉向，不知該如何選擇。有時好不容易選完之后，又會發現有更合適的組件，導致反復修改設計稿，降低了工作效率。那么在對比了幾個常用的組件庫（Ant Design / Element / iView）并結合自身的工作經驗之后，我選擇了一些常用的組件，來和大家簡單總結下它們的使用場景以及可能出現的誤區。
在Ant Design 的組件庫中，分為了通用、布局、導航、數據錄入、數據展示、反饋、其他這七大類組件。今天先來看看數據錄入中的相關組件，我將其又分為了手動輸入以及點擊選擇兩大類。（評分、上傳等特征明顯的組件就不在此贅述了。）
1. 輸入框Input
輸入框是數據錄入中最常見也是最基礎的組件，在需要用戶輸入內容的時候即可選用。
除了常規的輸入框，帶前/后綴、帶圖標、帶按鈕的輸入框也是較常用到的。
在輸入內容中頭/尾是相對固定的時候，我們就可以采用帶前/后綴的輸入框來減少用戶手動輸入，比如網址輸入框就可以加上后綴。
有時候為了幫助用戶了解輸入內容的類型，可以在輸入框中加上圖標，比如輸入用戶名或密碼的時候。
帶按鈕的輸入框最常使用的場景就是搜索框了。
2. 自動完成AutoComplete
自動完成其實是輸入框Input 的一項功能，但是 Ant Design 和 iView 中將其單獨拎出來了，為了避免大家搞混，我們這兒也單獨講。（Element中在輸入框 – 帶輸入建議）
顧名思義，自動完成就是輔助用戶輸入。在輸入一部分內容后，提供相關的備選項，不僅可以減少手動輸入，還能更精準的輸入。常見的使用場景就是搜索框了。
3. 數字輸入框InputNumber
數字輸入框特用于需要輸入范圍數值的場景（電話QQ等號碼不宜使用）。右側的步進器則可以幫助用戶精準控制數值的增減。
當然作為輸入框的一種，也可以加上前/后綴來減少固定內容的輸入，比如%或者貨幣單位（￥、$、元、円）。
1. 單選框Radio
單選框顧名思義就是在一組選項中僅可選擇一個時使用。
由于單選框的選項都是平鋪展示的，所以選項不宜過多，當選項較多時建議采用選擇器Select（后文會提到）。
按鈕形式的單選框也可以被當作標簽頁Tabs 來使用（標簽頁Tabs的本質其實就是單選框）。
2. 多選框Checkbox
多選框則是在一組選項中需要選擇多個時使用。
同樣，由于是平鋪展示，選項不宜過多。
多選框不同于單選框Radio 的是，它可以單獨使用，來表示兩種狀態之間的切換，類似于開關Switch。區別在于開關Switch 會直接觸發改變狀態，多選框則一般用于狀態標記，需要配合提交操作使用。
3. 選擇器Select
選擇器也是數據錄入中很常見的組件，它以下拉菜單的形式來呈現選項（選項較少時建議采用單選框Radio 或多選框Checkbox 平鋪展示）。
除了單選，還有多選的形式。
上文輸入組件中提到的自動完成AutoComplete，其實也是選擇器的一種衍生方式──帶輸入的選擇器。
4. 級聯選擇Cascader
級聯選擇是指，在選擇器Select 選項數量較大時，采用多級分類的方式將選項進行分隔，便于用戶選擇。比如地址選擇，就可以按省市區一層層分類。
5. 穿梭框Transfer
當多選框Checkbox 選項過多時，除了選擇器Select 的多選形式，還可以用穿梭框的形式來呈現。相比于選擇器Select，穿梭框占據更大的空間，當然也可以展示選項的更多信息。
6. 日期選擇器DatePicker
當需要錄入日期的時候，可以選用日期選擇器。用戶從彈出的日歷面板中直接選取即可。
當然，需要錄入一段時間的時候，也可以同時選擇開始日期和結束日期。
7. 時間選擇器TimePicker
時間選擇器與日期選擇器DatePicker 幾乎一樣，從彈出面板中選擇時間即可。
時間選擇器和日期選擇器DatePicker 還可以組合使用。
8. 滑塊Slider
滑塊的使用場景類似于數字輸入框InputNumber，需要在某個范圍內錄入數值。不同的是，它可以直接選取而不用手動輸入。
當然，也可以和數字輸入框InputNumber 配合使用。
還可以選擇某個區間，比如價格區間。
當數據選項較少或者離散（不連續）時，還可以采用分段的形式。
今天主要講了數據錄入的相關組件，共11個：
藍藍設計( www.lzhte.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。