表单设计小结
前言
近两年接触了后台管理系统设计，其中会应对大量的表单设计，刚开始是一脸懵逼，满头雾水。看了很多相关的表单设计准则和文章，再结合自身项目经验，希望通过本文进行复盘总结，以期在以后的项目中能够更加的驾轻就熟。
概要
表单作为一种常见的信息采集方式，是与用户互动性很强的一种交互方式。对于用户来说，填写表单的预期情绪一般比较消极。所以如何设计出一份简洁高效友好的表单，对于提升用户体验来说非常重要。
目录
结构布局
标签
提示反馈
操作按钮
更多优化
结构布局
排列逻辑
字段排列逻辑一般为，根据关联性，符合常规的填写预期，从易到难设置字段，给予用户足够的情绪缓冲。
字段从易到难
归类
长表单的字段相对繁多，可以对字段进行信息分类，帮助用户更好的理解梳理信息，制造节奏感，避免用户在过度的信息迷失或者焦躁。
信息归类
列数
一般来说表单的排列方式有单列和多列两种方式。
1.单列：从人眼移动轨迹来说，不间断地垂直视觉引导，可以很好的保证填写效率。
单列视觉轨迹
2.多列：用户的填写路径具有不确定性，填写效率比较低。
多列视觉轨迹
多列视觉轨迹
3.如果是单纯的表单填写，并且垂直空间允许，建议选择单列布局。如果内容垂直高度有限，布局时可以酌情考虑选择多列。多列布局方式在后台数据检索界面也比较常见。
多列（数据检索界面）
分步骤
通过把复杂表单按步骤拆分成多个简洁界面，既能增强引导性，又能提高专注度。一般适用于填写项目较多的任务性表单，如常见的注册界面。
Ant Design pro 分步骤表单
分步骤设置表单填写时，也需要注意步骤拆分不宜过多（最好不超过三步），同时需要保持每个步骤的填写项目足够精简。否则同样容易引起用户焦躁反感，造成流失。
标签
在表单设计当中，常用的文本标签有顶部对齐，左对齐，右对齐，强制对齐，浮动标签几类，此外还有图标标签。下面将分别做阐述。
UX Matters眼动实验
顶部对齐
视觉路径流畅一致，填写效率高。但纵向空间要求较高，尤其是在移动端，单屏显示填写项相对会比较少。
顶部对齐
右对齐
填写项与文本框的视觉关联性比较强，填写效率较高。但标签左边缘不齐，字段阅读体验较差。
右对齐
左对齐
界面比较整洁，阅读体验相对较好。但视觉路径复杂，效率偏低。
左对齐
强制对齐
通过调整字段的字间距，保证左右对齐。这种方式，能够保证视觉上的整洁划一。在语言支持可能不是很友好，比如说换成英文字体可能就不适用了。
强制对齐
图标标签
用图标代替文本，作为输入项目的标签。常见于登录注册界面。
1.图标要示意明确，清晰易于识别。
2.最好搭配占位符文本一起使用，加强填写提示
语雀登录注册界面
浮动标签
浮动标签常常配合占位符文本使用。获取焦点时，浮动标签固定在输入框顶部。
单纯的占位符文本，很容易使用户认为项目已经填写。获焦时，文字消失，又会造成用户的记忆负担。浮动标签能够弥补这些问题，配合一些优雅的动效，也能更好的提升用户体验。尤其是在移动端，浮动标签的设计模式能够很好的利用有限的空间。
google账号登录
提示反馈
表单填写时，及时有效的填写提示和错误反馈，能够帮助他们更加顺利的完成填写任务。
显示位置
常见的提示、反馈信息的显示位置大概有三种：输入框下方，输入框后后方，悬浮气泡。
输入框下方显示
提示框后方
悬浮气泡
何时显示
提示信息最好在用户填写之前显示，让他有个心理准备知道应该如何输入。填写的提示信息显示大概有三种，①长久显示、②占位符文本、③聚焦显示
提示信息出现模式（以文本框下方位置出现为）
建议占位符文本尽量和聚焦显示搭配使用。当然，在登录注册等用户已经非常熟悉填写项目，且填写项目比较少时，也可以直接使用占位符文本提示填写。
2.在用户输入的同时进行验证，及时给与错误反馈，不要在用户完成项目填写提交后，才反馈错误信息。
亚马逊商城注册界面
AntDesign 登录界面
建议方案
下图的填写提示，错误反馈方案是我在目前的项目当中比较常使用的，提出仅供参考。
1.初次定焦：界面载入后，初次定焦到填写项，显示提示信息，没有提示信息就不显示。
2.输入错误或者输入中：输入时，进行实时验证，及时给与反馈。
3.正确输入：不显示提示信息和反馈信息，输入框处于正常对焦状态
常用提示反馈机制
显示什么
首先，不是所有填写项目都需要提示信息。其次，提示信息应该显示什么才是有效的内容，也值得我们思考。
填写提示
错误反馈
在涉及到需要采集用户先对来说比较隐私敏感的信息时，需要给出明确的解释，告知采集相关信息的用途并且保证会维护用户的信息安全，避免用户的疑虑和反感。
操作按钮
按钮位置
左对齐：操作按钮与输入框左对齐。界面整洁，视觉路径和操作路径短。
左对齐（AntDesign表单）
悬浮固定：表单比较复杂或界面内容过多时，需要向下滑动查看，这时将操作按钮固定在页面底部，操作可以更为方便。
底部固定（AntDesign Pro 高级表单）
更多优化
精简项目
在设置表单填写项目时，要反复斟酌，该项是否必要。高效的第一步是精简，精简，再精简。
标注必填项
对于必填项目，最好给予必填提示（*或者其它），方便用户快速跳过非必填项目。
自动对焦
载入填写界面时候，可以自动定焦到首填项，弹出键盘，帮助用户快速进入输入状态。
输入替代
在输入手段中，内容键入的效率非常低。所以要尽量减少填写，可以使用点击、选择、智能补充匹配等方式来替代手动输入。
选择替代输入
智能补充代替输入
掩码格式化
当用户输入银行卡号，电话号码等有固定格式的内容时，系统会自动对输入文本进行格式化。用户不需要考虑使用空格，括号，破折号等格式问题，只需要关注内容即可。减轻用户输入负担。也可保证后台采集信息的标准统一。
掩码格式化
键盘优化
通过对填写键盘的优化，也同样可以提高填写效率。
1.弹出键盘适用于输入的内容类型，数字键盘，英文键盘，中文键盘或者其他。
2.按键功能灵活利用。如，淘宝追加收件地址时（移动端），键盘当中的确定键可以实现当前项输入确定，还可以快速移焦下一项。
淘宝网追加收件地址
才薄识浅，定有很多不足，未涉及之处。在今后的工作过程中，会继续的关注总结，不断完善，也请大家多多交流和指教。
参考资料
https://ant.design/index-cn （Ant Design 设计体系 ）
https://www.smashingmagazine.com/2017/06/designing-efficient-web-forms/ （作者：Nick Babich）
