哈喽，大家好。北京5PLUS学院为了帮助更多的小伙伴提高设计ui水平和设计意识，会整理一些比较细致且有实际案例的设计知识分享给大家。5PLUS是一所专业ui设计学校、ui设计 培训机构，有很多出色的ui设计师学习在这里学有所成。如果觉得好，就分享给更多人吧。

移动表单的设计、布局和功能在网站的整体用户体验中扮演着重要角色，特别是随着每天通过移动设备进行购买、创建帐户和提交请求的用户数量的增加。

所有东西在移动设备上的工作方式都不一样，所以设计师需要确保他们网站上的任何元素都是针对移动设备进行优化的。

设计不当的移动表单会使用户感到沮丧；导致用户流失并降低转化率。这意味着你必须简单地通过移动设备查看，填写和提交表单，这对你非常重要。了解移动表单设计的基本原理也很重要。

以下是一些准则，可用来改进移动表单设计；

限制表单字段的数量

长格式可能会令人生畏，因为它们需要更多的精力才能完成；所需的努力越多，用户填写表格的可能性就越小。这就是为什么重要的是要评估每个输入字段，以确定它们是否是必需的，并删除所有不必要的字段。

许多设计师熟悉“少即是多”的概念，但他们仍然提出其他问题以试图收集更多数据。你从某个领域获得的信息值得失去用户或降低转换率吗？请记住，只要用户继续使用你的产品，就可以始终以其他方式或在以后获取信息。

避免分割数据字段

最小化字段数量的一个好方法是不进行拆分。特别是对于诸如姓名，出生日期或有效期限之类的字段。通常没有真正的理由将它们分开，最好只将一个字段与清晰的格式规则配对作为占位符。

提供配套的键盘

移动设备的优点是能够为不同类型的字段提供适当的键盘。通过限制输入的类型，它简化了过程并减少了用户出错的机会。例如，当用户输入他们的联系号码时，你应该显示数字0到9小键盘。以下是与表单设计相关的7个键盘；

可能时自动填充

最小化输入字段的数量还不够。你还应该尝试减少用户输入数据的工作量。键入具有很高的交互成本–易于出错且耗时，特别是在移动设备上。作为设计人员，我们应尽可能实现自动填充或自动完成功能，以防止不必要的输入。

如果你的应用程序或网站需要SMS OTP进行验证，则此功能特别有用。不得不在应用程序之间切换以检查消息并返回以填充字段是非常烦人的；通过允许自动填充，用户可以轻松输入验证码而不会带来太多麻烦。

利用技术简化数据输入

在当今时代，移动设备包含各种技术并具有惊人的功能。设计人员需要更好地理解这些功能，以便使用它们来传输输入数据的任务。

地理位置

大多数移动设备都具有GPS功能，可以根据用户的地理位置数据预先选择用户所在的国家/地区。也可以根据用户的当前位置提供准确的建议。例如，对于乘车服务，可以使用用户的当前位置预填充“from”字段。

在由于准确性问题而导致预填充位置不正确的情况下，Grab甚至可以提供用户周围位置的列表。这允许用户轻松地重新选择他们的位置，而无需付出太多努力。

生物识别

密码的未来就是没有密码。你上次使用密码解锁手机的时间是什么时候？设计人员需要利用移动设备中的生物识别技术来允许用户使用其指纹或面部扫描进行登录。

这减少了密码恢复的需要，降低了用户放弃整个过程的可能性。

卡扫描

如果你的表格需要用户的信用卡或身份证信息，则可以通过使用移动设备的相机作为扫描仪来简化此过程；一键填写所有详细信息。重要的是允许用户编辑这些字段，因为技术并不总是完美的。

将分块用于长格式

在某些情况下，无法减少输入字段的数量。在这种情况下，重要的是在任何时候最小化可见字段的数量。这使你可以创建较短形式的感知；而不是将所有内容都显示在一个屏幕上，而这可能会令人不知所措。

一个表单越长或越复杂，用户就越不可能有动力去完成它。

拆分表单的一种好方法是通过分块。分块描述了将相关信息分组为较小单位的行为，从而使其更易于处理和理解。例如，结帐流程可以分为购物车，付款明细和发货明细。

设计手指友好的组件

当涉及移动表单时，组件的大小将极大地影响所需的工作量。微小的组件会给用户带来可怕的用户体验，因为它们很难与用户交互。就像穿针一样。通过使手指友好的组件更大且更易于交互来设计对手指友好的组件至关重要的。

大小不是唯一重要的事情。在组件之间保持足够的空白很重要，以防止用户与错误的组件进行交互。导致任何不良行为。这对于二进制选项（例如“ confirm”和“ cancel”）通常至关重要，它们通常彼此相邻。

提供反馈

与使用台式机不同，移动用户在单击或点击交互式组件时不会感到物理上的“单击”感觉。这就是为什么在用户与某个元素进行交互时提供清晰的反馈很重要，以防止他们感到迷茫和困惑。这是工作吗?，“我敲对了吗?”

这可以通过以下方式完成：

• 为字段设计焦点状态
• 实施视觉反馈
• 适当地应用成功状态或错误消息

表单看起来很容易设计，因为它是一个通用组件。它基本上只是由输入字段和确认按钮组成。但是，通过进行细微调整并遵循上述准则，你可以显着提高表单的可用性并提高移动表单的完成率

原文链接：https://uxdesign.cc/8-mobile-form-design-guidelines-51487c35814a

作者：Jeremiah Lam