您可能认为，当用户按下“下订单”按钮时，整个表单设计就结束了。错了！用户需要明确的反馈，表明操作已成功。您还需要让他们知道接下来的步骤。

例如，当有人在您的网上商店下订单时，显示付款和订单成功的页面。您甚至可以提供预期的后续步骤的时间表，例如产品何时发货。

优化移动端表单设计

优化移动设备表单有两个方面。一方面，我们需要特别注意某些事情。另一方面，我们的手机有很多功能可以让填写表单变得更加容易。

在设计时多花点心思。本节将提供一些专门针对移动设备改进表单设计的简单示例。

1.提供足够大的点击区域

我喜欢在周日晚上看电视上的 NFL 比赛。球员的运动能力和接球技巧总是让我惊叹不已。他们需要大手才能接球。这些足球运动员可能是您的下一个客户。

这些家伙看起来相当强壮，所以你不会希望表单上的小点击框惹恼他们。谷歌建议最小面积为 100,000，这是一个很好的标准。

Jr. 和他的手可能会尝试使用你的应用程序

2. 不要羞于使用手机的硬件功能

大约 99% 使用手机填写表格的人都拥有功能齐全的相机。您是否曾想过利用它？

只需单击按钮，他们就可以扫描身份证或信用卡上的信息，否则填写这些信息将需要更长的时间。更进一步，考虑使用 GPS 或生物识别技术的可能性。

3. 使用与预期输入相匹配的键盘

如果您希望用户输入电子邮件地址，请激活键盘文本模式，如果他们需要输入电话号码，请显示数字键盘。

这只需要一点思考，就可以节省用户宝贵的时间，因为他们不必在键盘之间来回切换。这还可以帮助他们了解您期望的输入类型。

4. 使用本地输入

和 都投入了大量研究来设计自己的 UI 控件。大多数人都见过这些控件，因此除非您有充分的理由不这样做，否则请坚持使用本机控件。

使用正确的输入类型

这看起来很明显，但并不总是那么容易。不要让您的用户感到困惑，因为他们必须从 200 多个下拉列表中选择一个国家/地区，或者必须从下拉列表中选择“是/否”。

复选框、单选按钮、下拉菜单、短文本和长文本输入——所有东西在表单世界中都有其位置。只需确保在适当的时候使用它们即可。

5. 避免使用过长的下拉框

假期很快就过去了，但你可能已经在网上订购了一些礼物。为此，你需要选择要发货到哪个国家。那时，在 200 多个国家的滚动条中寻找路径确实很烦人。

明年当您设计表单时，最好让用户从预设列表中输入并选择他们的国家/地区。这将需要您的开发人员做一些额外的工作，但您的用户会感谢您的。

6. 使用智能即时搜索解决方案

为什么不进一步利用上一条建议呢？花点时间思考一下用户可能遇到的情况。

即使您的网站只接受“英国”作为居住国，居住在苏格兰的用户也可能会开始输入“苏格兰”。理想情况下，他们输入“苏格兰”时应该立即看到“英国”作为建议条目。

同样适用于“”而不是“”。考虑这些场景并花一些时间开发这种逻辑，以便用户不必猜测确切的措辞。

满足用户期望并显示“苏格兰”的结果，尽管标签上写的是“英国”

7. 当项目数不超过 6 个时使用单选按钮

下拉菜单不是长表单的最佳解决方案，也不是短列表的最佳解决方案。为什么每次用户想要回答是或否问题时都要点击下拉菜单？

对于 6 个或更少的项目，请使用老式的单选按钮。更好的表单用户体验，用户可以更轻松地扫描垂直布局。下拉框太多可能是表单设计最差的标志。

8. 选择合适的日期输入方法

许多表格仍然使用错误的方式输入日期（最常请求的信息之一）。你有多少次通过从默认的 1900 年滚动来选择年龄？

这些网站要么认为他们的大多数用户都在 100 岁以上如何输入下拉框选的内容，要么根本不在乎。我更倾向于后者。在移动设备上，使用默认时间选择器或使用格式化输入，就像我们在 FOX News 中的示例一样。

请注意预期的日期格式，不同国家/地区的日期格式有所不同。在数字键盘上输入 8 个数字（即使在移动设备上）比滚动 3 个下拉框要快得多。如果您坚持使用原生 iOS 或日期选择器，请确保有一个实际的默认日期，而不是 1900 年或当前年份。除非您正在为百岁老人协会的年度盛会设计应用程序。

使用格式 () 改善日期选择的用户体验

9. 将输入框长度与输入的预期长度匹配

您可能想牺牲输入字段的长度，但请记住，短字段更适合邮政编码或 CVV 代码等内容。当您希望用户输入较长的答案时，请使用较大的文本字段。有时将所有这些不同长度的输入字段放在一起并使其看起来不错可能是一个挑战。但是嘿，我们喜欢挑战！我们成为设计师，不是吗？

10.删除“确认密码”栏，增加“显示密码”选项

在手机上输入密码特别烦人，所以不要让用户输入不必要的内容。为什么要让他们确认密码？想确保他们没有输入错误吗？

在输入字段旁边放置一个小眼睛图标（或“显示密码”文本），以便用户能够看到自己是否输入了错误。越来越多的网站正在使用这样的解决方案，我认为这绝对是良好表单设计的标志。

让工作更智能，而不是让用户更智能

当您问自己如何设计表单时，要记住的第一件事是：不要偷懒！仔细正确地开发表单可以为您节省大量时间。

在设计时，请考虑一下您可以从已有的信息中猜出什么，而无需用户输入任何字符。有些解决方案肯定会比“足够好”的解决方案花费更多的开发资源，但您的用户会因此而喜欢它。

11. 当用户尝试使用收集到的电子邮件地址进行注册时，提供登录信息

如果用户尝试使用收集到的电子邮件地址进行注册，则可能意味着他们之前已经注册过。为什么不为他们提供一种快速登录方式？预先填写他们的电子邮件地址，这样他们只需输入密码即可。

12. 使用智能默认值

这一点有点笼统，但当您使用智能默认值时，您可以根据 IP 地址、设备语言甚至设备位置进行猜测。每次设计表单时，请花几分钟仔细考虑所有这些项目。

在开发我们的产品 .io 时，我们的开发人员为用户完成了繁重的工作。

13. 避免使用

可能很烦人，但我们仍会使用它们来避免数据库中出现数千个虚假账户。不过，一些更好、更不烦人的解决方案也可以达到同样的效果。在考虑使用 时，在实施最懒惰的现成想法之前，请考虑一些替代方案和一些最先进的解决方案。

14. 根据邮政编码获取地址信息

电子商务店主可能需要一个地址。您可能希望让用户输入所有内容，然后在最后输入邮政编码。或者，从国家/地区开始（因为邮政编码在世界各地并不唯一），然后自动填写州、城市，在某些情况下甚至街道信息。因此，您可能需要第三方插件。

15. 接受多种格式

电话号码就是一个很好的例子：用户不必确保电话号码以正确的格式存储。接受多种电话号码格式（包括其他信息）并自行标准化。如果您无法做到这一点，至少要提供您期望的格式的清晰示例。

16. 提交表单前显示错误

这听起来很简单，但许多表单仍然忽略了这一点。如果用户输入了错误的电子邮件地址，则在提交表单之前显示错误。

但是，请注意不要验证得太快——当你还在输入时，表单会大喊你输入了无效的电子邮件地址，这会非常烦人。“好吧，但你能等我输入完吗？谢谢！”

良好表单设计的正确布局

以下建议更为通用，因此您可以在收集用户数据时在任何情况下使用它们。与上面的一些技巧不同，它们不需要疯狂的开发魔法，只需要良好的设计。精心设计的表单总是从精心选择的布局开始。

1. 始终显示标签

近年来，使用表单标签作为占位符文本变得非常流行。在许多情况下，它效果很好，因为它确实使设计更简洁。但想象一下，一旦您的用户填写了这些输入字段，他们就不知道每个输入字段应该包含什么信息。

在某些情况下，例如电子邮件地址如何输入下拉框选的内容，这似乎很明显，但很容易混淆名字和姓氏。因此，即使您决定使用标签作为占位符，也请按照 的建议，在填写字段时让它们可见。

对显示标签的建议（设计指南）

2. 仅询问必要的信息

“营销人员让我这么做！”是的，我知道你（或我们）甚至可能会被迫询问鞋子尺码。我们掌握的信息越多，我们就越能更好地细分不同的信息，等等。

但是填写一份充满不必要信息的巨型表格不仅令人沮丧和恐惧，还会让用户产生不信任。想象一下，你刚刚在酒吧遇到一个人，简短聊了 30 秒，他们就开始问你一些个人问题。

不要要求你不需要的东西，或者至少让它成为可选项。如果你真的需要这些信息，请向用户说明你的理由，并告诉他们这将如何改善他们的体验。

渐进式分析提供了一种替代方案，您可以在用户更加关注您的产品后收集额外的数据。

3. 标记可选项目

不要使用星号标记必填字段；而是要清楚地标记可选字段。

4. 对于长表单，将输入内容分组并使用多个步骤

正确设计长表单的用户体验可能具有挑战性。无论你多么努力，有时你都必须处理非常长的表单。在这种情况下，有两件事可以帮助提高完成率。

首先，将相关字段分组在一起。一组可以是个人信息，另一组可以是地址。还可以考虑将表单分成多个步骤，这样您就不会在开始时用大量输入字段让用户不知所措。如果您这样做，请确保使用进度条来显示剩余的进度。

5. 避免使用左对齐标签

研究表明，当标签位于输入字段的左侧时，人们填写表单的速度会更慢。想象一下，当您填写表单时百度预选项是怎么来的【64xl.com做下拉框网站】，优化移动端表单设计：提供清晰反馈与大点击区域，您的眼睛不得不四处乱看。垂直堆叠所有标签会增加表单高度，因此请使用标签作为占位符，当字段填写完毕后，标签会移至顶部。就像 建议的那样。

6. 使用单列布局

表单的整体布局也是如此。如果输入字段跨越多列，用户的视线就必须来回跳跃。扫描单列要快得多。当然，当一行中有多个字段时也有例外，例如名字和姓氏。但是，一般来说，单列布局更易于使用，即使它增加了整体高度。

7. 从简单的问题开始

除了吓跑用户之外，表单还可能包含不同类型的数据，其中一些数据更为敏感或复杂。从用户觉得容易填写的常见字段开始。让他们放松，然后再填写需要更多参与的字段。

表单设计的巧妙

这样做表明您致力于改善表单的用户体验。并非每个人都这样做，这是锦上添花，让用户赞叹不已。如果您的目标是为表单设计提供最佳用户体验，请继续阅读。让我们继续吧，好吗？

1.显示和更新密码规则

这可能是我最喜欢的一个，也是我实现起来并不复杂的项目之一。许多网站对密码应包含的不同字符都有严格的规定。有些网站在工具提示中显示这些规则。这不是最佳做法。

用户在输入常用密码之前不会知道密码的强度。因此，最迟在字段获得焦点时显示标准。更好的是，在用户输入时实时更新它们。这样，他们就更容易发现他们到底遗漏了什么。

在用户输入时主动更新列表，帮助用户输入足够强的密码

2. 禁用“提交”按钮，直到用户填写完所有必填字段

当你尝试提交表单时，却发现你没有填写所有必填字段，这真是令人沮丧。如果你正确标记必填字段和可选字段，你或许可以避免这种情况。

禁用“提交”按钮（您不会将其标记为“提交”，对吗？）直到他们填写完所有内容是将焦点转移到表单其余部分的另一种方法。

3. 拥抱包容性

如果您的业务包括在线表格，那么您的客户很可能非常多样化。您不想让任何人感到被忽视，对吧？我们可以就这个话题写一整篇文章，所以让我给你一些快速提示。首先，不要验证姓名——如果您的名字无效，您会有什么感觉？

性别是另一个敏感话题。公司里至少会有一个人可能会说，这些信息对于准确定位客户是绝对必要的。但这是真的吗？

越来越多的应用和产品不再询问。所以，第一条建议：不要询问。如果要询问，请将其设置为可选。对于后者，请为非男性或女性的用户提供一个选项。您可以轻松使用“其他”选项（尽管该标签也可能令人反感）。

更进一步，您可以添加类似的自定义输入框。最后但同样重要的是，不要忘记可访问性。确保用户可以使用键盘浏览表单，并找到足够大且对比度足够的标签。

4. 当 Caps Lock 处于开启状态时向用户发出警告

我非常喜欢这个功能。为什么不在你的表单上也使用它呢？输入密码时，我们有时会不小心按到大写键。我们所有人都会遇到这种情况。为什么不提前警告用户并为他们节省几秒钟的时间呢？

使用有趣的图片提示阻止登录 Caps Lock

原作者|