前言

近两年接触了后台管理系统设计，其中会应对大量的表单设计，刚开始是一脸懵逼，满头雾水。看了很多相关的表单设计准则和文章，再结合自身项目经验，希望通过本文进行复盘总结，以期在以后的项目中能够更加的驾轻就熟。

概要

---

表单作为一种常见的信息采集方式，是与用户互动性很强的一种交互方式。对于用户来说，填写表单的预期情绪一般比较消极。所以如何设计出一份简洁高效友好的表单，对于提升用户体验来说非常重要。

目录

---

结构布局

标签

提示反馈

操作按钮

更多优化

结构布局

---

排列逻辑

字段排列逻辑一般为，根据关联性，符合常规的填写预期，从易到难设置字段，给予用户足够的情绪缓冲。 

字段从易到难

归类

长表单的字段相对繁多，可以对字段进行信息分类，帮助用户更好的理解梳理信息，制造节奏感，避免用户在过度的信息迷失或者焦躁。

信息归类

列数

一般来说表单的排列方式有单列和多列两种方式。

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）