哦哈哟！2018.1.1 涂鸦一幅，新年快乐！

欢迎来戳个人微信公众号：大刀的创想X

2018来了，其实感觉也没什么不一样，无非是又老了一岁，各种事情什么过年啦、日常催婚啦、日常催生啦、职业瓶颈啦、对象难找啦、等等等等都会变得越发的严重......听起来好像还是蛮不一样的😂，开个玩笑。好了但是，虽然心里可能有各种不痛快，还是希望小伙伴们都可以脸上笑嘻嘻的面对新年，毕竟所有的困难都会慢慢慢慢慢慢慢慢慢慢慢慢被解决的。

新年，期待其实不多，现在非常想做到的就两条：1. 工作和日常上：做更少的事，把重点放在精和深（已在尝试中）；2. 精神上：情绪控制，希望自己可以变得更理性一点吧（好难=。=）。

好啦瞎扯结束，进入译文~

本文共总结了优化商品结算表单（也适用于其他所有类型表单）的16条要素，同时我们也能从文中了解到为什么需要掌握这些要素。

1. 丢最少的问题给用户

左边的：包含太多不必要问题；右边的：一次性列出最重要的问题。

永远记住：在特定的某个步骤里，只问与此步骤相关性最强的内容。举栗子🌰，假如你是表单设计者，而对你来说，用户的电话号码或家庭住址在目前的这个步骤中，并不是那么那么需要的话，那就直接不要问！在这种情况下“少就是多”（Less is more）原则完美适用。

这样一来，能够尽量减少问题的数量，从而：

1. 减少完成该表单的时间；

2. 减少用户浏览页面时的精神负荷。

2. 尽可能多的 预先填写/自动识别

左边的：所有的空都需要手动填写；右边的：一部分已被系统自动识别填写好了。

一定记住：永远为你的客户考虑，尽可能的帮助他们。如果你本来就已经预先知道一些关于该客户的信息，那么就直接自动帮他/她把这些信息填了就好，或者也可以干脆不展示出来。

举栗子🌰：

绝大多数情况下，我们是可以预先通过IP地址获取某个用户所在的国家和城市的；

如果某个用户是通过邮件订阅进入该表单流程，那么他的邮箱地址肯定是已经被获取过的了。所以邮箱那一栏我们就可以自动帮他填上了。

再比如“Fluix”这个网站的结账流程，15个问题中就有5个（1/3）可以被预先填写好，这是因为此表单针对的是产品试用结束后的订阅注册用户。对于这类用户，在他们注册试用账户时就已经提供了部分信息，我们就可以帮他们提前把这些信息自动填好即可。

但同时也必须考虑到，在B2B市场中，使用结账系统的人和实际付款的人可能并不是同一个人。因此，我们应该将预先填好的区域仍保留为可编辑模式。另外也要注意用户信息安全的问题。有很多预先填好的信息内容，可能看上去会给用户一种我们在窥探隐私的感觉。

3. 使用自动对焦

图中是Apple Store的结账表单。左边的：用户需要自己找到并手动激活第一个要填写的区域；右边的：列表中的第一个填写区域已被自动激活，起到聚集视焦的作用。

因此，我们应该自动激活第一个填写区域（或是需要的某个区域）。如此一来，相当于给了用户一个引导，明确指示他该从哪里开始填起，从而提高效率，并免去了用户的额外点击动作和一系列不必要的思考过程。

4. 使用单列设计

图中是Fluix的结账表单。左边的：视线顺序为“Z”型；右边的：视线顺序从上往下，自然的呈一条直线。

设计表单时最好使用单列的形式，视线顺序呈自然的方向——从上至下一条线。若使用多列的形式，视线就会随着填写的过程开始歪歪扭扭（“Z”型），这会极大增加用户的填写时间，也会增加视线聚焦的次数和压力，体验很不好。

并且，这种设计方式（单列设计）不会引起某些不必要的疑问，比如，“我应该从哪里开始填起？”、“哪个格子是第一个？哪个又是第二个：是底部的还是最右侧的？”、“左边那一列的问题和右边那列性质上是一样的吗？还是说他们是独立的？为啥要把它们分开？”，等等。

另外这里可能有几个例外，就是那种常常被写在一行里的信息，比如：

名字，中间名，姓氏：Sebasteean van Derlot

日期和时间：2017年，2月21日, 16:30

城市和州：San-Francisco, CA

5. 按照语义划分区域

左边的：所有内容没有分隔，造成混乱感；右边的：同样的内容，被分隔为3部分，给人循序渐进的条理感。

如果表单里的填写项很多，那么可以试着按照语义/类型划分为几个组，在组与组之间加上一些空格或者组名来实现分隔。这种方式会给人一种循序渐进，一步一步去填写的感觉，避免用户觉得内容繁琐从而离开当前页面的风险。

这和写文章分段落是一样的道理。分段能让读者一点一点的去阅读，而不是整个内容都混在一段里，让人觉得杂乱无章，无从读起。银行卡数字“4-4-4-3”的分隔也是同样的道理。

6. 为每个输入框设置限制条件

为了尽量减少 出现错误、反复修改 等情况，我们应该给每个输入框设定一些限制：

字段长度的最小值和最大值（例如：字符的个数）；

内容格式的限制；

数值上的、字母上的、数字和字母结合上的，等等关于字符上的限制；

每个输入框附属的一些其他限制

比如，卡号会是由字母或什么别的符号组成的吗？显然不会。卡号一定只能是由数字组成的，因此输入卡号时没有必要允许输入除数字之外的字符。同理，如果是在手机上输入卡号，并且没有对输入做任何限制的话，就等于强迫用户手动在文字键盘和数字键盘之间做切换。这个规则也同样适用于其他很多情况。

7. 通过视觉设限

在输入框的设计上，利用视觉上的处理来体现对框里内容长度的限制。例如，“州”（State）的输入框里只需要填入两个字母（美国的每个州的缩写都是两个字母），那么就没有必要把该输入框设计的过长。

另外，输入框宽度的不同，在视觉上也增加了辨识度，起到快速导视的作用。相反，如果所有输入框都是相同宽度，在视觉上会比较难区分，造成更高的识别成本。

8. 错误提示信息必须准确清晰

当用户输入错误时，最好使用内嵌提示——将错误提示紧跟着展示在错误内容旁边，而不是页面上其他地方，这样有利于用户快速准确地定位错误信息并根据提示进行修改。

更重要的是，一定要将这类错误提示的描述语言做得精确到位，把问题的根源向用户描述清楚，避免使用泛泛而谈的句子，比如“输入出错了，请稍后重试”，或“错误999”，这种描述对用户来讲难以理解，等于没说。我们应该尝试用更人性化、更好理解的语句去解释：1. 用户具体哪里做错了/系统怎么出了错； 或者 2. 用户应该具体怎样解决这个错误/问题（2优于1）。

9. 使用内嵌式实时反馈的表单验证

告知用户输入有误的最佳方法，就是在他输入错误后，实时将输入框用不同颜色圈出高亮，并在其旁边显示出错误提示的具体信息。

现在的在线服务会使用很多不同类型的验证方式（或者什么验证都不用）。

· 有一些表单，只有在用户填完所有内容，并点击“继续”/"提交"按钮之后，才会显示填写有误的提示。这      种叫做：Control Version。

· 还有一些表单，使用内嵌验证，以输入框为单位，在用户输入中，甚至输入之前，就显示填写有误的提      示。

以上两种会带来非常不好的用户体验，其中更不好的是第二种，因为：

对于在“输入时”就提示错误的验证方式来说，用户每打一个字，提示就出现一遍，会造成干扰/困扰；

对于在“输入之前”就提示错误的验证方式来说，在输入框还未被填充的状态下就显示错误提示，本身在逻辑上就是错误的。

在用户每填完一个输入框后，立刻调用“内嵌式实时反馈的表单验证”有诸多好处。以下是Luke Wroblewski（Google产品总监）的一次调查中的一些数据（这项调查早在8年前就完成了！）：

表单填写成功率——提高22%

错误率——降低22%

用户满意度——提高31%

填写时间——减少42%

修改次数——减少47%

10. 将输入框名称标签置于框外。如有需要，设置框内提示文本。

这里的主要规则是：当用户在输入信息时，不要让他们找不到该输入框的名称标签，这样可确保用户不会忘记自己在填什么东西。所以我们最好将名称标签放在输入框外，而不是里面。并且如果空间足够，可在输入框和名称标签之间加少许空格，让排版显得更加清晰。

如果是做手机端的设计，可能会受限于屏幕尺寸，这时可将名称标签放在输入框上方。这样做确实会让表单变得更长，但更长总比更宽要好的多，因为垂直的视线顺序对我们的大脑来说负担是更小的。

如果要用名称标签在输入框内的形式，我们可采用下图方式——对于指针所在的输入框 或者是已经输入完成的输入框，将原本置于框内的名称标签稍微缩小并移动至输入框的左上角。这种方式现在还比较流行，而且对于手机端的设计也很实用！

我们还可以为用户提供额外的帮助，例如在输入框内用浅色字写出提示文本，提示用户填写时应该采用什么样的格式、结构，等。

以下是比较好且简明的提示案例🌰：（英文）

the date（日期）: DD/MM/YYYY

phone number（电话号码）: +1(___)___-___

exp. date（过期日期）: MM/YY

以上案例在提示的同时，也起到了格式和字符限制的作用，所有应该怎样去填的指导都跃然眼前，非常好理解。

但我们在这样设计的同时，一定要做到视觉上的明显区分（我们设置的框内提示 vs 用户实际输入的文字）。如果区分不够明显，用户可能会误认为我们设置的提示文本是已经填好的内容。

11. 标记出可选填的输入框

关于这一点，业内争议诸多。Baymard研究机构认为，应该把必填项和选填项都做上相应标记。但我个人更倾向于Nielsen Norman研究小组（两家都是做UX研究的机构）的说法。他们的建议来源于做设计的首要原则之一——问题问得越少越好。按这个原则来考虑的话，其实在一个表单中，最好没有选填项，这样就做到了极简。所以按照这个思路，我认为的最好做法是：必填项和选填项中，哪个占少数，就标记哪个。举个栗子🌰，如果10个输入框内有9个都是必填项，那我们就应该去标记选填项。

对于Fluix（作者参与设计的产品）的表单来说，现在并没有任何的选填项，因为我们只问真正需要的信息，避免去提额外的问题。所以我的决定是，一个都不作标记。但其实这样的设计也存在一定的问题，因为用户可能并不能百分百确定是否所有的输入框都是必填项。因此我决定等完整版的表单设计完成后，再去做一些对比测试。

12. 结算流程中，切勿分散用户注意力

尽量避免结算页面（表单）出现链到其他地方的链接，确保用户能够完全集中精神在表单的填写上。不然用户很有可能去到别的页面后就忘了填写表单这回事儿了。

最好只在某些紧急情况下，或是在我们需要借助外部网站来对页面上的某些重要信息作出解释时，再使用外链。举个栗子，如果你使用的是第三方服务，那么最好提供一个官方原始页面的链接，让用户有渠道去了解这个系统到底是怎样运作的。

13. 只在表单完全填写完成后，亮起“下一步”按钮

在用户填完所有必填项并且没有任何错误的情况下，再激活“下一步”按钮。很显然，只有当我们使用的是内嵌式实时反馈验证时，这个规则才适用。这个规则能够让用户集中在填写表单上，避免错过重要信息。更重要的是，自动激活“下一步”按钮也有刺激视觉，引导视线的作用，能够让用户的视焦在对的时间迅速跳至按钮处。但如果要让这个做法达到预期效果，我们需要把按钮的可点击状态和不可点击状态在视觉上做出更明显的区分。

14. 注意地区差异

做设计时，必须考虑国家/地区差异。例如🌰：

不同的电话号码格式；

不同的语言表达方式（如，美国的邮编习惯写作“zip code”，而英国则习惯“postal code”）

只有美国会出现“州”这一栏，等

15. 询问某些具体数据时，解释清楚为什么以及作何用处

上图右为Facebook的注册页面，他们在用户注册-填写生日日期时具体解释了为什么需要这条数据。

一定要记时刻记住，我们向用户提出的所有问题对他们本人来说，其实都是非常隐私、敏感的内容，包括了他本人的生活、家庭、财务状况，等。因此为了避免不必要的疑惑，我们必须向用户解释清楚，为什么向他们要这些信息/数据（比如电话号码、生日日期、体重、配偶名字，等）。

16. 考虑色盲/色弱人群

如果在设计中（前景和背景）颜色对比度比较低，那么易读性就会受到影响，尤其是对于色盲/色弱人群，而且现在仍然有些手机/显示器还是特别老式、本身精度就不高的那种，对易读性的要求会比较高。

很多设计师/服务商经常会遗漏（色盲/色弱人群）这一点，但是这部分人其实还是相当多的（仅仅在英国就有大约4.5%，也就是270万人是色盲/色弱！）。

这里提供两个工具，可帮助检测我们所使用的对比度是否达到标准：（可以自己去搜下看哈）

· Colorable

· Color Contrast Check

如果你使用的是Photoshop，可以试试 Bjango 这个插件（可搜: “Bjango Actions”），里面有色盲/色弱测试（Color Blindness Testing，如下图）。

使用Sketch的同学可以试试用 Stark Plugin（可搜: “getstark”）。

虽然这些插件并不可能完全准确，但足够让我们对色盲/色弱人群眼中的颜色是怎样的 有一个正确的认知。

好啦，到这里16点就全部说完啦，这些规则基于了一些日常观察，也参考了很多设计行业大公司/知名设计师的研究，希望对小伙伴们有点儿用！：）

---

本文经原作者授权翻译.

原作者: Dmitry Kovalenko (Readdle首席产品设计师, 参与设计Fluix, SparkMaillApp, PDF Expert, Calendars, 等产品)

原文: 《16 Tips that Will Improve Any Online Form》

原文地址: https://uxplanet.org/the-18-must-do-principles-in-the-form-design-fe89d0127c92