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