《后台产品设计指南》常用的表单组件类型（6）

后端产品设计指南

表单通常由各种输入组件和提交按钮组成，这些组件经常出现在后端产品中。 本文将为您介绍常用的表单组件类型，帮助您更好地理解它们。

单选按钮

单选按钮是指一组选项中的多个单选选项。 后台的选项一般不超过4个。 如果超过 4 个，请考虑使用下拉列表组件。

复选框

多选框是指在一组选项中进行多项选择。 默认情况下，必须单击左侧的矩形框才能选择多选框。 将其与Label结合起来，就可以达到点击文字的效果。

输入框输入

输入框也称为文本框，可以用来输入文本内容。 输入框是表单中经常使用的组件，并且有很多变体。 例如下图所示的密码框、智能关联的输入框、长度限制的输入框、图标的输入框。

文本域

文本字段实际上是一个可以输入多行内容的文本框。 当文本域中文本较多时，会自动出现滚动条； 文本字段还可以实现自适应文本高度的效果。

下拉列表

当选项超过4个时，一般使用下拉列表组件。 下拉列表的高级应用包括多选效果和搜索选项功能。

柜台

计数器，也称为步进器，可以输入标准数字值。 数字之间的差可以是整数，也可以是小数，并且可以自定义。

级联选择器

级联选择器适用于具有层级关系的数据选择场景。 它可以通过单击或悬停鼠标来触发选择。 常见的应用是省市行政区位的三级联动选择。 级联选择器可以设置为单选或多选。

转变

开关组件用于在禁用和禁用等两种状态之间进行切换。 具有三种及以上状态的则不适用。

滑块

滑块适合选择某个范围内的值，例如0-100万。

日期时间选择器

日期和时间选择是经常出现在后台的组件。 通过设置开始日期和时间以及结束日期和时间来选择时间段。 该组件支持根据天、周、月和年选择时间段。 需要注意的是，如果选择某一天，一般是指这一天的23:59:59。

有些时间组件有两个日历，称为双日历。 有时双日历上会有时间段快捷选项，例如最近 7 天和最近 15 天。 这里推荐一个时间和日期组件，这个组件在后端产品中经常见到。

上传文件

文件上传组件支持上传不同类型的文件，例如图片文件、文档文件等，一般支持文件的批量上传。 如果上传多个文件，则需要考虑上传队列。 上传文件的状态可分为上传成功、上传中、暂停、排队。

上传图片

图片上传组件在后台应用广泛，比如用户头像、文章封面等，上传的图片可能是一张，也可能是多张。 一般情况下，您可以通过点击占位符区域来上传或修改图片。 图片上传后，需要将图片按照一定的比例进行展示。 请注意，需要裁剪图像以避免变形。 点击删除按钮可以直接删除图片。

您可以在图片旁边添加一定的描述文案，例如建议尺寸为200*200； 上传图片不超过3M，格式为jpg、png。

穿梭箱

穿梭框可以看作是下拉列表的另一种形式，支持多项选择。 如果数据太多，穿梭盒应该支持搜索功能。

树树

树形组件用于以清晰的层次结构显示信息，可以展开或折叠，例如单元内的组织结构场景。 部分树形组件增加了搜索功能； 如果节点较多，可以考虑使用延迟加载，只在点击时请求数据。

表单组件经常出现在后台设计中。 在设计之前，必须了解每个组件的使用场景和限制，以便选择正确的组件进行设计。 下一篇文章将向您介绍表单填写规范以及如何设计有用的表单页面。

写作过程中，如果有什么意见或者想法，欢迎感兴趣的读者加我微信，共同交流、探索、共同进步。