设计B端后台，必须搞清楚这些组件（一）

海舟Ocean：我们在设计诸如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个：

• 输入框Input：最基础组件，除常规外，还有带前/后缀、带图标、带按钮的形式。
• 自动完成AutoComplete：输入框Input 的一项功能，提供备选项辅助输入。
• 数字输入框InputNumber：录入范围数值，带步进器精准控制，还可带前/后缀。
• 单选框Radio：只能选择一个，选项不宜过多，按钮形式可做标签页Tabs。
• 多选框Checkbox：可多选，选项不宜过多，单个使用可做开关Switch。
• 选择器Select：以下拉菜单的形式呈现更多选项，可单选/多选，可带输入。
• 级联选择Cascader：选项数量较大，采用分类的方式将选项分隔。
• 穿梭框Transfer：可多选，展示选项更多的信息。
• 日期选择器DatePicker：选择日期，可以选择一段日期。
• 时间选择器TimePicker：选择时间，可以与日期选择器DatePicker 组合使用。
• 滑块Slider：录入范围数值，可与数字输入框InputNumber 组合使用，可选择区间，可用分段的形式。

想进一步了解的小伙伴可以移步各大组件库的官网，里面有各个组件更详尽的呈现形式及使用方法。

• Ant Design：https://ant.design/docs/react/introduce-cn
• Element：http://element-cn.eleme.io
• iView：https://www.iviewui.com/docs/guide/install

欢迎关注作者的微信公众号：「海盐社」