定义
表单是一种用于信息添加、录入的页面类型。主要用来确保用户按照要求录入信息提交给系统使用或引导用户进行应用设置。此篇章为表单组件的单列布局形式，若需要使用表单多列布局，请参照 表单 Form-多列 。
设计目标
明确任务、快速定位：符合用户的阅读填写习惯，具备清晰的层级关系。帮助用户明确当前页面任务，快速查找和定位目标，完成填写操作；
简化流程、引导清晰：简化填写流程，通过确保用户能够准确、轻松、快速的完成任务
使用规则
- 表单的设计应该符合用户的使用逻辑
4. 根据业务诉求选择对应的label宽度
4. 必填字段前加＊
5. 若表单输入出错或预警，需要给用户提供有意义的消息
6. 常规结构分为居左和居中两种排版方式。需要根据业务诉求、用户诉求分场景选择使用。
居中排版：（常规表单样式，一般情况下均使用居中排版）
居左排版：（用于复杂列表，如嵌套型表单等）
基础构成元素
1.表单布局
2.label
3.输入框
4.下拉选择器
5.单选框
6.多选框
7.开关
9.嵌套表单
10.上传
11.标题
12.反馈
1. 表单宽度
表单最大宽度(含label)为660，最小宽度根据实际容器的大小进行适配；
在提高用户信息浏览效率的同时，让页面信息陈列更加平衡美观，在单列列表的情况下我们采取“居中”的形式进行设计；
当容器宽度<表单总宽最大值时，表单两侧各留20px，表单总宽根据容器宽度弹性压缩，label宽度同上；（例如弹窗M、嵌套容器）；
当容器宽度为600及600以下时，为了达到视觉平衡性，表单label宽度建议使用默认80px，并且建议说明文案放置在控件区下方；（例如抽屉S、弹窗S）
2. label
- label宽度为两档80px/120px，默认使用80px；设计师可以根据业务特征和场景自行选择使用；
- 其他超长语言（例如葡萄牙语）对应两档160px/200px，默认使用160px
- 经由设计产出的label字段原则上限定为一行（根据业务诉求选择label宽度），开放给用户时，需要明确给出字数建议值（建议12个字符内）
- 同一容器内只允许使用同一种label宽度；
- 当使用120px长度的label也无法满足字符长度时，最多展示一行，超出部分末尾显示“…”
表单页内label对应的状态：
1.必选项
2.带说明图标
3.超长label
3. 输入框
- 输入框为用户提供了编辑文本的控件，是录入数据最基础和常见的方式。
- 输入框可分为常规文本框和文本域，前者通指输入较少的字符总数，使用单行的输入形式；后者一般为录入长篇幅的单一的文本使用多行的文本区域。
- 在表单页内的输入框根据容器宽度进行适配（容器大小决定表单的宽度，表单宽度=label+输入框宽度）
表单页中输入框对应状态：
1.有提示/辅助文案（提示文案分为右跟随和下跟随，根据场景进行判断使用，默认为下跟随）
辅助文案距离组件距离4px，如图显示
2.填写错误/校验错误
4. 下拉选择器/日期选择器
- 下拉选择器允许用户从列表中选择一个选项或多个选项，为用户在选项的数量上提供了更多的灵活性。
- 在表单页内的下拉选择器根据容器宽度进行适配（容器大小决定表单的宽度，表单宽度=label+选择器宽度）
表单页中下拉选择器对应状态：
1.有提示/辅助文案（提示文案分为右跟随和下跟随，根据场景进行判断使用，默认为下跟随）
辅助文案距离组件距离4px，如图显示
2.填写错误/校验错误
5. 单选框（Radio Button）
- 单选按钮允许用户从多个选项中选择一个选项。Radio 所有选项默认可见，方便用户在比较中选择，因此选项不宜过多（一定多于2个，一般少于5个；大于等于5个选项时建议使用下拉选择器）
- 单选框组件在表单中使用时，为了达到整体间距的一致性和舒适性，需要使用28px的容器（高度居中）
表单页中对应状态：
1.有提示/辅助文案
辅助文案距离组件距离4px (不包含容器高度的28px)，如图显示
2.填写错误/校验错误
6. 复选框（Checkbox）
- 复选框用于在一组可选项中进行多项选择时。（一定多于2个，一般少于7个，超过7个建议使用下拉选择器）
- 复选框组件在表单中使用时，为了达到整体间距的一致性和舒适性，需要使用28px的容器（高度居中）
表单页中对应状态：
1.有提示/辅助文案
辅助文案距离组件距离4px (不包含容器高度的28px)，如图显示
2.填写错误/校验错误
7. 开关
- 用于切换单个选项的状态。当用户切换「开关」按钮将直接触发状态改变；
- 开关组件默认使用Medium尺寸，用户可以根据业务需求选择是否显示状态文案
8. 表格
- 表单页内的表格适用于信息的收集和展示、以及操作结构化数据。它结构简单，分隔归纳明确，使信息之间更易于对比，大大提升了用户对信息的接收效率和理解程度。具体规则请参照表格
9. 嵌套容器
- 嵌套容器通常由某一个选项操作进行折叠展开时出现，或者在特定容器下作为分隔/强调使用；
10. 上传
- 上传是将本地的相应信息(包含本地和云储存)通过网页或者上传工具发布到远程服务器上的过程。
表单页中对应的上传样式：
1.简单点击上传（一般用于单个上传且不需要预览效果的文件上传，点击按钮弹出文件选择框）
2.显示缩略上传（一般用于图片文件上传，用户可以上传图片并在列表中显示缩略图）
3.拖拽上传（把文件拖入指定区域，完成上传，同样支持点击上传）
注：文件上传需要提供明确的文件大小和文件格式，例如：请选择大小不超过 5M 的文本文件（支持 PDF.ZIP.EXL），上传时需要有明确的进度提示。
11. 标题
表单标题主要用于统领/分隔填写内容，标题之间的合理间距将直接影响表单页的舒适度和阅读性；
表单页中对应的标题样式和间距：
1.表单卡片padding统一为20px
2.一级标题：字号为16号，标题到内容的间距为16px
3.二级标题：字号为14号，标题到内容的间距为12px
4.标题所统领内容与另一组内容之间的间距为40px
12. 表单提交行动点
表单行动点分为跟随式行动点、底部按钮组。
跟随式行动点
跟随式行动点通常为表单内容不足以撑满首屏页面时选择使用；行动点距离表单内容区域间距为40px
底部按钮组
若需要使用底部按钮组，具体规则请参照底部按钮组规则
表单详情页
构成元素
表格的组成元素有：
1.表单宽度
2.label
3.表格
4.嵌套
5.图片预览
6.标题
7.编辑
8.电梯
1. 表单宽度
表单详情最大宽度(含label)为660，最小宽度根据实际容器的大小进行适配；
2. label
- label宽度为两档80px/120px，默认使用80px；设计师可以根据业务特征和场景自行选择使用；
- 其他超长语言（例如葡萄牙语）对应两档160px/200px，默认使用160px
- 经由设计产出的label字段原则上限定为一行（根据业务诉求选择label宽度），开放给用户时，需要明确给出字数建议值（建议12个字符内）
- 同一容器内只允许使用同一种label宽度；
- 当使用120px长度的label也无法满足字符长度时，最多展示一行，超出部分末尾显示“…”
表单详情页内label对应的状态：
1.带说明图标
2.超长label
3. 表格
- 表单详情页内的表格适用于信息的收集和展示、以及操作结构化数据。它结构简单，分隔归纳明确，使信息之间更易于对比，大大提升了用户对信息的接收效率和理解程度。
4. 嵌套容器详情
- 嵌套容器详情通常由某一个选项操作进行折叠展开详情时出现，或者在特定容器下作为分隔/强调使用；
5. 图片预览
- 图片上传后的回显状态及hover效果
6. 标题
表单详情页标题主要用于统领/分隔填写内容，标题之间的合理间距将直接影响表单详情页的舒适度和阅读性；
表单详情页中对应的标题样式和间距：
1.表单详情页内置padding统一为20px
2.一级标题：字号为16号，标题到内容的间距为16px
3.二级标题：字号为14号，标题到内容的间距为12px
4.标题所统领内容与另一组内容之间的间距为40px
7. 编辑
表单详情底部编辑行动点，主要使用场景为对表单可提供编辑修改功能（可选）。
表单详情长度较短，未超过一屏（670px）时，操作按钮跟随表单
8. 电梯
当在超长表单详情场景时（表单详情高度2屏以上，并拥有3个以上标题分类时）电梯导航默认放置于内容区域顶部，滑动做固顶展示，不随页面滚动消失。
相关规范链接
1.底部按钮组
2.表单-多列
3.表格
4.表单页
若有收获，就点个赞吧
0 人点赞
