最近在做“新建任务”的优化，期间涉及到一系列的表单设计。在制作过程中，发现我对于这部分的概念是比较模糊的，所以就想针对表单的体验设计做一个学习和总结，加深自己对表单设计的理解。

好的表单使用户轻松易于理解且让人感到舒适的，能够帮助用户更好的对它们进行填写，有助于实现业务成功。但是，不友好的表单，不仅会导致转化率降低和用户流失，而且有时甚至会破坏整个网站的体验。这就是为什么精心设计的表单对于好的应用必不可少。为了使应用程序能够处理用户的请求，他们需要访问用户在输入表单中引入的数据。如果您的用户在填写表格时中途感到疲倦，无聊或分心，则表示表格已失败，很有可能使您失去潜在客户。

一、什么是表单

表单在网页或 app 中主要负责数据采集的功能。也就是说，大部分起到了数据采集功能的模块，我们都可以称其为表单。表单本身只是一个数据采集的工具，本身不具有属性，它可以被灵活运用于多种功能模块中。

举个例子，用户新建任务，需要提供任务名称（表单1），包含人员列表（表单2），接收方（表单3），任务紧急程度（表单4），参与人员（表单5）等。

拆分表单

表单结构为：表单标签（标题）、表单域（输入框）、表单按钮。三部分组成，但我们作为设计师在设计时，考虑的远远多于这三部分，我们更多是去做交互上的思考。

从交互层面上思考，表单在设计上的结构有：

表单标签

承担着对输入项或设置项的解释作用，所以表单标签需要合理设置，核心点是帮助用户快速理解每一项字段的作用。

输入限制

例如任务名称输入框限制为30个字符。

占位符

使用通用的认知提示并且以较弱的方式呈现给用户，用户填完信息即消失。注意：占位提示不能替  代标签，因为消失的占位提示会拉长用户的短期记忆，如果没有表单标签用户将无法在提交表单前检查他们填写的所有信息。

表单类别

第一时间告诉用户此段落的表单大致内容，减少用户理解并承担着概括内容的作用。

输入框大小

设计表单域（输入框）时，我们所画的输入框，在做输入框尺寸时，需要根据内容的长短，合理地设计输入框大小。

输入框焦点

在输入框中单击鼠标会出现插入点光标,我们可以直接在输入框中输入文字或文本信息。

多行文字规则

在表单当中，多行文字一般出现在两个地方，一是表单标签，二是行内信息。

报错提醒

对输入框里的内容进行校验。

唤起键盘样式（移动端专属）

在移动端，只要涉及到表单信息录入，都会唤起键盘，根据不同的使用场景给用户唤起不同的键盘样式，可以很大程度上节省用户的时间，用户体验也会得到显著提升。

帮助性信息

在移动端，只要涉及到表单信息录入，都会唤起键盘，根据不同的使用场景给用户唤起不同的键盘样式。

表单属性（是否必填）

必填与非必填的区分

结果反馈

用户在完成表单填写，并提交后，需要及时给用户反馈，比如完成提交时的成功或者失败。

微文案

用以提示用户接下来怎么操作。

1. 标签

在设计表单时到底是左对齐、右对齐还是顶部对齐呢？这个问题也是在实际业务中设计师发问频率较高的一个棘手问题。其实，不论是哪种方式都有相对的利弊，需要根据实际业务场景提供不同的解决方案。在Matteo Penzo《Label Placement in Forms》文章中有分享过关于表单标签放置的研究，下图是Matteo Penzo研究总结得到的浏览时间表：

此处所讲的标签，更多的是讲表单的布局结构，合理的表单结构，能提高用户阅读效率，同时还能降低信息填写时的错误率。

表单字段顶部对齐（上下结构）

将表单标签放置在其对应输入字段的正上方，并垂直左对齐排列，用户只需依次向下浏览即可看到标签与输入字段两个元素。其优势是横向屏幕空间足够，能够比较友好的适配多语言。并且根据上面Matteo Penzo的时间表上看，顶部对齐的浏览和填写的效率也是3种常规的对齐方式中较高的一种。不足点是会占用较多的纵向垂直屏幕空间，此外应当注意每组表单标签和输入字段与其他字段组的间距，以免层级区分度不够的问题。

表单字段左对齐（左右结构）

将表单标签放置在其对应的输入字段的左边，标签左对齐。表单标签和输入字段距离较远，用户从左至右浏览时间变长，并且根据上面Matteo Penzo的时间表上看，左对齐的浏览和填写的效率是3种常规的对齐方式中最慢的一种。

但是，如果业务需要用户对表单放慢速度并谨慎填写（复杂表单或者表单中含有大量高级设置的陌生数据时），左对齐的方式会减少部分用户的出错率。

左右和上下结构，左右结构常用在 pc 端，左右结构在用户体验上，视觉路径相对较长，特别是在多行信息录入时，尤其明显。

但在网页端我们大多看到的都是左右结构，这是因为有空间占比的元素，在 pc 端，横向空间很大，需要考虑到协调的关系，如果采用上下结构，在内容过多的情况下，就会出现重心偏左的视觉效果。

而且，在 pc 端，视线距离屏幕较远，视觉聚焦面积更大，因此视觉路径较长的这一点就被中和掉了。

因此在 pc 端，如果展示内容较多，可以选择左右结构。

而内容较少，在五个或以内，就可以选择上下结构。

而我们在移动端很少见到左右结构，这是因为移动端的限制——屏幕太小，一个横屏展示不开，特别是在标签名字很长的时候，弊端更加明显，因此在移动端更多的是使用上下结构。当然缺点除了识别度会降低，视觉路径增长之外，纵向空间占比也会增加，本身一屏就能 展示完，现在需要两屏甚至更多。

而我们在 pc 端，如果标签名字太长，也是可以选择上下结构。根据不同的使用场景，选择相对最合适的方案。

除了常见的左右，和上下结构，还有内部结构——将标签放在输入框内部，这种也常用在移动端，它的空间占比很小，对移动端的小屏来说，是非常友好的，但如果在交互上处理不好，会有很大的缺陷。

内部标签结构，只有提示性文字，用作提示用户应该输入什么内容，但用户在输入的时候，内部的标签/提示性文字就会消失，这时候，用户会失去它是否输入准确的唯一判别标准。

而用户如果需要判别自己是否输入准确，需要删掉自己刚刚输入的文字，看一眼提示信息，再次输入。如果碰巧遇到有怀疑心的用户，这种设计会让用户抓狂。

如图下所示，当字段大于三个的时候，用户再看到这个表单，会对自己填写表单进行思考，思考自己填的是什么，甚至会对自己填写信息的正确性进行怀疑，这种现象从心理学角度来看，是因为人的瞬间记忆局限所造成的。

人在短时间内只能记住 5～9 个单位，即「7 加减 2」法则，这是大部分用户的极限，但设计不是要去挑战极限，而是要思考，还有一部分用户是远远达不到「7 加减 2」这个范畴，因此，在设计的时候，就需要降低用户的记忆门槛，采用更加适用的「2 加减 1」原则，当用户需要输入的字段多余三个的时候，就必须给表单留下标签，用来提示用户。

当内容过多，你根本不知道自己填写的是什么。

尼尔森·诺曼集团的凯蒂·舍温（Katie Sherwin）在她上传的文章中提到将标签替换为占位符的七个不好的原因：

• 消失的占位符文本会使用户的短期记忆紧张

• 没有标签，用户无法在提交表单之前检查所填写的内容

• 出现错误消息时，人们不知道如何解决问题

• 当将光标放在表单字段中，占位符文本消失时，使用键盘导航的用户来说很不友好。

• 其中包含的字段不太明显。

• 用户可能会将占位符误认为是自动填写的数据

• 有时用户必须手动删除占位符文本。

对于上述观点，我赞同部分，对于第六条，无论有没有标签，占位符都存在，除非删掉占位符，当然，在占位符的文案阐述有歧义的时候，会出现这种情况。

第七条完全就是一个 js 触发条件的配置问题，而且在 html 中 input 标签中的占位符的默认属性，在获取焦点后，输入时，占位符会自动消失。因此一般情况下，是不存在需要手动删除占位符的。

在有些场景，因为空间占比或视觉等因素，需要删掉标签，可以采用下面两种方案：

第一种，在内部加入 icon，用作信息提醒（钉钉任务流程表单采取的这一方式，大家可以去看看。），缺点是 icon 属于图画，是一种很抽象的东西，相比文字，它的表达能力就太弱了，碰到同类信息时，识别度不是很高。比如有两栏信息，一栏是籍贯、一栏是现在居住地址，很难用 icon 去区分两者。

第二种，是谷歌的一种设计方式，用户在输入时内部标题（提示信息）进行浮动位移，即节省了空间，提示性信息依旧在；缺点是，相比普通左右或上下结构需要一定的开发成本。

2.输入限制

为什么要做输入限制，一是为了陈列这些数据时，可以根据长度来确定它的一种展现方式，二是为了减轻数据库的压力。输入限制有两种。

第一种是对表单域输入的信息进行字数限制，比如发表 QQ 个性签名时的字数限制。

在用户输入的时候，右下角会告诉用户已经输入了多少字，如果超过 80 字后会变红色，用来警示用户，并且此时的表单域也无法输入新的内容。

饿了么用户评价时采用的也是这一方法，只是超过一定的数字没有提示，只是不能输入，这点体验不太好。

微信在朋友圈发表时，做了字数限制，但没有在输入过程中明确地告诉用户，等到输入过长提交时，弹窗提醒用户，内容过长提交不了，用户精心编辑长文，到了提交的时候，却发现字数过长，又不得不删掉一些自己已经写好的东西。因此我们在做了限制的情况下，需提醒用户还剩多少字。

第二种是做属性限制，比如在数字文本框时，输入汉字，或者字母，这就极大地增加了用户的错误率。一般情况下，开发小哥都会写上这个限制条件，但有些时候可能会因为一些原因，比较着急，直接使用「input」框默认的「text」类别，没有加限制，这个时候我们如果在测试过程中发现了该问题，就需要去提醒开发小哥。

而且，根据不同的信息类型，要给相应的属性限制，比如身份证的 18 位，手机号的 11 位等。

3.占位符

在前边，也讲过占位符的一些问题，在设计中我们要注意文字清晰明了、简短一致，在颜色选择上，作为提示性信息，视觉层级较弱，不宜用太过突出的颜色。

为什么说必不可少，我们不妨试一下，将占位符删掉，是不是看着有一点别扭，因为长期的占位符已经给用户培养了使用习惯，没有占位符，用户在输入的时候会抱着试一试的心态去点击，会疑惑是不是应该在这里输入，不够直接清晰，对用户来说是很不友好的。

而且，在 HTML5 中，input 标签中有 placeholder 占位符这个属性是有一定原因的。而我们加入占位符，用户在填写表单的时候，一眼看上去就知道应该在哪里填写，怎么填写，清晰明了。

用户在输入时，视觉焦点是在输入框，此时如果用户忘记需要输入什么。会做视线偏移，去看标签名字，再输入，即使这个过程哪怕只需要 0.05 秒，但对用户来说，依旧不够友好，如果在提示性信息就明确表示输入什么，用户可以一目了然。

而且，在某些场景中，一个输入框可以输入多种信息比如登录界面，在用户名可以输入邮箱、手机号、用户名，这个时候我们如果用标签来提醒，显然是不合理的，而占位符可以起到很好的提示效果。

4.输入框大小

我们在设计表单域（输入框）时，我们所画的输入框，并不是前端在写的时候真实的有效输入框，而需要考虑的其实有两个元素的大小，其中外部我们能看到的部分为可视大小（暂称为 input 框），内部为有效输入框大小（暂称为有效输入框）

图中的红色区域就是有效输入范围。

在Ant Design 4.0 系列分享的文章《整齐划一？不如错落有致》中分析到错落有致的排版表现似乎比整齐划一的左图更舒适，因为在视觉上我们更容易将右图的空间和内容视为一个和谐的整体。但左图过度的对齐导致暗示隐性的截断，我们惯性视觉会产生表单字段右侧空间缺了一大块的错觉。

文章总结到「表单宽度的处理方式核心旨在解决两个问题：1. 暗示填写内容长度；2. 表单项布局排列效果，我们通过设置合理的默认宽度尺寸和描述关系，就可以让设计师们跳过部分繁琐磨人的细节思考，快速搭建表单宽度合理且舒适的页面。」如下图所示：

4.输入框焦点

输入框焦点，对于输入框，当用户选中准备输入的时候，应当提供清晰的视觉定位，比如外输入框的样式的变动，或者闪动的光标。一般情况下，选择光标都默认存在，光标的大小取决于字体的大小，因此不用对光标进行二次设计。

6. 多行文字规则

在表单当中，多行文字一般出现在两个地方，一是表单标签，二是行内信息。

在做标签的时候，有时候会出现一个名字很长的标签，我们给文字设定宽度和行高，我们给出规则，比如最多五个字，超出部分做换行处理，我们需要给标签的行高和宽度统一。

因为开发在写这个页面的时候，是把每一个元素放在一个 class 统一的 div 或者 span 标签内。因此我们在做设计稿的时候，需要把换行元素考虑进去，即使只有一个字，避免以后二次设计和开发。

在做表单域的行内信息换行时，我们需要给出横向字数宽度，和上下左右的间距。也就是开始我们要画出 input 框的原因，开发可以直接根据 input 框进行定位。

且当内容过多的时候，我们需要做隐藏处理

比如设定输入 4 行文字以内，随着文字每增加一行输入框会自动向上撑开。文字超过 4 行，输入框大小就不会变动了，4 行以上的文字会被遮挡住，但我们在给文字做遮挡的时候，要注意提醒用户上方有文字被遮挡。一般采用的方式是对最上方一行文字遮挡一半。

上述情况只在输入框空间占比很小，同时多行文字出现较为频繁的场景下才会使用。比如实时聊天界面。

而在一般情况下，只给输入框做单行处理，同时给超出部分文字做隐藏。

而明确需要多行输入的输入框，会在大尺寸大小上做区别，正如我前边所提的那样，输入框的大小或影响用户对该输入框内容输入多少对判断，输入框尺寸大，在用户潜意识里就会认为这是可以输入很多字的。

而多行输入框在 ant design 中被定义为文本域。

即：

超出部分是自适应高度，还是显示滚动条，需要标注出来，并且要指定最小行数，和最大行数。

否则开发会采用默认的以滚动条的形式来展示。

本项目中采取的是第二种方案的同时也要限制一定的字符数，当超过一定的字符时给用户提示。

7. 报错提醒

我们有时在填写一个表单，全部信息填写完成，在点击提交后，突然弹出一个框，被告知信息填写错误。自动返回填写页面，之前的填写好的信息全部消失不见，这种行为对于用户来说，其实是很抓狂的。脾气暴躁一点的，可能会直接砸电脑。

因为用户在填写结束之后，大脑中分泌多巴胺，获得愉悦感，但在这个时候一个报错，把临到脑门的多巴胺给硬生生逼了回去，是很影响用户心情的，无论表单中所承载的信息有哪些，都应该让用户感受到引导感。用户所需要的是引导他完成表单的填写，而不是对他填写表单做判断。

校验时机

我们在用户输入的时候，就应及时针对用户录入的信息进行判断，有些前端自己就能做（实时校验），通常都是 数字、非空、长度  等内置验证规则。

有些需要扫一遍数据库，做信息对比，然后告知用户信息是否有问题（统一提交验证）。

总之及时做判断，并给出反馈，同时引导用户完成正确填写操作，不要等到用户点提交按钮后，才给用户做出判断。

错误提示校验

错误校验提示一般存在于错误率较高情况下出现，如：在登录注册时，要求用户填写手机号，如果用户输入的手机号码不符合特定的输入格式，那么这时候需要明确标记错误原因，准确的帮助用户找到问题并解决，避免错误提示描述模糊不清误导用户。错误提示一般会采用「双重视觉强调」来显示错误，除了输入框突出显示外，同时需要在输入框下方加入红色指导文字。如下图所示为百度登录注册场景下的截图：

如果只是单一的校验，或者错误提示不在要校验的信息附近（就近原则），很容易让用户摸不着头脑，就是校验信息不明确。

限制与格式提示

在表单中如果出现特定格式时务必要提前告知用户。可以在输入框中显示概括回答的方式引导用户，如：请输入日期，eg：mm/dd/yy。这样便于帮助用户提前感知，减少表单填写错误率。

8. 唤起键盘样式

在移动端，只要涉及到表单信息录入，都会唤起键盘，根据不同的使用场景给用户唤起不同的键盘样式，可以很大程度上节省用户的时间，用户体验也会得到显著提升。

如果我们在交付设计稿的时候，没有标注键盘类型，开发就会使用默认的中文键盘，用户在使用的时候，就会造成不必要的困扰

有些金融类产品需要使用乱序的安全键盘，也需要额外标注。（这里会涉及安全性能的考虑。）

在移动端输入端时候，有时候唤起键盘，会遮挡掉关键性按钮，我们在设计过程中，就需要充分考虑到这一点，并且规避掉。

具体做法可以参考以下两种方式：

第一种，前端不给上边元素定位，唤起键盘时，键盘自动顶上去。适用于内容简单，且上方无重要内容的页面。

第二种，界面字段少，可以在安全区域内设计相关内容。

9. 帮助性信息

有时候需要帮助性信息，来辅助用户完成表单填写，当文本简短的时候，可以直接放在该输入框的附近，当文案过长的时候，就需要做气泡框，获取鼠标焦点，则展开信息，失去焦点则消失，在气泡展开时，切勿挡住输入框。

也有些产品是将帮助信息放在页面顶部，如果是真对全局帮助性信息，则可以采用这种方式，如果只是真对某个元素提醒，则应将两者放在一起，让用户知道当前处于什么地方，在针对什么进行引导、辅助。

10. 表单属性

用户在面对需要录入信息比较多的表单时，内心是很抗拒的，而用户所填写的信息，又是产品所需要的。因此我们可以针对信息做一些筛选，将一些重要信息和非重要信息区分出来，减少用户的录入负担，也减少用户的时间成本。

11.结果反馈

用户在完成表单填写，并提交后，需要及时给用户反馈，比如完成提交时的失败/成功等。

在某些时候因为其它因素，提交失败，需要及时反馈用户，并且要一定要将之前所填写好的数据保留下来，不要让用户输入第二次！

12. 微文案

无论是标签、还是占位符，还是提示性文字，或者反馈性文字……表意都必须清晰易懂，同时需要消除用户的疑虑，在整个流程中，做出更快更准确的抉择。

比如这个地方，用户手机号录入错误，但需要详细的提醒用户，到底是哪里错误，而不是含糊不清的去告诉他错了，我在前边依旧讲过，用户需要我们发现错误，并做出正确的引导，而不是一味的告诉用户他错了。

再比如，用户在填完一个表单，突然要关闭，弹出弹窗，确定要取消，一个按钮是确定，一个按钮是取消，就很有歧义，会给用户造成选择困难。这个就是在提示文案中，产生了与按钮会产生歧义的词。

表单类型

• 基础表单

较为简单的一类表单，把所有表单字段平铺在页面中，字段内容较少。当用户输入少量信息即可完成一个简单快速的任务。例如：此类型表单常常用在简单的登录注册中。

• 分步表单

较为复杂的一类表单，把一个相对复杂的表单字段拆解为多个步骤进行。根据业务属性进行步骤分组利用步骤条告诉用户所完成的流程和进度，当用户每次填写都意味着一次节点完成，整个流程结束给予明确的结果反馈，并以提交成功为最终。分布表单有利于减轻用户由于表单大而复杂的造成的填写负担，并且能减少用户表单填写出错率。

• 分组表单

将一个复杂表单拆解归类分组。分组表单与分布表单特点较为相似，都可以减轻用户因为表单大而复杂的造成填写的负担，并且能减少用户表单填写出错率。

优化与体验

单列布局or多列布局

多列表单字段会导致用户视觉路径变长，因为如果表单中有水平相邻的字段，则用户必须以Z样式进行视线扫描，整体的效率和工作量都更大，使清晰的路径变得模糊并加长用户阅读时间。多列表单可能会存在用户跳过他们实际要输入的必填字段，将数据输入到错误字段中。而最终校验信息时用户得反复检查错误项导致用户放弃填写。

如果表单使用单列，则完成的路径是页面垂直向下的一条直线，单列布局能够给用户呈现一条清晰的视觉路。因此，表单较为简单时尽量避免将表单分成多列，在业务场景允许的情况尽量使用单列（部分业务诉求和一些特定场景要求，多列布局会更节省垂直空间，但是多列布局需要考虑字段之间的关联性，这里不强求一定只能使用单列布局）。

将复杂的表单分为几个简单的步骤

在设计师设计表单时可能业务场景复杂、字段较多，即使设计师把很多不必要的字段都删除也解决不了根本问题。所以，这时候设计师需要将大型任务分解为一系列较小的任务，使得表单更加的简洁。这种方式的好处是能将步骤以视觉的方式传达给用户数量、名称、说明等信息，更加提高用户满意度并且能激励继续填写。

但是设计师需要注意的是不要太过于细化步骤以及在小型弹出窗出现过多的步骤，过多的步骤不利与用户填写和记忆，反而增加用户负担。

按钮的位置

按钮放在页面左下角比较好还是放右下角比较好？这是设计师在设计表单时常常纠结的一个问题。其实在14世纪西方活字印刷术的发明人约翰·古腾堡提出一个概念古腾堡法则（Gutenberg Diagram），又称对角线平衡法则。它指出用户在浏览页面或一些布局时，视线往往趋向于从左上角到右下角进行扫描。左上角是第一视觉落点区（主视区），而右下角是最终视觉落点区（终点区）。与之相对，右上角和左下角则是视觉盲点。用户的视觉移动端规则是从上到下，从左到右。

所以，界面中的左上和右下是用户视觉最为重点关注的位置。遵循古腾堡法则，设计师应该把界面的关键元素放在主视区，终点区可以放按钮、强提示，盲点区可以用来放一些相对次要的内容，如辅助图形、文字信息。

同理，表单中会出现组合按钮，比如：取消与确认、提现与充值。根据古腾堡法则，用户使用界面时从第一视觉落点区是主视觉区(Primary Optical Area)，最终停留在结尾的终点区(Terminal Area)。

布局与排版

常规布局（简单）

在实际业务中当表单字段较为简单时可使用，表单字段至上而下单列排列布局，用户只需纵向阅读填写，填写完成率较高。

多列布局（较复杂）

垂直空间有限并且表单含有较多填写字段的复杂表单时，可将具有相关联字段放在一个卡片区域中进行归类，将多个字段组合在一行，形成多列排布的暗提示帮助用户更好理解。

区域分组布局（复杂）

表单含有较多填写字段的复杂表单，可将具有相关联字段进行分类并以标题区分的形式进行字段分组，并且表单字段都在一个卡片区域内。

卡片分组布局（高复杂）

卡片分组布局一般用来处理高复杂类型表单。当业务中希望页面承载众多表单字段时，可将信息相关性弱的字段拆分为多个部分，并通过多个卡片分组承载不同类型字段，每个卡片都需有个卡片类别标题。

希望大家能够通过此篇文章更多的是受到启发（而不是限制），能够在日常工作中灵活应用并举一反三。这里需要强调的是作为产品设计师不论是表单设计还是全局的页面设计，都需要有理解业务本质的能力和全局的业务思考能力。

部分图片来自网络若有侵权请联系我下架。写的不好请大家拍砖。

参考链接：

https://www.uisdc.com/form-design-1#

https://www.uisdc.com/middle-form