表单按钮
操作区按钮的点亮规则
- 若录入项很少且用户有明确预期按钮何时可用,可在必填项未未填写时置灰主按钮。
- 若录入项较多,且用户不清楚为什么按钮不可用,此时按钮可常亮,并在用户点击时给予反馈,告知错误原因。
操作按钮的位置
- 录入量较少不足半屏-跟随表单结尾处展示
- 录入项较多，固定在页面底部
表单展现
基础规则
方便理解
- 明确必填项
- 使用正确的输入框类型，用户知道应该输入什么内容。
- 复杂字段的解释，使用帮助图标，悬浮展示tooltip
- 可以不需要用户填写的内容，系统自动带出
- 提供默认值或默认提供固定格式
表单宽度
之前大部分是采用的输入框宽度对齐的样式
不过输入框不同的长度会更加错落有致，并且暗示不同的输入内容长度，因此比较建议采用不同的长度
标签对齐
| 优势 | 劣势 | |
|---|---|---|
| 左对齐 | 方便查看字段 | 字段过长，则输入框会和字段间隔很远 |
| 右对齐 | 方便一条线上查看字段，同时衔接输入框 | 横向占用空间大，标签的查看率没有左对齐好。 |
| 顶对齐 | 信息浏览和填写效率高，一行多个输入框时方便对齐，字段较长也可完美兼容 | 纵向占用空间大 |
内容较少
使用弹窗+单列布局
内容较多
使用步骤条
- 步骤条用于表达长流程中，完成任务所需的步骤数，以及展现用户当前所在的步骤。
- 当完成任务的步骤≥３步时，需要显示步骤条；小于3步，则无需展示。
步骤条中需显示完成该任务需要经历的环节，“完成”不算在步骤内。
信息分组
内容过多的时候，通过信息分组，可以降低用户的理解和操作成本
必填项划分
- 相关性划分
表单提交
防止用户出错
- 表单的格式校验
- 提交时的校验
- 填写内容后返回，需要进行确认
- 校验提示具体错误原因，提示可以放在输入框右侧
- 双列的时候怎么办？
表单适配
表单做定宽还是自适应
建议定宽，如果自适应，也需要确定一个最大宽度，避免拉到页面那么长
下面是组件高频的宽度参考
XS(80~160px)、S (160~280)、M(280~360px)、L (360px~480px)、XL (480~560px)。
XS=100px、S=208px、M=316px、L=424px、XL=532px)
双列布局也建议定宽，不建议根据页面显示2列/3列，这样有关联的内容容易错行。
参考文章
若有收获，就点个赞吧
0 人点赞
