设计师在移动端设计表单的历史已经超过十年。但是十年之间科技日新月异，我们对用户的理解也不再停留在小学阶段，对表单的设计也不再墨守陈规，循规蹈矩。设计师们需要探索新的方法以提供更加好的用户体验，本文介绍的这8种方式不妨一试。

为什么移动端表单的设计永远充满挑战，我想是因为以下这几点：

▪ 狭小的显示屏幕

▪ 数据输入的巨大负荷

▪ 数据连接的不稳定性

▪ 后台存储问题

▪ 不可预知的使用环境

▪ 高成本的交互

很多企业为了设计一个优秀的表单，依然花费着大量的人力和物力。eBay 每年要额外花费5亿美元，只求在移动端上设计合理的表单按钮（Jessica Enders）。所以长久以来存在的移动端表单设计的局限性不断迫使UX设计师发起革命性的创新，如何使用户高效率的输入和快速的完成任务已成为了首要目标。

尽量只做单一输入框

对于移动端，多样式的输入框是一个长期存在的痛点，尤其是需要不断转换输入模式的时候，例如需要使用键盘时。将数据没有必要的拆散增加了用户使用的挫折感，同时也提高了用户弃而不用的可能性。例如，Domino'sPizza需要用户分别填写姓和名，如图：

也许这样的设计也许符合商家的需求，但显然给用户造成了麻烦。而且，在不同文化中，这样的设计也可能引起困惑。例如在一些亚洲国家，姓和名的顺序恰好与西方人的顺序相反。又比如在缅甸大约有三千六百万移动端用户的名字只有一个字，不区分名和姓。所以为了确保不出现这样的问题，同时也是为了节省用户的时间，尽量使用单一的输入框，如图：

创造不完全“自由”的对话式表单

Justin Mifsud 在2011年提出“表单应该像一个对话，而不是审讯”。因为与工作式和非工作式场景下使用移动设备的界限已经越来越模糊，在用户和系统之间建立对话的感觉比以往更加强烈。例如Whatsapp现在不仅是聊天工具，有时也充当工作面试的工具。用户已经习惯日常与app和网页的非正式的交互方式，所以聊天式的交互将会越来越流行。例如withjack.com已经在注册过程中加入有趣的方式，如图：

这样的交互交互方式对信任度是一个考验，为了建立信任度，需要遵循一下几条建议：

▪ 帮助用户输入默认值

▪ 将深入的问题和个人问题放在表单的最后，用户更愿意在建立了足够的“交情”后才回答这一类问题一次只解决一个主题

▪ 允许双向通讯。例如，一个“联系我们”的按钮可以使用户实时沟通，同时为商务类app增信

然而，对话式并不意味着完全的自由。eBay在创造ShopBot时，产品团队发现轻微的机器语言可以提高效率。另外，用户并没有对ShopBot的能力有太多期许，所以对ShopBot提供的信息也更加认可。移动端的表单设计应该利用相同的原理。既不完全机器化语言也不完全人类语言，掌握良好的平衡可以提高信任度和转化率。（Mifsud）

自动填写预设值

在2016年AnswerLab的研究中，Google发现移动端用户的目标趋势性更强。因此，表单自动填写预设值是一个使用户快速完成任务的设计。同时，移动端设备的各种传感器可以提供准确的信息以降低用户填写表单的繁重负荷。例如，Skyscanner使用GPS实时监测位置，并且在app中自动填写当前位置，如图：

同时，在电商类应用里，利用GPS所提供的用户当前位置，可以在当前浏览的商品页面提示附近哪里有售，而不必再手动输入查找。在最近Pew Research Center的研究中，64%的用户依然更愿意在实体店购物。所以在宜家的移动端我们可以看到这样的设计，利用GPS告诉用户当前浏览的商品在最近的哪一家宜家可以购买，如图：

当然这样的预设值并不能够达到完全正确，所以通常只会自动写入100%正确的预设值，试想Skyscanner使用于宜家同样的设计，只允许用户在最近的机场预定机票。毫无疑问，这将是一个糟糕的体验，甚至会影响到商业利益。所以对于没有把握的预设值，依然需要用户手动输入，但是自动填写预设值已经大大降低了用户输入表单的负荷。

确保表单的可访问性

根据2013年Wireless Rehabilitation Engineering Research Center的研究调查，91%的残疾人会使用移动设备。先进的移动技术已经带给残疾人与这个世界沟通的机会，但是如何利用这样的科技却取决于设计的可访问性。

有视觉障碍或认知障碍的用户在使用表单的时候面临巨大的挑战。设计师应该根据已有的可访问性原则降低特殊人群的使用障碍。当然这样的原则对于正常用户也同样适用。例如，清晰直观的设计和用户逻辑。

对于有视觉或认知障碍的用户，以下这些建议将对你的设计有所帮助：

▪ 优化屏幕的窗体控件

▪ 设计高对比度的界面

▪ 启用窗体的键盘控制

▪ 支持语音输入和语音输出

Web Accessibility Initiative为移动端提供了更多的可访问性原则，这其中也包括表单设计。其中最有效的几项已经在上文中提及。

按步骤分解复杂表单

并不是每一个表单都是简单输入一两项。有很多表单需要输入繁琐的信息，例如银行信息，政府程序或在线购物应用。对于这样的复杂表单，让用户知道下一步是什么以及还需要几步可以完成表单是很重要的。Autoglass将表单流程放置于页面顶部是一个有效的设计，如图：

这样的设计不仅可以降低用户漏填的风险，同时也缓解了用户对复杂表单的恐惧感。

精简表单，只保留必要问题

在常见的移动设备使用环境中，例如在室外，在拥挤的环境，或者在嘈杂的环境里，复杂的表单会迫使用户放弃使用同时也会使错误率上升。因此只保留必要项是提高完成率的一个方式。

对于设计师，一些问题完全可以被精简，例如你是从何处知道我们，你是否会向朋友推荐我们，请提供备选邮箱等等。尽管这些问题可能对运营团队有所帮助，但是更有可能吓走用户。所以这些问题需要在移动端舍弃，但是可以保留在PC端。

即使需要对复杂表单精简，但仍需保留必要问题。来自于Unbounce的Michael Aagaard提供了一个有趣的例子， 当被要求精简复杂表单以提高完成率时，他只保留了三项问题，结果竟然发现完成率反而降低了14%。原因竟然是他删除了大量用户感兴趣的问题，却保留了一个用户反感的问题。所以精简表单并不是要保留最少的问题，而是一个合适的数量。

友好地显示错误信息

让我们从错误验证这方面来看表单设计。优秀的错误提示能帮助用户降低错误带来的挫败感，同时提升正确率。相反，平庸的的错误提示会大大降低表单的完成率。

错误提示必须是清晰的，简明的，同时应该具有解释性质，这一点同样适用于PC端。设计师Nick Babich认为优秀的错误提示具有以下特征：

▪ 实时验证

▪ 错误信息可见，并且相应提示应靠近错误项。并且指出覆盖式提示并不是好的解决方式

▪ 恰当的颜色含义，例如红色代表错误，琥珀色代表警告

根据错误类型提示错误信息，MailChimp不仅提示“密码错误”，同时还提供解决方案，如图：

通常移动端用户存在易分心或者多任务操作的现象，利用图标和插图进行交流式的错误提示可以尽可能的传递有效的信息。Azendoo在简洁的解释错误的同时还做了品牌宣传，如图：

Babich认为需要避免不明确的提示，例如“输入错误，请重试”。这一点对于移动端尤其重要，因为PC端可以更便捷的进行刷新、后退和重试。

避免使用下拉菜单和列表

冗长的下拉菜单和列表有时会给移动端表单带来很多麻烦。为了防止用户频繁滚动页面，一些移动端采用了折叠或下拉菜单和列表去展示选项，例如ASOS的设计，如图：

然而来自于Google的Luke Wroblewski将下拉菜单视为“最后的UI设计”。因为用户必须猜测下拉菜单是如何组织信息的，是字母顺序还是受欢迎程度？同时用户还需要将手指作为鼠标指针在狭小的屏幕上进行精细操作。因此下拉菜单所造成的错误率是十分高的。

为了避免这个问题，可以采用一些替代方案。例如，一组单选框可以代替5个以下选项的菜单。或者将下拉菜单中的选项分解为几个类别以提高可用性。对于很冗长的菜单，例如选择国家，可以采用自动完成框，即用户可以输入一个字符，由系统自动匹配国家。又或者日期选择，尽量使用弹框样式的日历设计来代替冗长的下拉列表。

尽管移动端的表单设计看似乏味，但是却决定了用户能否顺利完成表单输入。优秀的表单设计可以帮助用户和企业达成各自目标，平庸的表单设计可能会“尽失人心”。希望通过以上这8个建议，设计师可以创造出可用性更高，更高效的表单。

原文：www.uxmatters.com/mt/archives/2017/02/8-best-practices-for-mobile-form-design.php

---

​转载要记得标明出处哦！

也欢迎大家扫描下方二维码关注我的微信公众号Yinteraction，一起交流关于交互的问题