结合最近的读书笔记和自己的工作经历探讨一下表单设计中的一二
如何定义表单，表单的构成元素有哪些
表单无处不在，表单主宰者我们生活中涉及到信息输入的一切，表单在互联网产品中有着十分重要的作用，我想可以毫不夸张的说，表单是人们与网络世界发生互动的入口，表单的重要性不言而喻。那么我们该如何定义表单，只要有允许用户输入信息和提交信息的页面，都可以称作为表单（传统的纸质的手写的表格也属于表单），表单承载着所有手动的信息源录入的入口，优秀的表单设计可以极大的提高信息录入的效率。
哪些信息的综合才能被成为表单呢，表单的构成元素主要分为三块：信息标签，信息输入控件，动作。具体的内容将会在下文详细阐述
信息标签
在一个表单中文本相关的内容都可以被归纳到信息标签一类中，常见的内容包括标题、提示信息、帮助文字、状态信息等，本质上来说这些信息标签的存在都是为了人们能够更高效的完成表单而存在。首先我们来说一说标题，标题对于一张表单来说就像是一个表单的眼睛，标明当前表单主要目的一句文字描述，对于用户来说猛然进入到表单页面，一个能够说明当前是在做什么的表单标题对于消除用户的疑虑有着很显著的作用，表单标题的文字描述不需要在标题中使用过多的修饰词（甚至不使用修饰词），告诉人们在填什么表单，填完后能干什么，提示信息、帮助文字和状态信息也是如此，以简洁高效的传达信息为主。对于表单填写页面来说，需要尽可能的去除任何会分散用户填写表单时注意力的媒体信息，以营造沉浸式的表单填写环境。
对于这一类的信息标签，我们在撰写的时候需要遵循以下几个关键的描述方式：
- 文字描述尽量简洁直观，避免出现冗长累赘的文本需要用户阅读
- 用词尽可能能够贴近用户的使用场景
- 尽量使用简洁肯定的语气描述
- 同一类的信息标签字数上尽量满足视觉上一致性的要求
常见的表单信息输入控件
表单中的动作设计
对表单动作的设计也是组成表单非常重要的一个模块，合理设计的动作可以减少用户对表单产生误操作的概率，也可以提高表单的使用效率。上述列举了表单的基础构成，那么当一个表单仅仅是一堆表单控件的堆砌，并不能构成一个完成的表单，也并不能让用户完成表单的填写，更不可能得到我们期望的填写体验。
根据填写表单的动作时间可以分为三个类：起始动作、过程动作和终止动作
- 起始动作：开始（表单入口）
- 过程动作：进程指示器，快捷键设计（主要为Tab键等快速切换），分步按钮，外部链接
- 终止动作：撤销，重置，分步按钮，提交（完成）
表单的反馈设计
我们期望用户给我们是有用数据，也希望用户能够一气呵成完成表单的填写，但是当用户费尽心思的填写表单时，难免会对表单列出的内容发生误解，从而输入了一些错误的信息，这时候就需要触发表单的校验反馈机制。我们不得不打断整个沉浸的填写过程，告诉他：不好意思，刚刚这个地方你填的不对。
那么在表单的反馈中，该如何设计反馈机制才能将这种错落感降到最低，首先就是我们对有特定要求的数据进行实时校验。哪些数据最好进行实时校验呢，首先就是类似于手机号码、证件号码这一类有着明显格式属性的信息，这一类信息一旦错误，对我们来说将毫无价值，还有一类如密码的设置这类信息需要对其安全性进行校验和计算，通过页面反馈基于用户当前安全、重要程度的提示.
根据长期的表单设计的经验，总结了一下几点：
- 表单项目填写时的错误反馈，实时校验，尽早验证给予用户反馈
- 表单填写完成后给予用户正向激励式的反馈
- 填写表单的过程中的慎用弹窗反馈
弹窗实际上是一种用户体验非常差的交互机制，一而再的弹窗会打断人们思考问题的逻辑，会增加了操作的复杂性，弹窗后还需要去阅读弹窗内容，寻找关闭弹窗的方式。我们需要尽可能的去营造沉浸的填写体验，使表单填写一气呵成
简单易用的表单的其他一些关键特征
由于文章篇幅的原因，还有很多综合性的表单设计技巧无法一一详细展开叙述
- 一页表单只做一个主题的事，沉浸在当前的信息中，对于较长的表单建议采用分步导航
- 页面上尽可能的排除与填写当前表单无关的一些视觉元素
- 将表单的内容最好按照逻辑顺序进行分组
- 在有大量表单的页面，视觉效果上应该尽可能的采用简洁的设计风格，过多的视觉信息会打破沉浸的填写体验，弄巧成拙
- 表单的控件要兼容市面上的全部主流浏览器
- 表单在填写时，视觉上最好能够拥有一条清晰的自上而下的视觉线
- 表单的排版方式：左对齐>顶部对齐>右对齐（具体的原因将会在其他文章中细说）
上文主要和大家讨论了我在仅有的交互设计工作经历中总结的一些心得，肯定有很多观点还存在不成熟的地方，接下来仍会不断的学习，同时完成本篇文章时也吸收和借鉴了很多前辈们的书籍和文章中的观点，在此一并表示敬意。
参考资料：
《Web Form Design: Filling in the Blanks 》
《Forms taht Works Designing Web Forms for Usability》
最后欢迎关注我的微信公众号：李李先森的康
我会持续的分享我的设计实践心得和学习笔记
扫一扫
2293
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
