编辑导语：你有没有设计过结构复杂、内容繁多的表单？在设计时有没有什么技巧可以化繁为简、提升填写者的体验感呢？本文作者为我们罗列出了表单设计中可能遇到的一些问题，并且提供了解决方案，让我们一起来学习吧。

距离上次发文已经快半年多了，实在是惭愧，好久没有输出内容了，看着每周增加的零星关注人数，内心更加焦灼难安。

这半年来我换了工作，也适应了新的环境，同时也在思考新的方向，估计和大多数的设计师一样，迷茫时常伴随着我。前段时间写了几周的产品体验日记，但觉得缺乏深度就没发上来，后续我将会继续写产品体验日记，完善后分享给大家。

2020所剩无多了，我也会将积攒下的一些内容陆陆续续发上来与大家分享，感谢关注，感谢阅读。哈哈哈哈

一、导语

你平时填写过的最复杂的表单是什么？调查问卷还是文档信息录入？如果一个表单字段内容巨多、结构多变、填写耗时耗力，那你将如何设计你的表单使之体验更佳？

面临的问题:

1. 业务复杂，功能较多

不知道大家是否看过法律合同之类的文件，多则好几箩筐，少也有厚厚一叠；类似的文档如果进行线上结构化，势必要同样要花费巨大的人力去填写表单，完成基础信息的录入工作。

同时，由于录入的时间不确定，流程不明确等问题，也制约着表单的填写。

2. 流程较长，操作繁琐

多个不同表单之间的互有关联又相互区别，填写的时候需要来回查看以确认信息，查阅和填写相互并行，操作繁琐。

3. 字段较多，关联项较多

几乎每一个字段都有对应的关联项，每个单选字段的不同项决定不同的内容。同时，由于字段数量，层级划分不明确，会使填写的人失去定位，产生迷惑。

二、解决方案

1. 内容分组，分步填写

根据业务内容分级，合理运用颜色、间距、字体大小、卡片层级等进行信息分级。

2. 实时保存，避免数据丢失，提供草稿功能，避免任务中断

3.字段分组，示意结构，联动项隐喻

4. 信息自动带入，节省时间

一般表单是与某项功能挂钩的，信息会在多个入口录入。因此在填写长表单的时候，如果能从系统中自动获取到数据，就可以自动为其填充，可根据业务场景，判断是否让其修改和更新。

5. 提供二次编辑功能，防止信息输入有误

一般的长表单在涉及非审批流的时候，可以让其无限二次编辑；如果是处于审批流，则需要根据业务场景限制其编辑次数或者限定其编辑规则（草稿可编辑，一旦提交则不可编辑）。

6.提供多人协作编辑功能

如果一个长表单，需要多个不同的业务域的人来填写，那么需要协同编辑，并实时显示编辑的人员信息。

同时，为了避免信息丢失和编辑错乱，在同一个表单下，同一时间应该限制只允许一个人进行编辑，等其提交完后，可允许其他人进行编辑。

7. 实时检验

前端实时校验字段输入规则，后端统一校验信息交换规则。

比如对于数字输入框的校验、电话号码的校验、身份证号的校验，应该在前端实时完成。

在鼠标离开焦点区域或定位到下一个字段的时候，提示其填写有误；这样做的目的是减少后续修改的次数，在长表单下，统一提示其填写错误会是一场灾难。

在点击保存并填写下一步或点击提交信息的时候，就需要跟后端交换数据，验证录入的信息；如果不匹配，则提示错误，并从上至下定位至相应的错误字段。

8.做好填写引导功能

要通过多种方式，引导表单的填写。

1）在开始填写之前，简要说明该表单的业务目标，大概需要花费的时间等；

2）开始填写后，关于每个字段的特殊说明，都需要标注出来。重要的要显示在页面上，不重要的就收起在注释符号中；

3）填写的过程中，切记不要到最后才告诉用户哪里出错了，重要的信息一定要提示到位，否则一旦出错，前功尽弃；

4）填写完成后，引导其下一步的操作，或者返回至列表。

9. 详情页也需要注意信息分级

表单填写完毕后的产出物就是详情页，详情页是需要浏览的。因此在设计详情页的时候，应该本着让用户浏览方便的原则去设计，需要注意以下几个点：

1）结构清晰

结构清晰是指不要讲内容一股脑的全堆在页面上，要做好信息的分类；同时，注意规划页面的层级。

2）设置快捷导航

如果一个表单是长且复杂的，那么其对应的详情页也会变得复杂和冗长，因此在页面的右侧或者顶部设置合理的快捷导航是很有必要的。

三、小细节，大体验

1. 提供快速返回顶部的按钮

快速返回顶部按钮的使用要注意场景，如果你的页面比较长，且没有分组浏览的导航，那就需要设置快速返回顶部的按钮。

但是在存在分组浏览导航和顶部悬浮标签的情况下，不建议使用快速返回顶部的按钮，因为在填写表单的时候，使用快速置顶的场景比较少。

2. 提供分组模块收起展开功能

当一个模块混杂着各种信息的时候，单纯的模块分组已经无法处理它的复杂度了，因此需要收起高频且信息量大的模块，可以合理的减少页面的复杂度。

3. 步骤提供信息填写完成度提示

步骤条可以单纯的作为步骤指示器使用，也可以作为一个表单完成度的提示区域。

4. 重要说明性文字尽量显示而非收起

在填写大量字段的表单时，阅读表单内容和填写表单同样耗时耗力。

如果我们将所有的提示信息隐藏在提示符中，一般情况下用户不会去查看；但是如果去挨个查看提示信息，则会多花费一个步骤去点击或者悬停来查看提示信息，浪费了大量的时间。

因此如果涉及到重要的提示信息，请直接展示在字段的后面，不要隐藏起来。

5. 产品内组件应该规范统一

在后台产品上，关于组件的规范统一，想必是人尽皆知的设计原则。

无论是各类平台型设计组件，还是各个公司自造的设计组件，保持统一和规范对产品设计有着重要的作用，在这里不赘述组件应该怎样规范统一。

因为无论是Ant Design还是其他设计语言，都有详尽的关于组件的定义方法，我在这里讲述一个产品设计更高层面或者更深层面的原因：

组件的规范统一并不仅仅是为了省时省力，而是为了使用户在使用的过程中达到认知上的统一和行为上的统一，在进行高频次的操作后，界面的流程或者组件样式已大致在用户脑海中形成固定印象。

因此在操作相同类的流程时，用户会有更多的掌控感，试想一下：如果你在操作人事相关的流程后，去填写绩效部分的内容时，发现一个迥异的界面或者弹窗，你肯定觉得这是不是哪里出错了，甚至会怀疑这是否是同一个系统。

目前大多数公司的管理系统经过多次缝缝补补，内部的跳转逻辑已经异常感人，界面风格也大放异彩，但是使用起来却无从下手，深感迷茫。

因此大到界面样式，小到间距大小，产品设计的规范和统一应该是最基础又不可缺少的原则。

6.庞大的信息录入，表单内部要分步填写，外部可拆分成不同的表单分别填写

对付复杂的表单，你需要解决的主要问题并不是填写方式或者页面设计，而是信息分级和结构拆分。解决了这个问题，基本上就解决了业务问题，其余部分就跟我们常用的表单一致。

将复杂度降低并不意味着减少页面的信息，而是通过设计师合理的信息划分，降低视觉上的复杂度和流程上的复杂度，这样才会达到当前场景下的“最佳解决方案”。

四、结语

随着互联网信息化的深入发展，复杂是避免不了的。

我知道大家都推崇简洁的设计，但那只是对视觉和样式的定义，而非对信息的定义。

我们所处的世界是复杂的，行业更是复杂的。信息的复杂度与日俱增，想要处理复杂的信息，就需要从复杂中寻求规律，这规律与业务息息相关。

B端360行，行行深如海，小伙伴们，我们一起慢慢修炼吧~

文章来源：人人都是产品经理           作者：米兰小铁匠

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

本篇文章将分享Web端表单体验优化等相关内容，分析设计师在设计B端类产品时如何让用户愉悦并的填写表单。

表单作为基础通用组件，也是在各个企业级中台中出现频率最高的元素之一。在用户界面中表单无处不在，比如：用户注册登陆页、支付页、用户反馈、共享信息数据录入等不同类型的表单。当我们使用/设计表单页面时看似是按钮、输入框等表单组件进行组合搭配使用，看似简单，但是在实际业务使用中却有着无数可推敲的细节冒出来，常常给设计师造成较多的困扰。

那么在实际工作中哪些内容会给设计造成困扰呢？举几个例子：在实际的业务中很多产品因为业务导向需要入海（非中国区方向），所以就存在表单标签对齐方式问题，如果右对齐可能在中文的情况下表单标签预设宽度正好合适，但是当用户切换到多语言时因为语言差异会导致折行严重等一些列问题，相当影响体验；设计师常常疑惑表单标签是顶部对齐、右对齐还是左对齐，他们的差异点在哪呢？必填与非必填项以什么形式告诉用户会更加合理呢？表单按钮放在页面哪个位置体验会更佳呢？

所以我们不能忽视这些设计细节，往往一些好的设计细节提升总会给用户带来不一样的用户体验。针对以上这些举重若轻的问题我们一一明确、抛出并与大家一起来进行由浅至深的探讨「如何提升表单体验」。

重点概览

一、表单分析

二、体验与优化
三、排列与布局
四、写在最后 

表单分析

1.1 表单的重要性

在上面的前言中也提到了表单作为基础通用组件，也是在各个企业级中台中出现频率最高的元素之一。并且在《Web Form Design》一书中 Luke Wroblewsk 也提到了“表单决定了最关键的界面中交互的成败”，当用户使用网站时会有一个特定目标，如果设计得好，网站将实现有效性。效率、用户主观满意度以及特定用户在特定使用环境下所达到的特定目标，也是设计师想要达成的最终目标。表单往往是目标用户和整个产品的一所桥梁。因为，尽管人机交互的发展进步，表单仍然是用户在网络中进行交互的主要方式。所以表单是被认为完成目标的最终，也是最重要的阶段。

我们以淘宝来举个典型的例子，淘宝属于国民电商平台也是亚洲较大的网上交易平台，提供各类优质商品。从平台的特性来讲，它以用户下单并成交作为最终目标。其中支付表单起着一个关键的作用，用户从购买到支付完成以分步形式进行，第一步填写基本信息并提交订单，第二步选择商品并选择支付货款至第三方，第三步买方确认收货并自动打款给商家，第四步完成订单并评价。在填写表单时中间没任何阻断，用户能很顺利的按步骤完成订单。淘宝支付表单属于比较典型的分步表单。

1.2 拆分表单

我们简单提一下表单组成（网上有很多详细的相关文章），一个完整较复杂的表单是由7个基本组成部分，表单类别、表单标签、表单基本组件、占位提示、帮助信息、按钮、校验。表单可以包含以上组成部分，但不是一定都要有，比如：移动端填写验证码时为了减少用户操作，当用户填写完成之后直接提交表单验证。

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

表单组件：包含了输入框、下拉框、日期选择器、时间选择器、开关、上传等十几种类型，是形成表单的核心内容；

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

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

帮助信息：当表单标签不足以对输入项准确说明时，这时候需要使用文本提示用户。它不仅能让用户提前感知输入后的样式，还能够有效的告诉用户该如何输入以及表单提交后达到的目的。

按钮：当用户完成信息录入时，按钮能够对表单内容进行校验或提交。

校验：对用户信息录入内容进行校验并给出对应的错误提示。如：内容是否为空、类型格式是否正确、是否符合业务逻辑等等。校验时有两种规则，分别是使用即时校验（失焦即校验）和点击提交按钮以后的最终校验。状态分别为错误、警示、成功。

1.3 表单类型

基础表单

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

分步表单

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

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

体验与优化

1.1 必填项or可选项

在设计表单时大多数设计师都习惯性的使用星号表示必填字段。但那么问题来了，针对必填项和可选项用那种形式才是最科学的呢？我们简单分析一下。

当表单中的必填信息多于非必填信息时，如果使用红色星号表示必填项，那么大量红色星号导致增加用户的认知负担，使得用户无法快速识别哪些是必须填写的，哪些是不必须填写。并且使用红色星号会带给用户一些恐惧感，它增加了出错的风险并降低了表单填写率。因此在表单设计中，当必填项多于非必填项时，隐藏红色星号标记，通过暗提示标记可选项的形式来帮助用户识别。

红色星号对于不同用户也会存在不同的认知差异。对比较有经验的用户可能表意较为明显，但不代表所有用户都能理解，比如一些非中国区用户使用国际化产品时存在不同认知，因为每个国家本地化差异较大导致认知差异。

还有一点是表单中视觉噪声越少可读性越强，因此当必填项多于非必填用非必填字段提示用户会更好。

1.2 单列布局or多列布局

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

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

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

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

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

1.4 按钮的位置

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

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

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

如下图是一个弹窗类型的表单，如果根据业务诉求确认操作重要程度强于取消操作，那么确认按钮应该放在取消按钮的右边。因为确认按钮放在右侧(终点区) 用户关注度会更强。

1.5 占位提示避免代替表单标签

常规的占位提示作用是使用通用的认知提示并且以较弱的方式呈现给用户，当在字段中填入内容这些提示通常会消失。

设计师常常遇到表单字段较多并且页面空间有限的情况，为了减少横向节省空间设计师常常的做法是将表单标签删除，使用占位提示文本作为信息提示。但是设计师必须有意识知道到这种方式适合使用在较为简单的表单中，比如：表格中点击修改名称操作，弹出气泡并且气泡中只存在一个字段。或者是在用户非常熟知的登录注册等较为简单的表单填写时使用。但是当用户需要填写大量字段信息时不建议使用占位提示代替表单标签的方式。原因有两点：1. 当用户选中文本框填写时，占位内容即消失，这时候用户无法检查并确认其所写的内容是否符合预期。2. 当用户看到文本框中已经回填内容了，误认为占位提示是默认回显内容，造成内容已经填完不需要再操作的错觉。

针对上面问题也不是没有解决方案，在Material Design中有提供针对上面的问题的解决方案，我们这边暂时称其为“浮动标签”，默认情况下输入框内显示占位文本，当用户输入内容以后占位文本浮动到内容上方与内容左对齐。 

1.6 校验反馈及时并准确

设计师通常认为用户在填写表单时能够很顺利的完成表单录入，但事实相反。在实际的使用场景中，特别是在一些业务较为复杂的表单中用户极易发生错误，这时候需要需要明确的校验信息、准确的校验时机、输入的限制提示。

错误提示校验

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

限制与格式提示

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

校验时机

为了避免用户在提交时表单时出现大面积的报错问题，设计师可以使用实时校验的交互形式。如：在用户输入完成之后鼠标失焦后进行信息校验，但是需要注意的是在实时校验时避免用户还没有输入完成即出现校验误导用户，所以需要准确判断鼠标是否失焦。如下图所示为西瓜视频登录注册场景下的截图：

1.7 字段长度与输入预期成正比

在实际业务中，设计师常常习惯把每个表单字段都设置成相同的宽度，在视觉效果上看感觉会比较统一，但是这种做法实际上体验欠佳。字段的宽度应该向用户暗示所需输入内容的长度从而减轻判断负担。在Ant Design 4.0 系列分享的文章《整齐划一？不如错落有致》中分析到错落有致的排版表现似乎比整齐划一的左图更舒适，因为在视觉上我们更容易将右图的空间和内容视为一个和谐的整体。但左图过度的对齐导致暗示隐性的截断，我们惯性视觉会产生表单字段右侧空间缺了一大块的错觉。

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

排列与布局

1.1 定宽or自适应？

表单做定宽还是做自适应？哪个“更好”的这个问题时常困恼着我们。其中Button、Radio、CheckBox等本身是定宽组件还好，它根据内容自适应即可，但是当遇到Select、DataPicker、Cascader等类型时就会开始纠结这个问题。在实际的业务中不论是做理想中的定宽还是自适应，很多情况下浏览器窗口大小不一可能导致在一些极限情况下都会产生不尽人意的情况。脑补一下，比如：在笔记本的小屏幕下左对齐并定宽效果还不错，但是当你把页面呈现在较大显示器下，这时候页面右侧又会呈现出大面积的空白。参考AntDesign提供的典型页面以下三种样式是都会造成不同的反面效果。

所以在实际业务场景中如果没有明确自适应和特定自定义宽度的需求时可以通过以下几种方式处理。

将关联性强的字段分组
如果页面横向宽度足够大时，可以将一个区域中字段较多、并具有关联性字段进行分组，这样不仅有利于空间布局上的利用，还可以通过字段之间关联性暗提示帮助用户更好理解。格式塔心理学中有多种分组原则，可以使字段之间具有相关性：接近度，相似度，连续性，闭合性和连通性。将非结构化字段分组为几个机构化的集合提高表单的可用性。

设置字段宽度梯度

可以给字段设置几档宽度梯度的尺寸，我们可以站在AntDesign这个巨人的肩膀汲取一些相关经验，其中4.0系列分享的文章中总结到其经过对十几个业务线梳理，将组件宽度定义了5中高频的空间尺寸，分别是： XS（80~160px）、S （160~280）、M（280~360px）、L （360px~480px）、XL （480~560px）。根据原理，我们可以假设原子宽度XS为100，那么通过尺寸的倍数+间距的方式来计算其他的四种尺寸（间距暂定8px情况下得到：S=208px、M=316px、L=424px、XL=532px），通过此计算方式也是用来解决视觉对齐规则，如下图所示：

1.2 表单标签顶部对齐or右对齐or左对齐

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

表单字段顶部对齐

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

表单字段右对齐

将表单标签放置在其对应的输入字段的左边，标签右对齐。其优点减少了占用屏幕的高度，并且表单标签与输入字段关系较近，所以用户在填写表单时效率较高。不足点是由于表单标签的字数不可控（特别是针对非中国区业务时，多语言切换可能会出现超长的文案，甚至出现折行的情况），可能会造成左侧参差不齐的问题，导致可读性不高用户在查看表单时比较费劲，并且不太适合非中国区业务。 

表单字段左对齐
将表单标签放置在其对应的输入字段的左边，标签左对齐。表单标签和输入字段距离较远，用户从左至右浏览时间变长，并且根据上面Matteo Penzo的时间表上看，左对齐的浏览和填写的效率是3种常规的对齐方式中最慢的一种。但是，如果业务需要用户对表单放慢速度并谨慎填写（复杂表单或者表单中含有大量高级设置的陌生数据时），左对齐的方式会减少部分用户的出错率。但不太适合非中国区业务。

1.3 表单布局类型 

常规布局（简单）

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

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

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

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

写在最后

本篇文章从分析表单在产品中为何如此的重要，总结了在日常工作中设计师常常遇到的表单类型和布局，设计师可通过文章中的建议和案例进而合理的选择并灵活应用。以及在实际的业务应用场景中设计师如何规避和注意一些设计细节进而提升表单的体验。文章通过一些案例进行分析，希望大家能够通过此篇文章更多的是受到启发（而不是限制），能够在日常工作中灵活应用并举一反三。这里需要强调的是作为产品设计师不论是表单设计还是全局的页面设计，都需要有理解业务本质的能力和全局的业务思考能力，不然常常会被称之为“喂，那个画图的设计”。

文章来源：tob.design

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

导语

你平时填写过的最复杂的表单是什么？调查问卷还是文档信息录入？如果一个表单字段内容巨多，结构多变，填写耗时耗力，那你将如何设计你的表单，使之体验更佳？

面临的问题

1. 业务复杂，功能较多；

不知道大家是否看过法律合同之类的文件，多则好几箩筐，少也有厚厚一叠，类似的文档如果进行线上结构化，势必要同样要花费巨大的人力去填写表单，完成基础信息的录入工作，同时，由于录入的时间不确定，流程不明确等问题，也制约着表单的填写。

2. 流程较长，操作繁琐；

多个不同表单之间的互有关联又相互区别，填写的时候需要来回查看以确认信息，查阅和填写相互并行，操作繁琐。

3. 字段较多，关联项较多；

几乎每一个字段都有对应的关联项，每个单选字段的不同项决定不同的内容，同时，由于字段数量，层级划分不明确，会使填写的人失去定位，产生迷惑。

解决的方案

1. 内容分组，分步填写；

根据业务内容分级，合理运用颜色、间距、字体大小、卡片层级等进行信息分级

2. 实时保存，避免数据丢失，提供草稿功能，避免任务中断；

3. 字段分组，示意结构，联动项隐喻；

4. 信息自动带入，节省时间；

一般表单是与某项功能挂钩的，信息会在多个入口录入，因此在填写长表单的时候，如果能从系统中自动获取到数据，就可以自动为其填充，可根据业务场景，判断是否让其修改和更新。

5. 提供二次编辑功能，防止信息输入有误；

一般的长表单在涉及非审批流的时候，可以让其无限二次编辑，如果是处于审批流，则需要根据业务场景限制其编辑次数或者限定其编辑规则（草稿可编辑，一旦提交则不可编辑）。

6. 提供多人协作编辑功能；

如果一个长表单，需要多个不同的业务域的人来填写，那么需要协同编辑，并实时显示编辑的人员信息，同时，为了避免信息丢失和编辑错乱，在同一个表单下，同一时间应该限制只允许一个人进行编辑，等其提交完后，可允许其他人进行编辑。

7. 实时检验；

前端实时校验字段输入规则，后端统一校验信息交换规则。

比如对于数字输入框的校验、电话号码的校验、身份证号的校验，应该在前端实时完成，在鼠标离开焦点区域或定位到下一个字段的时候，提示其填写有误，这样做的目的是减少后续修改的次数，在长表单下，统一提示其填写错误会是一场灾难。

在点击保存并填写下一步或点击提交信息的时候，就需要跟后端交换数据，验证录入的信息，如果不匹配，则提示错误，并从上至下定位至相应的错误字段。

8. 做好填写引导功能；

要通过多种方式，引导表单的填写，

在开始填写之前，简要说明该表单的业务目标，大概需要花费的时间等；

开始填写后，关于每个字段的特殊说明，都需要标注出来，重要的要显示在页面上，不重要的就收起在注释符号中；

填写的过程中，切记不要到最后才告诉用户哪里出错了，重要的信息一定要提示到位，否则一旦出错，前功尽弃；

填写完成后，引导其下一步的操作，或者返回至列表。

9. 详情页也需要注意信息分级

表单填写完毕后的产出物就是详情页，详情页是需要浏览的，因此在设计详情页的时候，应该本着让用户浏览方便的原则去设计，需要注意以下几个点：

结构清晰。是指不要将内容一股脑的全堆在页面上，要做好信息的分类，同时，注意规划页面的层级。

设置快捷导航。如果一个表单是长且复杂的，那么其对应的详情页也会变得复杂和冗长，因此在页面的右侧或者顶部设置合理的快捷导航是很有必要的。

最后：小细节，大体验

1. 提供快速返回顶部的按钮；

快速返回顶部按钮的使用要注意场景，如果你的页面比较长，且没有分组浏览的导航，那就需要设置快速返回顶部的按钮，但是在存在分组浏览导航和顶部悬浮标签的情况下，不建议使用快速返回顶部的按钮，因为在填写表单的时候，使用快速置顶的场景比较少。

2. 提供分组模块收起展开功能；

当一个模块混杂着各种信息的时候，单纯的模块分组已经无法处理它的复杂度了，因此需要收起高频且信息量大的模块，可以合理的减少页面的复杂度。

3. 步骤提供信息填写完成度提示；

步骤条可以单纯的作为步骤指示器使用，也可以作为一个表单完成度的提示区域。

4. 重要说明性文字尽量显示而非收起；

在填写大量字段的表单时，阅读表单内容和填写表单同样耗时耗力，如果我们将所有的提示信息隐藏在提示符中，一般情况下，用户不会去查看，但是如果去挨个查看提示信息，则会多花费一个步骤去点击或者悬停来查看提示信息，浪费了大量的时间，因此如果涉及到重要的提示信息，请直接展示在字段的后面，不要隐藏起来。

5. 产品内组件应该规范统一；

在后台产品上，关于组件的规范统一，想必是人尽皆知的设计原则，无论是各类平台型设计组件，还是各个公司自造的设计组件，保持统一和规范对产品设计有着重要的作用，在这里不赘述组件应该怎样规范统一，因为无论是Ant Design还是其他设计语言，都有详尽的关于组件的定义方法，我在这里讲述一个产品设计更高层面或者更深层面的原因：

组件的规范统一并不仅仅是为了省时省力，而是为了使用户在使用的过程中达到认知上的统一和行为上的统一，在进行高频次的操作后，界面的流程或者组件样式已大致在用户脑海中形成固定印象，因此在操作相同类的流程时，用户会有更多的掌控感，试想一下，如果你在操作人事相关的流程后，去填写绩效部分的内容时，发现一个迥异的界面或者弹窗，你肯定觉得这是不是哪里出错了，甚至会怀疑这是否是同一个系统，目前大多数公司的管理系统经过多次缝缝补补，内部的跳转逻辑已经异常感人，界面风格也大放异彩，但是使用起来却无从下手，深感迷茫。

因此大到界面样式，小到间距大小，产品设计的规范和统一应该是最基础又不可缺少的原则。

6. 庞大的信息录入，表单内部要分步填写，外部可拆分成不同的表单分别填写；

对付复杂的表单，你需要解决的主要问题并不是填写方式或者页面设计，而是信息分级和结构拆分，解决了这个问题，基本上就解决了业务问题，其余部分就跟我们常用的表单一致。

将复杂度降低并不意味着减少页面的信息，而是通过设计师合理的信息划分，降低视觉上的复杂度和流程上的复杂度，这样才会达到当前场景下的「最佳解决方案」。

结语

随着互联网信息化的深入发展，复杂是避免不了的，我知道大家都推崇简洁的设计，但那只是对视觉和样式的定义，而非对信息的定义，我们所处的世界是复杂的，行业更是复杂的，信息的复杂度与日俱增，想要处理复杂的信息，就需要从复杂中寻求规律，这规律与业务息息相关，

文章来源：优设    作者：

星野随记

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

作者：蓝蓝

表格，是一种最常见的信息组织整理手段，常用于信息收集、展示、数据分析、归纳整理。

      UI软件设计中最常用、最基本的是表格的设计，有些软件中80%都是表格类页面，可以说，设计开发的是否易用，很影响口碑和用户的使用感受。基础的东西一定要做好，就像我们吃的主食一样，虽然都是米和面，但是各地出产各种品种口味都不相同，要根据食客的喜好选择、烹饪。今天就聊一聊最基础的表格设计、变化和常见问题。

一、基础的表格设计美化

      基础的表格可变化的地方很少，可以根据当前软件开发选择的框架控件（ext/vue/jequery不同框架会有一些不一样）做色彩和风格的变化，如：加表格不同粗细的线、斑马格，中间无竖线种种的设计，有的表格需要标题很突出，有的内文突出，这就和内容焦点相关了。

为了操作直观便捷，在操作区放一些图标“删除、编辑、审核”，配合文字来使用，有的把操作类的图标放在最左边，有的放在最右侧，按行业用户习惯而定。

可以用固定表头（标题位置不变），允许用户排序，单元格内有很长的文字，设定最大字节，多内容用……替代避免转行，有小数点的数字右对齐，每列的大小可调整，这些也是设计开发中可以做好的细节部分。

二、特别宽的表格怎么设计？

有的表格的宽度，达到了屏幕的两屏和三屏，出现宽宽的横向滚动条，又有长长的竖向滚动条，但工作的人又必须看，可烦人了！很多软件都因为这个原因被吐槽。下面就介绍三种方法解决这个问题：

方法一

如果表格的标题是可以定制的，允许省略的，可以从业务角度取舍去掉无关紧要的，不常用的内容，把这部分放在点开的详细页内容中即可。这就像一个房间的断舍离：挑选、丢弃、分类、收纳，思考哪些物品是不要的，哪些是必不可少的？哪些是可有可无的？依次排序放在顺手的位置，ui设计的道理也是相通的。

方法二

如果表格里面的内容是确定的，不可省略的，比如银行的报表就是这么长，这么多，那我们就可以从设计的角度来优化，做一个加高版的表格。

表格为什么一组信息只能一行呢？完全可以一组三行四行，在组中进行重点信息，非重点信息以及符号化的直观转变。用大小、对比、浓淡、色彩、间隔这些平面设计的基本原则，让一个普通的“山里娃”土土的表格变成一个“青春靓丽、人见人爱”自带明星气质的表格。

方法三

大表格里面嵌套小表格，利用交互设计，巧安排空间。当用户光标移至感兴趣的那行的时候，关于它更多的内容，在下方滑动撑开出现或者右边浮动出现。这个方式虽然比较土，但也确实管用。早年在看某一招聘网站的时候，每一个人的简历只要点名字就可以看到一组关键信息，便于迅速筛选，而另外一个招聘网站，就没有这个功能，每个人都要打开之后才能看见整体信息，我后来就不怎么看那个网站了。多一步操作，对典型用户就多了许多的工作量，网站和软件的使用口碑，用户粘度就是这样在为用户考虑中一点一点积累起来的。

 上图：大表格里面嵌套小表格

     方法不会只有这三种，其他的方法要根据当时的业务，用户使用的习惯、重点，因地制宜的去设计了。软件中的表格节省了许多程序工程师的工作量，如果做大的改动或许是巨大的工作量，如果要做变动，一定要在开始的时候就要让ui设计纳入开发体系，一生二，二生三，在前期第一批实施时越注重细节，后期就会越轻松，甚至省去几倍甚至几十倍的时间挨个页面的去纠偏、修改。

      一个系统总是需要业务担当，颜值担当的核心部分，重要的页面要额外的对待、花更多的精力和时间。如果千篇一律，也就不能显示出软件产品的独到之处了。

第三 与表格配合的部分设计

第一种  “搜索查询”和“过滤”部分的设计

     大多数表格的前面都有搜索过滤功能，如果搜索条件相当多，可以精选一部分主要的排成一行，其他的隐藏，点箭头再出现。整个搜索区域也可以有隐藏／显示的按钮，来给下面的表格更多的空间。

     过滤条件区域可以定义好“条件名称”一致宽度，一般在八个字左右，避免有的字节多，有的字节少，行数多了，参差不齐，区块和区块之间也要定义好统一的间距，这样整体页面就显得整齐划一、条理清晰。

上图：搜索和卡片式信息的组合

第二种  表格操作部分的设计

       对表格的操作“导入，导出、批量导出”有的时候这类操作有10—20个，有的时候才几个，多的时候很占地方，可以用隐藏的方法，over到表格上再出现，以节省空间。

       也可以分组把同类的操作聚合在一起，把常用的放在目之所及，不常用的点后下浮出现，以节省空间，

还可以光标跟随表格的某一行，点选自动浮出一群小跟班，各种操作按钮。即节省空间，操作移动路径又很短。只是不支持批量操作。

第三种  表格和卡片式设计、统计图的整合切换

       表格是可以转换成卡片式设计的，用一个卡片代替一行的展现信息，改变一种阅读的方式。

有的也可以转换图统计图表：曲线图，柱状图让用户直观的去解读，而不必一直看枯燥的数字。

您最近填写过在线表单了吗？

答案应该是肯定的。根据最近的研究，84% 的人每周至少会填写一份线上表单。

虽然你可能没有感受到，但在线填表单已经成为我们生活中不可或缺的一部分了。

其实，几乎每个把用户由 A 带向 B 的线上交互都是一个网络表单：与某个公司联系、订火车票、购物、订一晚酒店等等。

网络表单最早在 1994 年开始用于在线销售，第一个拖拽式表单 2006 年在屏幕上出现。从那时起，表单已经成为线上交互的关键。

企业和客户之间需要通过网站进行联系，小到县城的官网，大到国家政府网站，现在很难想像一个没有网络的世界。

但为什么线上表单一直备受诟病？

当然，确实没几个人喜欢填表，但大多数人绝对不会介意填写那些清晰、简洁、设计优秀的表单。

其实这也就是症结所在。太多的在线表单冗长、令人迷惑或让人感到有所冒犯（有时甚至三者同时出现）。

当表单产生让人迷惑，或提出的要求超出必要范围时，用户的放弃几率就会大大增加。 有些用户可能会放弃填写，甚至退订整个业务。无论是以上哪种情况，您都不会再有第二次机会。

在设计一个表单的时候，我们怎么保证用户能填到最后一步？

「创建一个表单很简单，难的是让人填完它。」

在帮助 420 万用户创建线上表单后，我们在 JotForm 发现了一件重要的事情，就是一些小小的改变会让整个事情大有改观。通常，这些改变都是从那些被放弃的表单中获得的灵感。

例子：

• HubSpot 发现，当一份 14 页的潜在用户登记表，被放在一个单独的登录页上时，用户填完的可能性要高出 17%。
• Marketo 发现，一些非关键的填写区域，反而让每位潜在客户的线索成本上涨了 25%。

表单设计成什么样呢？应该直观、简单以及体验友好。以下是一些推荐的参考方法。

第一部分：表单的主要元素

1. 欢迎填表者：标题与介绍

无论是谁，欢迎朋友的时候难道不会说「你好吗？」我们都知道礼貌的重要性，但是在线上却往往忽略了这一点。

欢迎页和标题让您有机会以一种清晰而友好的方式介绍表单和自己，而且还会留下一个良好的第一印象。

看看 BettingExpert 的数据吧：通过修改表单标题来强调「注册理由」以后，他们的注册率提高了31.54%。

标题是对下文最短最精的概括。用户一般都会跳过表单内容，而且几乎都不会仔细阅读那种特别详细的描述。所以用最少的文字说清楚一个表单的目的尤其重要。

标题可以简单理解为描述被调查者对表格的期望。尽可能保持中立：要确保应答者诚实回答，而不是去满足出题者的设想。甚至像陈述一个目标这样简单的事情，也可能会不知不觉地诱使应答者试图迎合。

而且现在也需要一份清单，说明应答者应该事先准备的外部文件，没人想中途去满屋子找纳税证明或者护照。

如果填表需要很长的时间去完成，一定要提前告知用户。不过如果是又快又简单的？让用户感到惊喜吧(但不要冒险侮辱任何人的智力，以防万一)。毕竟，他们能够通过查看进度条或字段数量来推断出这一点。

2. 放置相关的标题和副标题

一个有趣的事实：人类会在 50 毫秒内形成第一印象。重点：由于时间不够长，他们无法仔细阅读你的作品。

表单用户很可能就是快速浏览一小部分内容，忽略大部分内容。而且有很大可能是他们正在忙着其他事情，无法集中注意力或者几乎就没有什么耐心，只想要快点结束。

显然，我们无法阻止用户，所以只能通过简洁明了的标题来引导他们。标题绝对是个得力助手：可以将文本结构化、清晰化、保持用户的参与度。

用户应该可以看一眼标题就知道他们应该怎么做，而不是非得把剩下的全部看完。

测试这一点的最好方法是单独阅读标题，是否能让人看懂呢？

3. 问题之间要有分隔符

分隔符很重要。就传统表单来说，在视觉上把问题隔开以达到减少干扰的最好方法，就是使用分隔符。并不需要在视觉上做出很大的区别，区别太大反而容易分散用户注意力。

4. 多页面表单或单页表单？

这主要取决于表单有几个议题。

如果只有1，2个议题，单页表单肯定是最佳选择。但是如果一个表单有很多议题，那么就需要多页表单来呈现。想象一下：用户在面对一个似乎有成千上百议题的表单时，得有多心烦。

5. 强调「行动召唤」（CTAs，Calls-to-Actions）

成功的「行动召唤」强调的是「行动」部分：单击这个按钮，用户要执行什么操作？类似「发送」，「注册」或者「过程」之类的通用标签并不会削弱召唤机制。描述越多越好。

为了消除不确定性，试着从用户的角度回答一下这个问题「我想干什么？」举个例子，如果是某项服务的调查表单，那就应该是「我需要免费咨询」。

还需要更多证据吗？在这类研究中，Unbounce 发现只是把「开始你的试用」换成「开始我的试用」，就提高了90% 的点击率。

6. 标明表单中的区域

这并不是说要弄得花里胡哨的……

单选框、挑选区域和复选框之所以有效，是因为它们既简单又常见。表单元素的标准格式等同于更好的可用性。

单选框适用于有很多选项而只有一个可选的情况。复选框用在多项选择的情况下最好。

为了更短的认知适应过程，要尽可能地使用多选框或者单选框而不是下拉菜单。就像 Luke Wroblewski 说的：「下拉菜单应该是 UI中的最后选择。」

7. 别忘了「感谢」页面

记住用户是花时间的。所以千万不要唐突结束，要记得说谢谢。

第二部分：怎么写用户才愿意看

以下是一些关于表单书写艺术的小建议。

1. 言简意赅

从形式上来说，我们都更喜欢简单的语言，尤其是那些学者，天才和专家。那为什么还有那么多线上对话像是复读机一样？

「请接受来自我们最诚挚的道歉。即便如此，我们还是希望能知道您的建议。除此之外……」

像一个老学院派那样说话只会疏远用户，让他们瞠目结舌。

简单不意味愚蠢，而是等于可读性。这意味着最清晰的平白直述。每个词语都应该是最短，最直接的版本，能用「不过」就别用「尽管如此」。不用行话，不写复杂句。

你可以通过大声朗读来检查连贯性。耳朵能够听到眼睛看不到的东西，特别是在描述那些冗长复杂概念的时候。

2. 拟人化

一份表单应该就像是你和填表者之间的对话。通过用「我」，「你」，「你的」这些代词来拟人化。

3. 减少被动句

主动语态的表达（比如：约翰写了一封投诉信）比被动语态（比如：一封投诉信由约翰写出）更加有力。

被动语态会更冗长，不够集中。

（译者注：以下文章中带横线的内容适用于英语语法，不感兴趣的读者可自行跳过。）

一个被动语态句子究竟有多糟？这是两点教训：

• 动作的执行者不够清晰（一封信被写错了）
• 这个句子的 Be 动词（to be ,has been,was）后面跟着一个过去分词。

还是不确定？你可以去查一下微软 Word 可读性标准，或者普渡大学语句方法。

4. 尽可能地删减词语

许多作者都会陷入这样的思维误区：用的词越多，就显得他们越聪明。其实不是这样的。在表单编写方面，或者说各种写作中，删减词语都要比添加词语更加有益。

「你删掉的每一个词，都会为你多增加一个读者。」

在仔细检查不必要的词语后，文章会更笃实，更连贯，更吸引人。

删减重点：

• 副词（以ly结尾）。
• 无意义的量词（很多，大量）。
• 空洞的程度形容（副）词（非常，特别，尤其）。
• 「that」这个词。
• 非必要信息。
• 模糊词（东西，少量，大量）。

5. 尽可能使用缩写

比起完整形态（比如 cannot，is not），语句的缩写形式（比如 can’t，isn’t）能够让文章看起来更简洁，友好和易读。

另外，还能节省文字篇幅。一份优秀的表单阅读性都不错。

What’s 优于 What is。很简单。

6. 长句变短句

冗长曲折的句子容易让人难以理解。密密麻麻的文字堆也是如此。

对于大多数读者来说，每个句子最多 20 个单词，每个段落最多 3 个句子，是最合适的。把每个长句都扩成两个短句。短句实际上并不逊色。

使用空格，项目符号，表格以及打破繁琐说明的任何其他元素，都会使您的读者松一口气。

7. 检查文字

在我写博客的过程中，我（艰难地）认识到，优秀的文章是 30％ 的写作加上 70％ 的编辑。

当你完善了问题，精简了文字和内容后，把表格存储好。隔几天再回过头来看，你会发现有些之前没有发现的地方还可以再改进。

第三部分：表单心理学

大多数用户体验的心理学原理其实都在人们的潜意识中，所以难以让人注意到。

但是每种颜色，字体，线条和按钮都有其用途。

日常的小规模设计可能不如十亿美元的营销活动那么引人注目。但小设计也需要花心思。而且，研究令人愉悦的设计背后的心理学机制很有意思，成本也不高。

以下是一些关键的心理原则，这些原则构成了设计优良的表格的坚实基础。

1. 比较成本和收益

我们做出的每一个决定，从倒垃圾到订婚，都要经过我们头脑中的自动成本收益分析。一项任务的成本是否值得完成后的收益？

设计师的工作是确保用户在感知上收益是大于成本的。

当然，成本与收益是主观的，填表通常源于义务，而不是受访者希望从中获益的行为。除非给受访者奖励，否则无法确保收益。但是我们可以把成本降到。

降低受访者成本的一些关键策略:

2. 使用文本块

+1-919-555-2743 vs 19195552743.

哪个电话号码会留在你的脑海里？当然是第一个。那是因为它被分块了。

组块是一种方便的记忆技术：我们把它用于银行个人识别码、社会安全号码和储物柜代码。它指的是将信息排列成「块」的过程，使内容更容易保留、处理和回忆。

研究声称数字 3 是帮助人们吸收和回忆信息的神奇数字。所以尽可能使用它：针对段落，列表，关键步骤等等。

3. 定义格式要求

如果可能，避免任意格式化规则。但如果是必要的规则，用红色记号笔拼写出来。填表单时，没人愿意猜。密码要求、语法规则、编号间距等等，如果一个字段需要特定的输入，告诉用户。

席克定律

如果我要举办一个晚宴，我总是选择从当地一家小杂货店购买我的配料，而不是从一个杂乱无章的超市购买。那是因为有太多的选择往往会让人感到麻木。这就是席克定律：它指出，随着选项增加，做出决定的时间也在增加。

应用到用户体验领域，席克定律简直就是去繁求简的一剂良方：限制导航选择，给用户明确但受限的选项。因为随着设计灵活性的增加，它的可用性会降低。少即是多。

4. 下定决心（再次）删除

这个链接有什么用？还是右上角的按钮？如果并没有增效，那就是减效。每一个字，每一张图片，铃铛图标或者口哨图标都不是100% 必需的，这些都会降低你表单的转换率。

尼尔·帕特尔称只需删除一个字段，他的联系人表单提交率就可以提高 26%。

正如杜鲁门·卡波特曾经说过的，「我更相信剪刀，而不是铅笔。」

5. 减少打字需求

打字是在线表单中最耗时、最密集的部分，而且经常会导致错误——尤其是在手机上。用按钮、滑块替换文本框并使用自动完成功能，将减少工作量并提高转化率。

6. 用条件逻辑缩短表格

根据 Marketing Insider Group 的调查，有 78％ 的互联网用户表示来自品牌的个人相关内容会增加他们的购买意愿。而当体验与用户无关时，营销活动的效果将降低 83％。

因此，感谢条件逻辑！

条件逻辑（或「分支逻辑」）通过允许基于特定响应的附加指令——类似：「如果这样，那么」，简化了复杂的流程。

使用条件逻辑将不会显示与用户无关的问题，从而减少完成表单的时间，从而使他们不太可能放弃前面的任务。

是的，这听起来像是常识，但是大多数表单都会向每个用户（无论他们是谁）提出相同的问题。使用条件逻辑是双赢的，因为通过明确定义用户细分，可以捕获更干净，更有用的数据。

双重编码理论

我说树时。您就会想到树干、绿叶、树枝。

我们的大脑就像这样聪明：它把图像和文字联系在一起。

这是双重编码理论背后的关键原则，该理论指出记忆有两个不同但相互关联的系统，一个用于文字信息(「树」)，另一个用于视觉信息(「树干、绿叶、树枝」)。

当某样东西以两种方式(图像和文字)被「编码」时，它被理解和记住的几率比仅仅以一种方式(图像或文字)被编码的几率要高。

换句话说，将单词和图像配对会使它们更容易记忆。儿童书籍充分利用了这一点。在设计表单时，有两种方法可以将双重编码理论付诸实践。

7. 信息可视化

我们的大脑处理图像比处理文本快得多。使用图标、照片、形状等线索——无论什么有助于说明你的观点——都会让用户体验更加直观。

表单设计应该是一致的，但这并不是说就不能加入一些小惊喜。通过使用非标准的界面元素——如可点击的图像和切换的滑块——可以使表单填写更加愉快和直观。

8. 颜色

你知道吗：用户最初对产品的判断有 90% 仅仅基于颜色？

实际上，根据营销大师尼尔·帕特尔（Neil Patel）的说法，色彩是「购买特定产品的原因的 85％。」正确的组合可以使读者人数提高 40％，理解力提高 73％，学习能力提高 78％。

你不需要成为一名设计师来找出哪种配色方案和对比效果最好。像 Adobe Color CC  和 Paletton 这样方便的程序可以帮助你选择一个能反映你公司形象的调色板。

9. 让表单更漂亮

我们是肤浅的生物，习惯于相信有吸引力的设计在其他方面也更好：更快、更智能、更易用。这被称为「审美可用性效应」，漂亮的界面增加了我们的耐心和忠诚度，甚至让我们更有同理心。

如果内容或布局不吸引人，38% 的人会停止使用页面。换句话说，如果线上表单看起来不漂亮(也不容易填写)，那就是浪费时间。

当然，一百个人心里有一百个汉姆雷特。但是一个简单的界面、干净的字体和时尚的造型绝对会赢得用户欢心。

进度条效应

如果我们知道我们已经取得的进展，我们就更有动力去完成一项任务。特别是已经领先进度的时候，感知上的工作量会相应减少，最终达到超预期效果。美国教授约瑟夫·努内斯和泽维尔·德雷泽将这种现象总结为「进度条效应」——「当人们能看到已付出的努力时，会更有动力完成任务。」

10. 以下是一些适用于表单的进度条效应的应用方式：

问题排列从易到难

如果表单里的问题按照从简单到困难的顺序排列(而且保持逻辑顺序)，用户将快速完成表单的初始阶段。这反过来会触发连胜效应：快速进步和动力感带来的满足感，让用户不愿意打破连胜。这意味着，当表单变得更加苛刻时，用户会继续坚持下去。

画出进度条

随时反映用户的进度。用户越接近目标，就越有可能完成。如果表单是多页的，请指出还有多少页要完成。

一份来自 Clutch 的研究表明 90% 的用户希望在线表单能有进度条来管控他们的花费时间。

第四部分：问题、回答和分组

1. 用头脑风暴讨论题目

所有的表单的关键都是题目。特别是在头脑风暴讨论题目的时候，最好的就是从目标出发，倒推回来。

所以你的第一个问题就是：你的表单的目的是什么？入职表？反馈意见？研究表单？

尽可能地记下你希望从表格中获得的信息。把它表达为题目(以问号结尾)，而不是灵光一闪。一定留足时间反复推敲。

然后，写下一些可能的答案，这些答案可能会给你一些灵感。

最后，头脑风暴讨论这些题目，这些题目就会解答刚才提到的第一个问题。

作为调查后的回顾，写下每个问题的回答百分比。将这些猜测与你的实际结果进行比较，会发现下一轮要注意的盲点。

这种回顾过程还有助于您的设计并节省您的时间。

关于板块的科学

根据表单转换率报告，表单类型直接影响表单的板块数量。仔细考虑每一个板块的每个问题。

现在，问问自己：你真的、确定、必须要问哪些问题？

多数情况下都不是必要的。但是，即便我们明白少即是多原则，但是真的有机会去用户的脑子里一探究竟的时候，我们还是希望问题越多越好。

当然，这些问题的答案是很重要。但真的重要到失去用户都在所不惜么？

你需要用户的配合。但是每加一个板块，他们的耐心就会失去一点。所以，在你把所有的题目和答案全列出来以后，能删尽量删掉。考虑收集数据的其他方法，并考虑这个题目是否可以推导出来，或者以后再说甚至完全排除。

尽量避免可选问题。如果必须，请在表单最后列出来。

2. 正确地分组题目

将线上表单结构化是成功的关键。

在你经过头脑风暴讨论，修剪精炼得出了最终的问题清单后，就该组织他们了。用一个「主题」标题将它们组织成组和子组，比如说联系方式，工作经验等。

这样一来，用户不用去读具体的问题就大概知道自己接下来要做什么。

3. 定义问题的逻辑序列

现在要考虑问题的顺序了。按照经验来看，主题相似的问题，就应该放在一起。

每一个问题，每一个板块，都应该激励用户到下一步。大跨步似的前进会让用户困惑，所以要用一种一步一步引导用户往前的模式。

用户会通过调节对信息的流动有一种预判。比如说，「你叫什么名字？」应该在「你住在哪儿？」之前，而「介绍一下你的工作经验？」应该再往后。

4. 决定「必填 vs 选填 vs 友好」

最好的做法是把你的表单只限于必填的问题。选填问题将毫无必要地延长表单并激怒用户：「你从哪里听说我们的？」 「你想收到营销邮件吗？」

不过对那些非强制性的但是友好的问题，将它们放在表单的末尾，作为可选的后续内容。这样，他们会感觉不那么有侵略性，也不会影响你的转化率。

5. 一次只问一件事

双管齐下的题目会让用户觉得模棱两可。而且——你已经猜到了——模糊的答案无法量化。

看看题目中有没有用「和」，「或」。找到了吗？如果有，把这个题目改成两个。

题目越清楚，答案就越清楚。答案越清楚，数据就越清晰。

6. 提供便利

优秀的表单描绘了一条清晰的路线，通过线索、提示等引导用户完成表单。路线越短，用户完成的可能性就越大，所以尽可能地给用户提供便利。

以下是比较有用的便利方法：

邮编索引

要求用户填写地址的时候，最好的方式是只让他们填写门牌号和邮编，然后使用邮编索引服务完成地址信息的其他内容。（译者注：此条比较适用于国外。）

默认提示

默认文本提示是出现在表单字段中描述其预期值的浅色文本。只有在存在潜在歧义的情况下，才应该使用它。

字段标签

字段标签是出现在字段上面，关于问题性的文本。它经常都会出现，并且不应该用占位符提示来替代。人们常常为使用默认提示同时作为字段标签，但却引发了可用性的问题。

换句话说，你可以使用字段标签，不用默认提示；但是不能在没有字段标签的情况下只有默认提示。

预设答案

大家都喜欢做选择题。它们可以节省读者的时间，并且易于评估。

你可以通过回答「是/否」、「单选」或「多选」来预定义答案。如果有一个你无法预测的答案，添加一个「其他」文本框让读者输入一个自定义的答案。

搜索预测

在要求用户选择他们的国家、职业或具有大量预定义选项的其他内容时，搜索预测会减少所需的打字量(和认知负荷)。

第五部分：表单的受众，目的以及环境

表单只完成了一般的工作。它是被动的，不是主动的。表单的效果依赖于填表者。它们需要从一开始就嵌入到框架中。

表单是交流的工具。需要两方来参与。

因此，在设计表单时，你还需要从用户的角度考虑……这从他们的目的和环境开始。

为什么要有人填写你的表格？他们的目的是什么？把它们写下来。

目的和环境息息相关，所以要让环境在你的头脑中具体化。他们在哪里以及如何填写表格？在家吗？在笔记本电脑上？在手机上？在地铁上？

环境不仅仅是场景。关键是用户能明白在他们的帮助下你的表单可以实现什么目的。

1. 知道你的受众是谁

表单需要吸引目标受众的注意力——那么，这些受众由谁组成？

在泛泛人群中思考是没有意义的。要集中你的注意力，集中在一个人身上——或者说，一个「买家画像」比任何一个普通人群给你的信息都多。

试着描绘一个理想的用户画像，有工作、个性、家庭、希望和梦想。集中思考这个理想用户群体。他们在哪里生活和工作？他们的观点和价值观是什么？他们与你的业务有什么关系？

如果你发现对这些理想群体来说什么是有意义的，你就离最终给你带来高价值数据的那些问题又进了一步。

这些人就是你需要反复思考的人。这些人就是会给你答案的人。

表单视觉和结构

填表单肯定不会像过生日一样充满惊喜。

一致性是保持表单填写体验顺畅的关键。一致就是指颜色要一致、视觉感受要一致、主题调性要一致。

你的公司形象是什么？什么短语和单词能概括这一点？你的价值观是什么？在 JotForm，我们注重包容性、友好度和脚踏实地——我们的语言就在传达这些主旨。

当你定义了品牌调性后，在所有的表单中保持住——你的用户应该感觉到他们每一步都在和同一个友好的人互动。

视觉一致性同样重要。在整个表单中都应该用一种视觉风格(以后创建的其他表单同样如此)。

2. 左上对齐标签

Google 的 UX 研究人员发现，将标签左上对齐会减少表单完成时间，因为它需要的「视觉注视」更少。

3. 避免将问题并排放置。

眼动研究表明，简单的单列布局比并排放置的多列布局要好。

该规则的唯一例外是要求输入日期（日，月，年）或时间（小时和分钟）时，其中多个字段应在一行上。

4. 尝试一页一事

每页一件事是一种心理技巧，定义为：

「将一个复杂的过程分解成多个小步骤，并将这些小步骤单独用一页来呈现。」

本质上，用户只需要关注一件事。一条信息、一个决定、一个问题要回答。

整洁的页面鼓励用户继续执行任务。

5. 用输入框长度提示用户

把输入框的长度控制到正好能够包含所有的输入字符的长度（用户可以看到填入的完整内容）。

输入框的长度应该反映用户预期输入的文本量。邮政编码或门牌号等字段应该短于地址行。

贝马尔德研究所的可用性研究发现，如果一个字段太长或太短，用户开始怀疑他们是否正确理解了标签。这尤其适用于具有异常数据或技术标签的字段，如信用卡背面的 CVV 码。

表单设计中的错误和完成路径

就像生活中一样，填写表格时有可能出错就像生活中一样，关键问题是发出错误信号并允许快速纠正。

6. 不要只靠颜色

十分之一的男性有一定程度的色盲。

当显示验证错误或成功消息时，不要依赖使用绿色或红色文本(因为红绿色盲相对常见)。使用文本、图标或其他东西。JotForm Cards 用一个微动画警告用户，当出现错误时，该动画会说「错误」。

7. 在同一行内指出错误

向用户显示错误发生的位置，并说明原因。
如果您必须使用验证，请确保它是内嵌的(在字段的右侧)，并提前报告错误。不要等到用户点击提交来报告验证错误。但是同样，内联验证不应该是实时的，因为这可能会在用户完成字段之前报告错误。

8. 使用字段验证

你需要一个电子邮件地址，你会收到一个没有@符号的回复。你要求一个电话号码，而你的回答中有一半位数不够。

打字错误不应该成为表单可用性的障碍。

使用「字段验证」来确保得到您需要的答案，例如，「答案必须包含__」

JotForm Cards 恢复错误输入域名的用户的电子邮件地址；约翰@ gnail . com 应该是 john@gmail.com。

9. 但别太苛刻

如果用户回答的方式有很大差异(例如，用+12345678912、+44 12345678912、012345678912回答「电话号码」)，请将其转换为一致的格式。

第六部分：关于支付表单

什么是支付表单？

支付表单就是线上的收银台。它授权在线支付，验证用户的详细信息，检查资金是否可用，并确保你收到支付。

支付整合有很多优势。他们帮助你 ：

• 销售产品或服务；
• 在结算过程中进行复杂计算，例如增加税收和运输成本或减去优惠券；
• 呈现你的产品描述，如图片、数量、颜色和尺寸选项；
• 收集固定金额的捐款和付款，或者通过订阅服务保证周期性付款。

在设计支付形式时，遵循最佳实践是至关重要的。以下是一些关键规则。

1. 限制付款步骤

Baymard 研究所分析了支付表单，发现支付过程太长或太复杂是放弃支付的主要原因之一。所以一定要分块，分得越细越好。

2. 使用安全视觉提醒

当输入敏感的细节，如信用卡细节时，用户会对任何看起来可疑的东西保持高度警惕。最近的一项研究显示，出于安全考虑，17%的购物者没有付费就离开了页面。

专业的支付形式让用户感到轻松，而任何看起来「不舒服」的东西都会让他们感到紧张。这就是为什么你应该从头开始构建支付表单时就保持谨慎——即使是最小的错误或不一致也会吓跑用户。

它还有助于在表单上启用 SSL 来帮助保护数据。用户知道所有的互动都是加密的，因此可以安心。JotForm 是最安全的数据传输方式:我们符合支付卡行业数据安全标准 (PCI DSS) 1级，并启用了 SSL。

3. 清楚地解释你为什么要求敏感信息

人们越来越关注隐私和信息安全。如果你要求必须填写敏感信息，请确保使用字段下方的注释文本解释为什么需要这些信息。

4. 保存数据

让用户可以选择保存他们的地址和支付信息，可以使这个过程更快、更简单——尤其是在手机这样的设备上。这同时也会给回头用户一种奖励和忠诚的感觉。

5. JotForm添加支付集成的方式

• 第 1 步:添加你的品牌标志和定制风格。
• 第 2 步:使用链接按钮输入集成凭据，或者直接输入。
• 第 3 步:添加产品图像、产品细节，如数量、颜色、尺寸。
• 第 4 步:计算优惠券、税金和运费。（你可以使用集成采购订单来检查通用付款字段创建的详细信息和选项(这不需要任何凭证，因为它不会创建真正的交易)。你可以查看 Sofort 集成指南作为示例，了解整个支付过程。）
• 第 5 步:写一封私人感谢信——自动回复邮件。

一切就绪。现在你可以在网站、博客或社交媒体上轻松销售你的产品。当你完成表单后…万岁！完成了！但是……等一下。你的表单可能已经完成，但现在还不是发出去的时候…

还有最后一个步骤。

6. 发出前，测试您的表单

我们都有盲点。所以保持谨慎很重要，毕竟数据的质量决定了表单的成功。因此，需要事前检查一下调研题目，确保答案选项的完整可靠，没有任何遗漏。

把表单发送给家人/朋友，并要求他们记录填写表单需要多长时间，以及对这一连串的问题他们体验如何。这也将有助于你下次评估表单的设计。

文章来源：优设

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

介绍表单设计里经常会犯的错误~

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

标签是用来告诉用户这个列表项是什么；输入框是供用户完成信息录入的；按钮是供用户完成信息录入后点击进入下一个流程的。

标签

根据标签所处的位置，可以将其分为左标签、顶部标签和行内标签。

1. 左标签

左标签在目前来说是最常见的一种标签样式，但是这并不意味着我们可以无所顾虑地使用它。以手机端为例，手机端的屏幕尺寸（宽度）有限，左标签会占据屏幕较大的空间，此时右边的输入框就可能无法展示完整的信息。

例如，如果用户输入的地址过长，就会造成信息的展示不完全，这对用户体验来说是致命的。因为用户在进行下一步操作之前都会对输入的内容进行审核确认，如果连完整的内容都无法获知或者获知的难度较大，则用户根本不会进行下一步操作，这就造成了操作流程的中断。所以，我们在使用左标签的时候，一定要考虑对多行文本的展示。

2. 顶部标签

顶部标签是指位于输入框上方的标签，这样输入框就可以独占整个页面，信息可以得到更完全的展示。

与左标签相比，顶部标签可以给输入框的内容腾出足够的空间。在界面设计中，更多的空间还意味着具有更高的信息层级。同一个表单中会有很多的输入项，有些输入项的优先级很高，我们可以考虑使用顶部标签的样式来进行凸显。

但是这种布局方式也有缺点：会占据更多的纵向空间，之前一屏就可以展示的内容，现在用户需要滑动页面才可以看完。

3. 行内标签

行内标签又可以被看成是输入提示，其样式看起来很适合手机端的表单设计，因为它可以极大地节省页面空间。但是一旦用户点击切换到输入状态以后，就看不到这些标签了。如果操作提示字数很多，例如密码规范，那么用户记忆会很吃力。我们可以在调起的键盘顶部加上提示，减少用户的记忆成本。

但是，如果表单项目过多，则用户在填写的时候很容易串行，可能会出现把家庭住址填到毕业院校一栏中的情况。更严重的是，用户因为无法看到标签，这类错误是无法被检查出来的。为了解决这个问题，我们可以在行内标签前加一个图标来标识这个列表项，图标所占据的空间不会太大，而且会提高页面的美观性。

当表单项目过多时，我们要对其进行整合分组来提升内容的可读性。如下图所示，这里将 15 个字段分成 3 组。同样的内容，但给用户的印象却大不相同。

输入框

输入框的作用是供用户完成信息录入，这里我们的设计思路是如何提升信息的录入效率。我见过很多设计师偷懒，把所有的输入框都做成文本框样式，用户必须调起键盘一个字一个字地输入，这种体验是非常不友好的。如果我们想让用户录入个人信息，其中的生日和城市就应该使用日期和城市组件，而不是让用户手动输入。

即使非要让用户手动输入，我们同样可以根据不同的场景给用户提供更友好的体验。如果要输入的是数字，那么应该给用户调起数字键盘；如果要输入文本，那么应该给用户调起全键盘，避免用户手动切换键盘。

即使用户输入符号，我们也要考虑如何减少用户的操作步骤。例如，我们发现当光标位于周星星三个字右边的时候，点击「“」键，会出现左右双引号；当光标位于周星星三个字中间的时候，点击「“」键，只会出现左双引号。这是因为光标在文本右边，用户只要输入「“」，那么就必然需要「”」来结尾，这里直接提供左右双引号更合适。如果光标是文本中间，无法确定「”」需要在哪里出现，所以只展示「“」。

容错性设计

在理想状态下，用户填写完表单信息，然后点击「提交」按钮，系统显示提交成功。但是，现实情况却是用户在填写过程中经常会发生错误，那么如何将容错性原则融入表单设计中呢？

首先我们需要给予用户足够的操作提示，日期录入就是最典型的例子。不同的地区对于日期录入的格式也不一样，「02/12/2019」到底是2019年2月12日还是2019年12月2日？如果我们不提示用户，用户就不知道应该怎么输入。

为了避免用户犯错和提升用户的信息录入效率，我们可以提供自动完成录入功能，当用户在文本框里输入时，系统可以猜测可能的答案，显示可选列表，避免了用户手动输入造成的错误。

如果你确定对用户足够了解，在用户进行信息录入时，可以提供合理的默认值。因为对用户来说，填写信息永远都不是一件有趣的事情，设置合理的默认值可以节省用户的操作时间。

能让系统完成的任务，就尽量不要让用户来操作。用户会犯错，而系统不会。表单容错性设计的另一个方向就是梳理表单中的鸡肋项目。

现在很多的购票类 APP 都提供送票上门的功能，这就需要用户填写收货地址。以交通出行类 APP 飞猪、途牛和去哪儿为例，其中，上图中左侧的两张图，飞猪和途牛都需要用户填写邮政编码，而在去哪儿中则是选填的。其实根据用户填写的地址，我们已经可以获取到邮政编码，邮政编码完全可以自动回显，不需要用户手动输入。

而在小米有品 APP 中就可以根据用户填写的地址回显邮政编码，这看起来很方便。这只是看起来很方便，我们可以继续思考一下：如果系统完全可以根据用户填写的地址获取到邮政编码，那么邮政编码这一项完全可以不在界面中露出。其实很多产品在用户填写收货地址的时候已经不需要用户填写邮政编码了。

对于容错性原则，我们还要考虑如何给用户展示合理的报错提示。目前来说，我们经常看到的一个报错提示样式是对话框。在我看来，对话框并不是一个好的选择。因为用户如果要进行修改，就必须要关闭对话框，那么用户就看不到错误信息了。如果错误原因和解决方案的字数较多，那么用户就需要花一定的时间记住这些信息，然后再来修改，这会增加用户的记忆负担。如何才能设计好表单的报错提示呢？表单中的报错提示可以分为两种：单行表单报错提示和多行表单报错提示。

单行表单中意味着在当前界面中表单只有一行输入框，其一般用于手机号、银行卡号、身份证号和金额的录入。对于此类场景，建议使用输入框底部的文字报错提示样式，并且要对录入的信息进行实时校验，不要等到用户进入下一个界面才告知用户在上一个界面中手机号输错了。

给多行表单进行报错提示时，除告知传统的错误原因和解决方案外，还应该告知用户错误的位置。因为在一个界面中，有很多的输入项，用户在短时间内无法把报错提示和错误项联系起来，因此，为了提升用户对于错误场景的感知效率，对错误项进行标记是非常有必要的。具体的实现方式有改变文字颜色、输入框背景色和设置提示文案抖动。

以上图为例，这里通过改变文字颜色或输入框背景色来标记错误位置，用 Toast 告知用户错误原因和解决方法。我们也可以不改变配色，让该输入框左右抖动也能起到快速标识的作用。

按钮

表单中的提交类按钮按照位置可以分为以下三种。

其中位置 A 是最常见的布局样式，这样的布局符合用户的视觉习惯和操作流程：用户由上而下完成表单信息的填写，最后点击「提交」按钮进入下一个页面。但是这种布局有一个问题：如果表单项目过多，则用户必须滑动页面才能完成提交操作。

位置 B 跟位置 A 很相似，唯一的区别在于位置 B 是固定在页面底部的。那么位置 B 跟位置 A 的适用场景有什么不同呢？位置 B 意味着用户在不用滑到页面底部的情况下就可以点击「提交」按钮，那么在什么样的场景下用户不用滑到页面底部就可以提交呢？

其实在很多表单中，不是所有的信息都需要用户手动录入的。以前面提到的邮政编码为例，只要用户输入了地址，系统就能获取邮政编码，相关信息是可以直接回显的，用户没有看到此类信息的必要性。所以，对于一些重要性不是很高、不强制用户看完的表单项目，很适合使用这类底部悬浮按钮。最常见的就是各种协议页。

位置 C 出现的原因在于，对于前两种方案，当调起键盘时就会遮住「提交」按钮，用户必须先关闭键盘才可以点击「提交」按钮，多了一步操作。而位置 C 可以完美解决键盘遮挡的问题，但是其不符合用户的视觉习惯和操作流程。而且手机大屏化是一个不可逆的趋势，用户在单手握持手机的情况下很难直接点击到界面右上角的「提交」按钮，增加了操作难度。

其实位置 C 完全可以被忽视，因为现在很多产品已经支持在调起键盘时滑动页面，所以位置 C 最大的优势已经不复存在。这里还介绍位置 C 的原因是希望读者知道交互规则是会随着技术的发展而不断改变的，可能在这本书里提到的一些技法过一段时间就会落伍了。要成为一名优秀的设计师，必须具备持续学习的能力。

文章来源：优设

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

之前有和大家分享过无线端表单一些设计原则，本周设计群小伙伴@竹溪，也帮忙分析了PC端常用一些设计原则，和设计规范！希望可以帮助到在做BS/CS的一些朋友，也欢迎更多朋友加入我们一起交流设计，研究设计，最近我们也在研究VR的一些设计方向，欢迎交流探讨

表单设计中，各种设计模式和技巧已经越来越成熟了。在诸多设计技巧当中，悬浮标签这一设计手法，应该是对于用户体验提升最明显的一种。早在2013年8月的时候，我第一次考虑在自己设计的表单中运用悬浮标签，这个想法很简单，在占位符文本中，借助动画加入一个图标显示，确保用户不会在填写过程中迷失。

如何定义一个后台是好的？领导说好，用户说好，你自己也觉得好，那应该就是好的。大部分情况下产品已经定制好了每个功能模块，UI上只需要对着原型加以美化，如果你是这样做的，那么做出的东西一定会让人觉得有问题但是又不知道问题在哪里，总是想让你改。