在互联网产品中，表单一般被用作数据采集的工具，常见于很多B端后台产品、业务系统等场景，C端注册、登录、购物结算、个人信息填写、问卷调查等场景中。表单是用户输入的主要窗口，也是用户购买、注册等过程中必不可少的关键环节，对于产品的商业目标产生着巨大的影响。

常见的表单

00表单展现的形式

表单出现的形式，与输入空间的大小、上下文之间的联系等有很大的关系。

新页面：在新的页面显示，一般搭配面包屑导航使用，适合独立的主题、输入大量的数据。

模态弹窗：模态弹窗的形式，减少了页面跳转，也能让用户保持对输入部分的关注。但不适合层级较深的输入。弹窗之上再出现弹窗，过多的层次会导致用户失去方向感。

滑出：从页面的四周划入页面，与触发部分的上下文联系较为紧密，空间较大。

弹层：比模态弹窗更轻量，适合快速、简短的编辑与输入。

内嵌：不展开新的页面，而是将下方内容推开，形成一个临时的输入控件，输入完毕即消失。输入部分与上下文联系紧密，整体较流畅。输入部分空间较大，但是页面跳动会比较剧烈。

表单的形式

01表单结构

01-01设计原则

首先，没有人喜欢填表。所以要尽量减少填写表单的时间，减少出错的可能性，减少痛苦。即让人们在最短的时间、准确无误的填完表格所需要的内容。

当表单过于复杂、混乱、提出的要求超出必要的范围时，用户的退出路径会被激活。设计者应当关注人们要完成的事情，而不是为了满足数据库的要求而设置输入框。

知道你的受众是谁

《Web表单设计》一书中说：先考虑人，再考虑像素。受众决定了你问的问题、问问题的方式等等。了解用户的目的才能将之与我们收集信息的目的结合，最终达到让用户愿意填完表单的目标。

考虑情境

任何解决方案都有优点和缺点，要基于情境、目的（减少空间占用、减少页面跳动过大、让视线流动顺畅、增加各部分联系、区分不同选项、提升效率/让用户聚焦等）来综合选择合适的解决方式。

循序渐进

先让人们了解填写表单的收益，他们才会愿意付出填写表单的时间与精力成本。类似于ToC类的服务应用，先让用户明白用上了之后会有什么便利、优点，才会更有动力去注册。在要求填表之前先让用户使用，形成一定的习惯，在必要的时候再要求用户填写表单注册、提供邮寄地址等信息，更能让人愉快地接受。

构建对话而不是盘问：

考虑以对话的形式而不是以盘问的形式来组织表单，可以让用户感觉是在与朋友随意的交谈而不是接受无端的审讯。标签的语言表述亲切、友好，便于用户快速理解，也可以拉近与用户的距离。

减少使用成本：减少打字需求、搜索预测、默认回答、缩短操作路径

减少打字需求：文字输入不仅效率低，还容易出错。如果可以，尽量减少文字输入的形式，可以使用选项、搜索历史、热词、智能辅助输入（定位、OCR等）等形式来获得回答。

提供选项

搜索预测：基于用户已经输入的部分，给出与之关联的、相近的选项，让用户可以从中选择，减少需要输入的字数。

搜索预测

默认回答：单选框、输入框等控件，默认选择一个/填写了一个可能的答案，减少了一部分人的输入必要。

默认回答

缩短操作路径：尽量让人们以更少的操作次数完成表单的填写，层级过深的方式会让用户感到繁琐，从而心生反感。

一致性

一致性包括形式、色彩、尺寸、间距、对齐方式的一致性，也包括不同问题地表述风格、必填项/可选项的标记等的一致性。

一致性让用户形成良好的预期，更好的理解问题，可以更快的完成操作，减少因形式变动而带来的干扰。

减少视觉干扰

不同的元素（问题组与问题组、问题与问题等）之间需要有一定的区分，但是要注意过多的视觉信息会导致注意力的分散，对于填完表单这一动作形成干扰。

剔除与表单填写没有直接关系的界面元素，比如采用色彩、字重、字号、间距等取代分隔线、边框等区分形式，可以减少页面中的元素，让人们聚焦于任务，有助于保持完成任务，并消除放弃路径。

剔除没有直接关系的界面元素

同时色彩的使用应当慎重，不要使用过多的颜色导致页面过于花哨而分散人们的注意力。可以使用不同等级的灰色、采用透明度变化等形式结合字重、字号、间距等来做出层级区分。

01-02内容组织

选取问题

用户关心的是问题的内容和为什么要问这些问题，所以不必要的问题应当删除（简约设计中的删除原则/奥卡姆剃刀原则）。

同时，有些需要问的问题也要选择合适的时机，不要一上来就将所有问题一股脑的全部抛给用户，这样只会让用户感到困难、麻烦而产生退却心理。问题的展示可以依据前置问题的回答情况来决定，如选择是否有驾驶经历后，再决定是否显示与开车相关的其它问题。

对于必要当时用户可能不愿意回答的问题，需要作出简短但清晰的解释，消除用户的疑虑。

进度条效应：由易到难、将复杂的过程分解成简单的任务、进程指示-说明填写完成路径

进度条效应：用进度条衡量进展，将参与者的行动与结果联结起来，给予其迅速、频繁、明确的反馈，参与者因受到持续激励而更容易坚持达成长期目标的心理学效应。

将问题按照由易到难的顺序先后展开，有助于增强用户完成整个表单的动力与信心。将复杂的过程文件成简单的任务，可以循序渐进地让用户一步一步完成填写，而不是一开始就被困难所吓倒。也就是“一页只做一件事”的原则，将所有问题按主题分类，在同一页面中只展示同一主题的问题，减少认知负荷。

一页只展示一件事

对于多步骤的表单，通过进程指示告知用户，来显示完成情况，可以让用户看到已完成的部分，也知道距离目标还有多远。可以增强用户信心，激励用户填完长而复杂的表单。对于问题分散在多个页面的表单尤其重要，避免用户中途放弃。

这些就像游戏中的升级打怪，一步一步的引导用户完成复杂的任务。

进程指示

符合先后逻辑

定义问题的先后顺序，先问什么，再问什么。可以形成对于用户的引导。

问题之间有区分

通过间距、分割线、色彩、分页等形式，在视觉上将不同问题区分，可以更加清晰的展现表单的结构。用户浏览过程会更加容易将标签与对应的输入框联系起来、也不易出错。

问题之间有区分

内容分组

将问题分组，组与组之间有一定的差别，便于扫视，结构也更清晰。同一主题的问题归纳到一起，比完全平铺更有层次感。也便于用户对全局有一个大的把握。

内容分组

对移动端而言，内容分组之后，同性质的内容可以一起在弹出的sheet页/展开的选择控件中完成填写。由于在需要时才展示相关内容，可以让人们聚集于当前任务，节省空间。同时，不必每次点击一个输入框，键盘就弹出弹入一次。整体更加流畅、效率更高。这样，一个复杂的表单就被切割成多个细小、独立的表单，减轻人们的认知压力。

移动端内容分组

划分成多个任务让支线流程更加独立，在支线流程内部用户更加专注与聚焦。从整体而言，主线流程显得更加简洁，更加顺畅。

每个子流程互相独立

内容分组之间要注意区别，但是也不能喧宾夺主，影响整体之间的完整性、流畅性。过多的视觉信息会导致注意力的分散，弄巧成拙。

对齐-视线流动

标签、输入框之间的对齐，可以让视线流动的轨迹更加顺畅，方便人们快速识别问题、进行回答，减少填写表单所需要花费的时间、精力。

同时，尽量使用单列布局，避免多列排布，也是减少视线左右跳动所花费的时间。

01-03细节优化

表单的命名

表单的名字就是告诉人们在填什么表单、填完以后能干什么，这是提供清晰路径的一部分。

起始页与填表说明

起始页和说明就像是人们在初次见面时的自我介绍，在问问题之前，让对方熟悉自己，才不会因为心存戒备而拒绝交谈。一方面在复杂的诸如认证一类的表单中，可以提前告诉人们需要准备什么资料，让人们不会在填写过程中因为资料不全而被迫中断整个流程。另一方面，对于比较长、复杂的表单，也可以告诉人们如何开始，大概需要多久可以填完等，让人们有一个心理预期，预留出充裕的时间，也不会因为感觉看不到尽头而半途而废。同时，可以提前告知人们填完后有什么好处，用户在付出成本之后有所收益，才会激励他们填写表单。

问题的表述

问题的表述最主要是让人们快速理解你要问什么问题、你的目的是什么。主要目标是减少用户理解的时间与精力成本。因此，问题的表述所遵循的原则包括：言简意赅、拟人化、减少被动句、删减无意义的词语、使用短句而非长句、仔细检查

言简意赅：问题的表述应当简单、直白，用最简单的表述形式，减少理解问题所花的时间与精力。

拟人化：问题表述过程中，尽量减少冷冰冰的术语，使用”我“、”你“等词语来构建对话感。

减少被动句：被动句的表述让人们理解上更加吃力一些，表述也会更长。

删除无意义的词语：在表达清楚的前提下，让标签尽可能简短。就像海明威说的：“我站着写，而且用一只脚站着写，使我处于一种紧张状态，迫使我尽可能简短地表达我的思想。”

使用短句而非长句：短句比长句更好理解，更加符合言简意赅的原则。

仔细检查：可以让不同的人参与进来审视表述的问题，尽可能让不同思维方式的人都可以快速理解。

Tab键跳转优化

每个人的使用习惯不一样，当使用Tab键进行焦点切换时，页面会因为焦点的变化而跳动。所以需要合理的安排访问顺序，避免页面上下频繁、剧烈的跳动，影响对于问题的定位、识别。

提供中途保存/自动保存

对于冗长、复杂的表单而言，用户在填写过程中有可能因为其他事情而中断。尤其对于移动端用户而言，流程被电话打断、因网络变差而无法继续填写的情况会更加显著。这时候需要提供可以保存草稿/自动保存的机制，让用户下次可以从当前的位置开始，而不是将前面付出的努力白白浪费。

行动召唤按钮

行动召唤强调的是执行这个操作，会产生什么结果。文字的表述需要从用户的角度出发、清楚的描述动作的意义。如将“试用”改成“开始我的试用”等语义清晰的表述方式，可以消除人们内心的疑惑，增强用户的点击意愿。

感谢/完成反馈

完成时应该有一个结束的标志，就像两个人交流后的道别/致谢。

02表单元素

表单的基本元素：标签、输入框、动作、帮助文字、错误与成功反馈

表单的基本元素

标签

标签是发问的方式，讲究语言自然、清晰、简洁、易懂。

标签的位置分类：顶对齐、左对齐、右对齐、输入框内标签、框内悬浮

顶对齐：视线流动距离最短、最流畅，适合标签长度灵活多变的情况，但横向空间的利用率不高。

左对齐：标签之间左对齐，在与输入框的距离上会形成长短不一的间距，从上到下的扫视不够流畅。与顶对齐标签相比，可节省纵向空间。适合需要仔细、专注每一个问题的输入场景。

右对齐：标签之间右侧对齐，与输入框的距离保持一致。上下扫视比左对齐更快。

输入框内标签：节省空间，但是输入过程中会消失，增加用户记忆负担。适合单个输入框，如搜索场景的使用。

框内悬浮：与传统的框内标签类似，但是输入过程中不会消失，不会造成填写过程中忘记问题是什么的困扰。标签与输入框融为一体，减少了线框对于视线的阻隔，视线流动顺畅、自然。

标签的形式

输入框

输入框是用户回答问题地方，承载用户的输入行为。输入框的形式决定了用户的操作方式，要尽量让操作方式与答案的形式更加贴合，方便用户更快、更准确的操作。

输入框的长度可以作为affordance（可供性），与需要输入的内容长度对应，提示用户需要填写的字符大概长度。

输入框的形式分类：文本框、下拉菜单、复选框、单选框、开关、计数器、滑块、文件上传、评分、穿梭框

文本框：主要用于输入字符，可限制格式（如字母开头/纯数字等）。但面对银行卡、电话号码等场景时，应当注重包容性，对于“-”等可以后台去除，而非强制用户修改。

下拉菜单：可单选，也可多选。当备选答案数量较少时（一般是7个以内），建议使用单选框/多选框的形式，将答案平铺展示；当需要提供备选答案而选项较多时，下拉菜单可节省屏幕空间。选项数量过多时，要考虑答案的排序方式符合某种规律（如频率递减、首字母排序等），同时可考虑级联、分组等方式对内容进行组织，也可以采用增加搜索框的形式快速选择。

单选框：将被选回答平铺，各选项之间互斥，只能选一个。最开始的时候，会默认选择一个。

复选框：可以多选，与下拉框相比，将答案平铺，更加便于选择。选项较多时建议将选项分组。占用空间较大。

开关：适用于两个互斥选项之间的选择。操作比较方便。注意标签的表述要语义明确，使用主动语句而非被动语句。

计数器：点击按钮可以按某种固定数量级精确增减数字大小，常见于购物车增加商品件数。也可允许用户直接输入。

滑块：用于数值调节，可以垂直布局/水平布局，常见的场景如音量调节等。与计数器相比，调整速度更快，但是精确度差一些、占用空间大一些。

文件上传：点击后会打开系统对话框，选择文件。可以只展示预先限制的文件类型，方便用户快速选择。选择之后出现已选择的文件列表、上传进度等。

评分：粗略的数值，一般有辅助文字描述分数。常见的如豆瓣的几星评分，一般只允许整数（1-5），图标可采用不同形式，如️、、等。

穿梭框：从大量的选项中选取部分或全部作为回答，选项较多时，可增加搜索框、分组、以某种特定方式排序来增加人们检索的速度。占用空间较大。

输入框的形式

输入框的选择原则：一目了然、减少打字输入。

一目了然：当用户看到输入框时，需要能够理解输入框该如何操作，是输入还是选择还是拖拽；对于提供备选答案的输入框类型（下拉、单选等）。首先，备选答案的表述要让人容易看懂。其次，对于被选答案数量较少时，最好将答案平铺展开，如采用开关/单选框/多选框代替下拉框。

减少打字输入：手动的打字输入难以避免出错，且效率较低。可采取一些选择/自动获取的方式来减少这种需求。如充值时预设金额而非手动输入金额；在日期选择时使用选择型控件而非输入框；使用语音输入；采用OCR技术录入银行卡号；利用定位技术自动填写地理位置；用上下文的信息自动补全未填部分信息等。既可以提高操作效率、也可以减少用户的操作强度、降低出错率。

输入框的必填提示原则：标明少的那种、内部保持一致性。

标明少的那种：必填项较少时，标明必填项。反之，标明可选项。

内部保持一致性：同一个产品页面之间最好是保持同样的标注风格，即都标注可选项/都标注可选项，标注的形式、位置等也保持一致，才能让用户一目了然。

输入框的必填提示

其它：智能键盘、输入组、弹性输入框、可视化、微交互

智能键盘：对于移动端而言，打字输入空间较小，效率较低。可以采用智能键盘的形式，如输入金额时弹出数字键盘；输入地址时，弹出地址选择的控件。可以提升输入效率。

输入组：将具有关联意义的输入框放到一起，可以帮助用户更好地理解问题。

弹性输入框：输入框对于回答具有包容性，允许用户使用不同的格式，通过后台的转换得到标准的结构化数据。如电话号码输入中允许使用“-”符号/使用“+86”字样而不报错。

弹性输入框

可视化：采用可视化的反馈形式，可以增加趣味性，让用户在填写表单过程中心情更加愉悦、心理感受的时间与难度更低。如采用“笑脸”、“哭脸”来反馈用户打分的结果，用“绿色”、“红色”灯来标明设置密码的强度等级。

豆瓣评分选择5星时的烟花效果反馈

微交互：通过细小的动效，让页面、输入框之间的切换显得更加流畅。表明不同页面之间的层次关系；增加填写过程的趣味性。

动作

动作是用户填完表单后采取行动的按钮，一般是结束填写表单的标志。

动作可以分为主动作和次动作。

主动作：完成表单最主要的动作，如提交、搜索、登录等

次动作：较少使用的动作，一般与完成填写表单的任务相悖，如重置、取消等。

设计原则

主、次动作之间在视觉层次上应该有所区分，强化主动作的视觉表现、减少次动作的视觉表现，方便用户顺畅的完成填表任务的最后一项工作。

区分主动作于次动作

动作按钮应该通过状态来引导人们的行为，而不是文字提示（如使用不可用状态来代替点击后提示”不可操作“）。预防出错而非事后指出错误。

通过状态引导提示

动作按钮的文字表述应当清晰、直白，表明动作的意义。如使用“注册”、“登录”代替“确定”。

动作按钮的位置分类：web：位于右侧、左对齐、居中对齐、右对齐；

位于右侧：输入框数量较少的场景，如搜索页面。

左对齐：与输入部分左对齐，适合单列布局的形式，视线流动快速、顺畅，便于扫视。

右对齐：与输入部分右对齐，一般常见于后台搜索页面，多列展示的场景。

居中对齐：与输入部分居中对齐，视觉上较为均衡。如常见的登录页面。

web动作按钮位置分布

移动端：右上角、表单底部、固定底部、随键盘移动

右上角：较为常见，不影响用户填表的流程。但是填完之后视线需要从下移动到上方。操作上也不是很方便，适合于需要仔细确认的表单。

置于表单底部：符合视线流动的顺序。当表单较短时页面显得比较简洁，当表单较长时会引导用户全部填完。填完后即可提交，适用于不需要过多检查的表单。

固定底部：按钮固定在底部，用户的视线流动顺畅，但是键盘弹起时会遮住按钮。适合于最后为非文本输入类型的表单。

随键盘移动：与固定底部相比，固定在键盘的上方，不会被遮挡。效率较高，适合于最后为文本输入且提倡快速提交的表单。

移动端动作按钮位置分类

帮助文字

帮助信息就像是讲解员或说明书，应该尽量少的依赖表单中的帮助文字，因为大段的说明会让人感到压力。就像服务条款，很少会有人花时间去认真读完，也不利于人们填写表单。所以，帮助信息应该简短、有效。

帮助文字形式分类：表单中的特定位置、与输入框相邻、放入输入框中、悬浮提示。

表单中的特定位置：一般是开头的位置，或者单独在顶部/左侧/右侧有悬浮窗形式显示帮助文字。可以告知人们需要提前准备哪些资料，让人们有所预期；或者告知人们填完后有哪些好处，激励人们完成表单。可以在激活表单时显示，然后由用户选择关闭。

与输入框相邻：与标签同时显示，一般为提示可选项，或者解释标签含义；激活选框时出现，一般为解释标签或者提示如何填写。

放入输入框中：作为占位符类型的提示，在输入过程中会消失。如搜索框中的”请输入姓名查询“

悬浮提示：使用问号“？”图标的形式，用户鼠标放上去之后显示帮助文字。常用作对于标签含义的解释/为什么需要收集该项信息的说明。

帮助文字的形式

帮助文字的作用：

1-解释：解释标签的含义；解释为什么需要收集这些信息。

2-提示：告知用户需要准备哪些资料、需要多少时间；在具体问题时提示用户如何填写；在填写敏感信息保证用户的信息安全，让用户安心。

错误与成功反馈

错误反馈的要点：让用户注意到；告知出错原因；告知出错位置；提供解决方案。按照谷歌的原则，可以归纳为：简洁、清晰、有效。

让用户注意到：一般使用红色文字提示，可考虑加上图标、输入框变红、加粗等形式变化结合来增强视觉提示。

告知出错原因：描述应当简单、易懂。出错后用户的心理一般会较为急躁，因此，错误提示需要安抚用户并尽可能让其容易理解。

告知出错位置：可以采用视觉关联或者位置邻近的方式。视觉关联：反馈文字与输入框颜色一致；输入框边框变化、字体变化。位置邻近：错误提示出现在输入框旁边。这种形式要注意表单超出一屏时，用户不能及时发现出错位置。

提供解决方案：提示出错后，用户的填表流程就会被打断。这时候需要告知用户如何方便、快捷地修改这个错误，以便顺利回到填写表单的流程。除文字提示外，也可以提供快捷解决方案供人们选择。如名字重复时提供可用的近似性名字等。

成功提示

在顺利填写结束之后，可以对用户提出感谢、鼓励。或者引导用户进行后续的分享动作。

就像《设计师在未来具备什么才能不被淘汰》一文中指出：用户不仅仅是消费者，也是产品的传播者与共建者。一般完成表单的一刻，用户会有满足感、成功感，我们可以借助用户的分享行为，形成品牌传播的效应。

03表单的交互

及时验证

在用户填写表单过程中及时给予反馈。作用：确认回答是否合适；建议有效回答；限制提示。

确认回答是否合适：提示回答是否符合要求的特殊的格式（如必须为英文）、特殊的规则（如最小为6位）等。可以减少“由内而外”的设计带给人的困扰。

建议有效回答：在用户填写时依据用户的习惯、输入的部分数据等提供有效答案，如搜索联想、密码建议等。

限制提示：对于回答具有明确限制的，在用户输入过程中给予及时的反馈，让用户有所预期。如具有字符数入长度限制时，提示还可以输入多少个字符；注册过程中输入密码时，实时提示密码的安全等级。

减少输入

尽量减少输入，是减少用户使用成本的一种方式，节省用户精力，更好更快的的完成表单。减少输入的方式有：个性化默认、智能获取、通过前置问题获取答案。

个性化默认：老用户在使用过程中，会形成一些基础的信息与习惯数据（收集这些数据时要注意符合通用数据保护条例，告知用户并获取用户同意），在填写过程中直接默认填上，会减少用户需要回答的问题数量。如收货地址可以使用默认的地址，而不必每次都填写；登录时用户名会被记住等。

智能获取：利用现有的技术条件，避免打字等输入方式，提升用户的操作效率。如利用OCR技术输入卡号、利用系统定位输入地址、利用语音、拍照输入等快捷形式。

通过前置问题获取答案：用户在填表过程中已经填写过的回答，可以被使用到后面的回答中。

额外输入

简单的选项可以满足大部分的需求，但是有些情况下，需要提供更多的输入选项来满足某些特殊的情况。如输入多个电话号码、多个地址、选择项特别多等。

额外输入的方式一般有：即时增加、叠层、循序渐进

即时增加：点击“+”按钮，即可增加一个输入框，也可以动态删除。满足数量不同的需求，也不妨碍不需要的用户。

叠层：即时增加的输入框位于当前表单的Z轴上方，填写完后，只显示填写的结果，没有额外的输入框。视觉上更为简洁。

循序渐进：即级联展示/分层展示，选择某一项之后，再显示它的下一层，这样一层一层的递进。可以减少一次展示的信息量，减少认知压力，方便用户快速作出选择。

额外输入的形式

基于选择的输入

依据前置问题的回答不同，后续的问题也会有所差异。这种弹性的输入方式，会形成不同的分支，可以满足不同人的需求，又隐藏了无关的输入框。

前后输入的展现方式可以分为：页面级选项、水平选项卡、垂直选项卡、下拉列表、单选按钮下方显示、单选按钮内显示、显示非活动选项。

页面级选项卡：将不同的问题放在不同的页面中，一次只问一个问题，可以灵活地形成多个分支，也有助于用户聚焦。但是问题之间的联系会减弱。

水平选项卡：将不同的情境通过水平选项卡分类，用户可以选择某一类之后再回答该主题的下的问题。但是对于个选项卡之间的互斥关系，用户可能难以快速理解。

垂直选项卡：与水平选项卡类似，只是选项卡的按垂直方向排列。视线流动的流畅度优于水平选项卡。

下拉列表：下拉选择某一主题后，再显示该主题下的问题。主题只显示当前被激活的，易于用户聚焦。缺点时不能一次展示所有一级主题。

单选按钮下方显示：单选按钮选择某一主题后，再显示该主题下的问题。所有的选项始终可见，需要有视觉提示主题与主题下问题的关联关系。

单选按钮内显示：单选按钮选择某一主题后，在被选择项的下方展开该主题下的问题，就像是内嵌到单选按钮中。主题与主题下的问题关联关系很清晰，但是切换选项时，页面的跳动比较大。

显示非活动选项：将所有主题下的问题全部展开。占用空间大且层级关系不清晰，导致选择效率低下。不推荐使用。