以前的表单经典原则是“越短越好”，不过随着技术发展，现在有些表单设计已经不适用了，想学到最新的表单设计方法，别错过这篇!
每天我们都使用表单进行基本的网上操作。网上购物、注册邮箱、社交网络甚至参与讨论、描述美味的午餐等等都需要我们填好表单。不夸张地说，表单是数字信息分享的生命根基。然而多年以来，表单的体验鲜有提升，仅仅停留在功能足够好却达不到体验上的优秀。然而现在，在使用恰当技术的帮助下，我们可以设计出更快、更简单、更有成效的表单体验。
在表单体验中一条经典的原则是“越短越好”。耗费用户更少的精力可以带来更高的转化率，这当然看起来符合逻辑，但是这条原则没有考虑到很多因素，比如应用场景，设计方式、表单体验的吸引力等等。
举个例子，我发现一个被引用的次数远超其它的报告，它的测试成果被多篇文章和言说提及并被当做“真理”，而可怕的是这个研究成果其实是相当有局限性的。这个报告是Imaginary Landscape(一个开源的网络开发机构)近十年前的一次实验，实验中当表单从11个字段减少到4个字段，转化率增加了160%。但这只是一个页面，一次测试，两个变量得到的实验结果，假设他们进行了多组4个字段的实验，或者做10个字段与11个字段的表单作对比，4个与5个字段表单做对比，也会令实验更加值得信服。然而他们没有，这只能说明仅在这一个特定的情况下，确实减少表单64%的字段能使表格更容易填写。
在Call To Action 2015的演讲上,来自Unbounce 的Michael Aagaard分享了类似的案例。以提高一个特定表单的商业转化率作为任务，他首先将表单的字段数从9削减到6，转化率下降了14%。深入研究后他发现，表单中那些被删除的字段构成了一个不太引人注目的体验，而这恰恰是最吸引用户的部分。在第二次实验，他调整了原始表单的组织结构和清晰度，并保持9个字段不变，转化率增加了19%。事实证明，短的表单不总是更好。
所以如果不是通过简单的使表单更短，我们怎样用现代技术来设计最好的表单呢?让我们来考虑一些新原则：
很早之前Jakob Nielsen的研究告诉我们，用户通常只是快速浏览网页而不是细致地从上到下阅读。在填写表单的时候也是这样，尽管设计者希望填写者全心全意，用户也未必如你所愿。让用户能够高效的浏览表单，对避免错填漏填至关重要，尤其是当表单是用户只能填写一次的时候(比如电子商务地址表单，注册表单等等)。
关于标签的位置已经有了很多研究，然而这场辩论还在继续。表单大师Luke Wroblewski在研究中确定，用户对标签顶部对齐的表单完成时间最短，因为此种方式减少了眼球运动的需要量。在通常意义的表单标签中，右对齐的方式能让用户第二快的完成表单，尤其建议在当页面高度有限时使用这种方式。虽然左对齐标签的表单用户完成的最慢，但是当表单需填写的数据不太常见时，这种方式能提高理解。
如果将标签作为框内提示文字，帮助性也不大。一旦表单获取点击焦点，提示文字就消失了，用户不再能看见它。这会让用户产生短期记忆的压力而增加错误的机率。
即使把标签分开，另外增加框内提示文字，用户乍一看上去也会觉得像已经填写了的样子。举个例子，Nielsen Norman Group曾做过的一项眼球追踪研究就说明，空的输入框比有提示文字的输入框更能引起用户的关注，而且与空的输入框相比，用户更容易忽略有提示文字的输入框。换句话说，被认为是有用的表单提示文本其实弊大于利，尤其是对习惯大致浏览的用户。
在某些情况下，提示文字比普通文本的颜色较轻，这可能缓解上述问题。然而这种技术产生了一个对比度的问题，在白色背景下配浅灰色文本通常不符合被普遍接受的网络可访问性指南(正常文本对比4.5:1)。此外，根据W3C，提示文字也不支持残疾人的辅助设计(如屏幕阅读器，见，这使得这些残疾人用户更难准确填写表单。
浮动标签是一个迅速获得普及的新的交互设计方式。在它的设计中，标签文字开始作为提示文字，然后一旦用户开始填写，标签将升到上面，解决了上述提示文字消失的问题。
虽然这种方式还可以帮助减少页面长度，在移动端特别有帮助。但是它不能解决上述文本框看上去已经被填补的问题。因此，Nielsen Norman Group不建议这种做法，还是应该保持标签在上面，除非页面长度是最重要的设计关注点。
以前，在填写表格时用户有很多的猜测。“我的电话号码应该是哪种格式?我的信用卡有没有少输一位?这个键盘上的符号“@”在哪里?” 新技术使我们能够不让用户被这些疑虑困扰，提供更清爽的体验。
帮助用户格式化输入文本的输入掩码，虽然在外观上与提示文字类似，其实有明显的不同。首先，掩码只出现在用户点击输入框的时候，避免了上述浏览障碍的问题。其次，输入的文字自动应用正确的文本格式，让用户将填充字段时的焦点放在所需的数据上，这样更容易注意到错误。在下面的例子中，填写电话号码时括号和破折号自动填充。
举个例子，对于最常用的“数字”类型属性的输入框，常常不会触发数字小键盘，触发的是普通的带有数字区域的键盘，数字键的大小远小于小键盘。
对于只包括数字的字段，比如日期，邮编，信用卡等等。使用数字小键盘可以有更大的点击目标，从而使用户用更小的精力输入。(为了使其展示，前端中可用“tel”作为type值或者添加属性“pattern=[0-9]* ”。)然而，为数字状态设置全键盘，对如街道地址等以数字作为开始的混合字段依然有用。
如今越来越多的人用小屏的移动设备，我们需要考虑到小屏的使用场景，避免用户不必要的输入，在提高用户满意度的同时还可以减少错误率。
在网上注册表单中地址的填写常常是最麻烦的，因为包括多个字段，长长的地址名。通过把长地址拆解为单个字段，不仅有助于让用户聚焦在输入上(是的他们总是会频繁切换页面)，也削减了大量的输入。
在下面的例子中输入谷歌总部的地址(街道，城市，州，邮编，国家)，完整的输入过程只需键入10个字母，而如果不用自动填充的话，用户需要手动输入50多次。
上面使用谷歌API的解决办法可以在大多数情况下表现良好，但是对于输入标志性建筑和公寓号的适用性有限，因为这些也许不包括在API提供的反馈之中。
而ThinkGeek的方法，由软件即服务(SaaS)供应商提供，称为PCA预测，初始搜索时允许输入公寓号码，输入后将地址正确的格式化。
另一种减少输入的方法就是在邮件地址字段中提供一个常见邮箱域名的列表。列表在用户输入了“@”按钮时出现，主要就是使用了一个预填充的解决方案，这样每次输入邮件地址最多可以节省12次按键。
虽然调用定位数据常用在移动应用程序中，但是我们不能忘记在所有的平板电脑和台式机上也可以使用。特别是当在触摸屏上打字很麻烦时，基于位置的信息预填充可以节省用户宝贵的时间并提高转化率。
诺德斯特龙百货网站的产品详情页就是这种技术的一个很好的例子，产品利用定位完全跳过了表单填写。页面调用定位信息，并在最接近的商店自动查找项目的库存，而不是要求用户输入邮政编码来获取地址。这样不仅仅节省了用户的时间，还可以让用户直接看到“最近店面地址”这个有用的信息。
虽然由于精度问题，预填充一个完整的地址可能是有困难的。通过谷歌的Places API，可以同时使用地理位置信息和地址预填充两种方式以达到最好的效果，根据用户的实时位置给出更为精确的位置填写参考。
提供更易填写的表单格式，为每个输入条目的类型设计输入掩码，并使用适当的键盘(以及其他HTML属性)。
网站在前期的时候都是很难上排名的吗，那么是因为你的网站基础优化都没做好，怎么可能会有排名呢，首页说到了基础的优化那就要从根本的地方说起。前期就是先把网站的设计和网...
随着情人节的结束，2月份的设计圈干货大合集悄然更新。新的工具新的资源，依然是以往的分量，依然是相同的味道。和过去的合集相似，免费的素材、工具、服务占据了列表中9成的...
每个网站都是由不同功能不同类型的页面构成的，当用户打开错误链接的时候，网站的404页面就派上用场了。一个可靠的404页面在告知用户他们走错地方的同时，还应当引导用户继续浏...
今天来给大家讲讲如何用Axure实现上下滚动效果。 如何实现上下滚动效果： 让内容在显示区域滚动; 内容面板没有接触到顶部时，让内容面板移动至顶部; 内容面板接触到顶部，没有接...
你还在加班为每一个小功能的实现自己“码码码”吗?今天想早点下班的你，快来看看我最新发现的工具包吧!有了他们，这些功能你只需要直接用，或者用一点时间把他们优化的比作者创造时更...
在做表单设计时，究竟该选用哪种控件，只要是根据情况而定的，无论哪种选择都有其优缺点，这就要结合选项数目、空间大小等因素，选择一种形式，可以最大程度的方便用户使用。...
表单对于业务成功至关重要，体验糟糕的表单会直接导致转换率降低，客户会被遗弃。而且这也是用户最为挣扎的地方。那么设计师在这种情况下如何帮助用户呢？如何设计一个非常好...
原研哉在《设计中的设计》中说：设计的实质在于发现一个很多人都遇到的问题然后试着去解决的过程。如果说解决问题是设计的核心价值，那么我们可以将解决问题分解成问题是什么...
大家都说后台产品难做、要求高，这是有原因的。而且这个原因会超出我们的认知，一起来看看吧。 什么是后台产品 后台产品也被我们称为后台管理系统、内部管理系统。简单而言，...
在表单中使用下拉菜单看起来并不重要：它们在用户界面上占用的空间不大，它们自动验证输入，所有浏览器和平台都可以支持它们，它们实现起来容易且方便，用户知道它们的好。...