想要将这些小组件组合拼装成合适的表单却需要推敲非常多的细节

初看这些表单，你可能觉得很简单，就是一些标签、基础的小组件，但是在实际业务中，想要将这些小组件组合拼装成合适的表单却需要推敲非常多的细节，常常会让设计师陷入无限的纠结中，比如：

• 文字标签是左对齐还是右对齐？
• 确定按钮是放左边还是右边？
• 控件颗粒长度是整齐划一还是与输入预期一样错落有致？
• 反馈内容怎么显示
• ……

所以针对这些问题，我从【框架】>【细节】的逻辑与大家一起探讨「如何设计一份体验好的表单」。

01 表单拆分

在UX Collective中有个作者名为“Taras Bakusevych” 进行了详细的阐述，对表单的组成部分进行了详细的拆解与说明 ↓ ↓ ↓

（1）标签：标签文本主要是解释输入项的含义，一般不宜太长，需要简明扼要，快速让用户理解；还有一部分是告知用户哪些是必填项。

（2）占位提示：直接展示在输入项中，采用弱提示文本对所需信息描述、示意，当用户输入信息时即消失。

（3）校验：对输入项进行验证，并给出反馈提示，如：用户未填写，格式错误、内容错误等

常见的校验类型

（4）基础组件：可交互输入的区域，是构成表单的核心内容，主要有：输入框、单（复）选框、上传、时间选择器、开关……

（5）提示：描述该输入项需要的输入类型，如：上传的文件类型

（6）按钮：用户完成输入后，点击按钮进行提交、进入下一步等，按钮一般是跟随的最后一个输入项后面，若输入项超出一屏显示，则按钮悬浮固定在底部；按钮“确定”放左、右统一即可，没必要过分纠结。

02 表单类型

看了很多文章，对表单类型的划分主要是：基础表单、分步表单、高级表单（分组表单）[1]

（1）基础表单：常见于输入项较少的表单场景，如：登录、注册。

如：登录

（2）分步表单：常用于输入项较多，业务本身具有流程化特性（如：转账）

为了提高用户填写效率，减少用户心理负担，将一个冗长或用户不熟悉的表单任务拆分成多个步骤，一步步指导用户完成。

分步表单可以缓解用户需要填写较多内容时候的抵触情绪，并且通过拆分步骤，聚焦于每次填写的内容，提升用户在不同模块间的浏览效率。

来源：Ant Design Pro

（3）高级表单（分组表单）：主要用于需要一次性输入、提交 大批量数据的场景。高级表单与分步表单有点类似，都是为了减轻用户填写压力，将填写内容进行分块。不同的点在于，分步表单的流程化明显，后一步填写的内容都是基于前一步来填写、是前一步反馈。

如：站酷上传作品

但是以上说的基础表单、分步表单、高级表单都是基于业务需要而进行选择，但是实际在设计时，往往还需要考虑的是：这些表单应该是以什么承载结构展示？

是整页展示、弹窗展示、侧边栏展示？表单内部布局方式，一定是平铺的一栏么，是否可以增加侧边目录？

这些都是设计师需要进行全盘考虑的问题，所以在设计表单的时候需要先确定这些框架，由外>内，层层深入，再对细节进行处理。所以接下来我会针对如何由外>内设计表单进行详细的陈述。

03 表单页设计步骤

在详细阐述如何设计表单页前，先明确下我对于表单页的划分：

我将表单页大体划分成【页面框架】和【表单内容区】

这样划分是出于我对 AJAX之父Jesse James Garrett在2007年出版了一本名为《用户体验要素》的书，提出了从5个要素自下而上的建设用户体验，即：战略层、范围层、结构层、框架层、表现层，这种逐层的思考逻辑对于设计表单是十分必要的，因为在设计表单的时候，常常需要考虑这个表单页所需承载的业务诉求（战略上）基础上去做后面的优化体验。

所以在设计表单的时候应：

• 明确该表单的业务类型，因为不同的业务诉求的表单在设计中的展现形式会有不同，即“页面框架”会有不同（这也是我上面为何将表单页分成页面框架和表单内容区的原因）
• 在确定页面框架后，就需要对表单需展示的内容进行明确的划分，如：表单的内容是否要展示流程进度？表单内容是否有不同层级的导航？确定了这些后，我们表单内容的大致布局框架就可以确定下来，我们才能进入下一步（内容区具体的陈列方式）的设计；
• 表单内容区主要是对输入项的陈列方式，对齐方式，进行体验优化；
• 最后对所有输入项进行统一整理，检查是否与用户预期一致？与其他输入项的关系是否清晰等。

整体而言可以分为以下四步：