表单包括注册表单，信息表单等等是一个非常常见的设计模块，在UI设计上，几乎无可避免。这是一个小的功能模块，设计不易出彩却易出错，不易欣赏却容易因为不好的体验而厌恶；它是一个不引人注意却也十分重要的部分。

ps：本次更新编辑新加了各种例子，包括对微信淘宝等APP某些页面的分析。方便大家阅读，易于对我这絮絮叨叨长篇文字的理解哈～

首先，了解表单在功能上必须完成的4个关键因素

Eric Reiss，Usable usability: simple steps for making stuff better，2013  易用为王

1.人们要能够提供表单中所有要求的信息

    （比如网站所有者想要收集的额外信息而不是交易所需的必要信息）

2.太固定的输入格式，会极大程度上的增加表单错误

    （格式不固定，显示固定；格式比如说电话号码等纯数字输入最好提供数字键盘，年份月份等信息最好提供环形滑动选择）

3.相互依赖的表单和登录也会增加出错概率

    （比如购买需要账户，而当用户已游客姿态浏览时可能产生付费需求，要注意不要在用户已经非常深入操作以后强制中断进行登录操作，更不要登录注册完成之后   无法返回之前页面而需要重新操作；如果必须打断操作，需要注意打断的时间长短需要预留足够的时间来给用户填写表单，以免页面超时而重新来过；另外打断方式也可在登录简单的状态下选择拟态界面等轻量设计）

4.有歧义的使用说明会大大影响用户的使用

    （比如日期的格式说明：dd/mm/yyyy或ddmmyyyy或dd-mm-yyyy如果需要填写，需要给出清晰的填写说明，不要当我提交的时候才被告知不被网站接受）

以上是设计一个表单在功能层面上最基础要达到的几个点要求，如果要创造更愉悦的用户体验，则需要在设计上思考更多：

第一部分：心智模型和可预见性

一、何为心智模型

至少 25 年以来,心智模型一直有着许多不同的定义。其中在“设计师要懂的心理学”中作者最为认 同的是 Susan Carey 的定义,出自 1986 年论文“认知科学与科学教育” 

(Cognitive Science and Science Education): 

“心智模型指一个人对某事物运作方式的思维过程,即一个人对周遭世界的理解。心智模型的基础是不完整的现实、过去的经验甚至直觉感知。它有助于形成人的动作和行为,影响人在复杂情况下的关注点, 并确定人们如何着手解决问题。”

举个大家熟知的例子：

关于开门：推和拉，往往是根据门上是把手还是平整方块来确定。人们根据生活的经验来判断新环境中对新事物的操作方式。

简单的理解： 

在设计的领域，就是指人们在使用你的产品的之前，基于每个人自己对真实世界的理解和经验，有一个对事务认知理解的模型已经建立。这就是用户的心智模型，用户根据他们自己的心智模型对你的产品产生预知、期望以及猜测。

举个例子：Steve Krug 在“Don’t make me think”一书中时常将网站比喻成商场。比如网站的导航和search。这就像是人们进t到商场，会在入口，电梯处发现导购台和导航牌。所以网站上这2个板块要固定在显而易见和被大家熟知的位置也就是顶部。而关于下拉出现搜索，是一个优秀的根据用户心智模型而创造培养的更佳的操作显示方式。

那么很简单，在这个时候你的产品越能接近大多数用户的心理模型，就越能使用户达到越高的可预见性，就能创造更好的用户体验。

那么问题来了～

二、用户的心智模型是什么样的

最直接的第一手资料来源于用户调研和客户调研。然而除此之外我们也有很多研究和理论能够描摹一些基本的比较通用的用户心智模型的概貌。

第一个要素：符合逻辑

就像被誉为可用性第一定律一样：别让我思考。符合逻辑，也就是尽量让人不言而喻，不要让他人思考，不要让他们问出那个神奇的词语：为什么

比如说：

为什么这里不让我修改用户名或者头像呢（便捷性）

为什么要到设置的地址管理里才能添加地址呢（分类）

为什么我按下这个按钮却没有被点亮呢（响应性）

为什么订单成功不给我发确认信息呢（响应性）…

和表单相关，为什么我填写完一个项目不能自动开始下一项呢(便捷性)…

等等，当用户这么问的时候，就是他们在操作的时候感到烦恼了，如果设计师带着这种思维去设计，就能创造更流畅的体验了。

下面是例子例子例子，关于地址管理和确认信息的

以上是关于［地址管理］设计的例子，淘宝vs京东vs天猫－（主要评测点是分类逻辑性和便捷性）－天猫胜

以下是关于付款刷码的设计的例子，微信支付vs支付宝－（主要评测点是响应性）－支付宝胜

第二个要素：一致性

一致性可以使用户容易对事物有预估。

苹果66号员工Bruce Tognazzini

“当事物表现不同时，应该保持视觉上的不一致；而当事物表现相同时，应该保持视觉上的一致性”

（这句话也很好的是对格式塔原则的补充说明，属性及功能作用对于分类是很重要的）

在实际设计中，我们尽量要遵守这样几个原则：

一个按钮，一个功能（不会混淆）；

一个图标，一个功能（比如金融和钱包很像；意见反馈图标很像编辑）；

一个对象，一个行为操（比如保存Crtl＋S，英文如此，中文如此，丹麦文如此；而斜体Crtl＋I，英文如此，中文如此，丹麦文却是插入超链接；如此不一致令人困惑）

所以，在设计的时候，我们需要检查设计中是否存在看起来相同，但实际操作不同的东西；或者存在看起来不同，但操作相同的东西；是否有为了创新牺牲对象或功能的一致性；

三、可预见性

与一致性不同，可预见性是这用户希望它做的事情或者功能和你设计的实际功能无限接近。

提高可预见性的方法：

1、让人们知道在到达目的地前该期待什么－title，说明等

2、让人们知道你对他们的预期－比如错误提示

3、让人们知道一个多级流程中有多少步骤－比如完成进度点，让人们知道有多少步骤

4、确保人们理解他们所处流程的预期结果－比如对流程了解的和自己所处的过程

5、将东西放在人们期待看到它们的地方－比如找回密码，弹窗X的设计，要符合操作习惯

第二部分：格式塔原则

何为格式塔

这是20世纪，一个德国奥地利心理学家创立了一套视觉感知的理论：德文“Gestalt”。即格式塔。

格式塔的理论很多，深刻影响着界面设计准则，其中主要有：

接近性原理、相似性原理、连续性原理、封闭性原理、对称性原理、主体与背景原理和共同命运原理。

接近性原理：距离近的被认为是一组（长表单中给不同类信息分组）

相似性原理：看起来像的被认为是一组（通话记录中打入打出电话icon的不同及统一，颜色的统一）

连续性原理：视觉为自动为缺失补全（码表，滑条的设计）

封闭性原理：视觉不全封闭的缺口已经认为封闭或几乎封闭的区域内容是一组（比如对话聊天界面，每个人的话相对封闭）

共同命运原理：相同方式运动的被分为一组（比如滑动一个板块向上移动，其他板块不动）

举个例子：要求用户填写手机号；银行卡号；身份证号等长数字，注意填写的时候分段（接近性原理&人们的记忆区间）－容易阅读和记忆，也容易检查输入是否正确

第三部分：用户心理

1、人们记忆规则。关于人们对于目前操作的易忘性，所以尽量不要出现小标题在填框内的情况，人们往往会忘记自己要填写的内容，如果这时填写的内容消失的话，是非常不友好的体验。

2、设置密码要容错。很多时候我们知道用户不喜欢反复填写设置密码，但是如果在设置密码的时候只有一次设置却又无法确定自己的输入是否正确，这个时候，参考用户使用环境，基于手机输入相对电脑输入更加私密性的特点，可以考虑密码外显，不必以原点显示，如果密码重要级别较高，则可以使用眼睛icon，用户自行点开检查；如果密码私密而且重要级别高，实在无法绕过2次输入，就要注意2次输入的流程和设计要简约易用，不要有可点区域过小，键盘不会自动弹出收回或者遮挡输入框等各种不良体验的问题。

3、列表视觉流。title在左边，输入框在右边的形式，读者的视觉走Z字型；title在上面，输入框在下面，读者的视觉走1字型。很容易看出后者更加利于用户扫视的阅读特点。所以，在表单不是太多太长的情况下，不妨选择1字型的方式。当然在一个页面中，既有横向排版又有竖向排版的，是一定不要出现了，这种设计既不利于阅读，也容易在填写表单时漏掉，造成可用性问题了。

4、设置默认值。研究表明，当人们对选项没有明显偏好时，通常会在一系列选项中选择默认选项。根据此心理，有2个使用方式：第一，将默认选项设为人们最常选的选项，如此可以使用户感到更便捷；第二，将默认选项设为你想要用户选的选项，如此可在某种程度上迎合你的目的。不设置默认选项，或者默认选项是无，是没有这些好处的。

5、键盘友好型。输入框的内容属性，尽量和给出的键盘一致。很好理解，输出纯数字请给出数字键盘，不要让用户在全键盘上努力点数字或者寻找数字键盘入口。同样，邮箱有自带“.com”的邮箱键盘等等。日期的输入最好使用选择代替文本输入，也就是我们常见的滚轮选择。