每个设计师都应该遵循的 5 个移动用户体验技巧

现在有很多重点是解决移动问题，包括移动性能问题，因为用户继续坚持使用较小的设备。

通常，这些问题会在网站启动后得到解决，此时谷歌搜索控制台的移动可用性报告中开始出现错误。 虽然开发团队通常可以解决此类错误，但设计师从一开始就理解和实施移动 UX 最佳实践会更有效率。

移动速度也是搜索引擎优化的一个重要因素，因此设计师和开发人员必须考虑从动画到图像的所有内容将如何影响这些指标。

注重设计元素的间距

间距设计元素不仅仅是创造一个漂亮的视觉流; 这是为了让所有访问者（包括移动设备上的访问者）都易于使用您的网站。

Google Search Console 中一个常见的移动可用性错误是“可点击元素靠得太近”。

这给使用较小设备的访问者带来了令人沮丧的体验，他们在尝试浏览网站时无意中点击了元素。

从移动用户体验设计的角度来看，按钮和交互式或可点击元素需要足够大，并且在设计中放置得足够远。

在桌面上，访问者使用鼠标进行导航，这是一种非常精确的工具，而在移动设备上，大多数用户使用拇指。 拇指通常比您的小鼠标光标大，并且可能有点笨拙，尤其是当您尝试在步行或多任务处理时浏览网站时。

因此，您需要在按钮和元素之间设计足够的空间，以便访问者不会有令人沮丧的移动体验。

您还需要考虑可访问性以及访问者如何拿着较小的设备。 有些人可能用左手拿着手机或平板电脑，有些人用右手，或者有些人用双手。 无论如何，网站设计都需要易于浏览。

最后，访问者还使用他们的拇指在设备上滚动并浏览网页，因此您需要确保没有大的可点击元素，他们可能会在滚动时无意中点击。

确保文本和字体的可读性

除了间距之外，Google Search Console 报告中另一个常见的移动可用性错误是“文本太小而无法阅读”。 虽然开发人员可以调整字体大小的某些方面，但设计团队可以从一开始就在可读性方面实施一些 UX 最佳实践。

首先要选择一种易于阅读的字体。 请记住，用户在使用较小的设备时经常步行或执行多项任务或在户外，并且他们在尝试浏览您的网站时可能处于不理想的场景中。

根据字体大小创建视觉层次结构是帮助移动用户快速浏览和理解页面内容的另一种方法。 它还有助于移动或平板设备的标题文本可能换到下一行。 在整个页面中使用相同的字体和大小可能会导致对页面含义的混淆。

在您的设计中，您还可以增加文本行之间的行高，以提高页面的可读性。

一旦你决定了字体和大小，你还需要考虑颜色对比度。

由于访客可能在室内或室外或光线不足的情况下，因此遵循背景色和前景色之间的对比度标准非常重要。

这在可访问性和创建符合 ADA 的网站方面也发挥了作用。 根据 WCAG 2.1 标准，建议普通文本的对比度至少为 4.5:1，大文本的对比度为 3:1。

确保悬停和动画遵循最佳实践

当今大多数网页设计都包含一些微动画和交互式组件； 这是客户在重新设计过程中的常见要求。

向网站添加移动通常是设计师和开发人员之间的协作，因为动画会影响页面加载时间，如果编码不当会导致无休止的质量控制。 在设计过程中选择动画时，您还需要计划这些交互是否会在移动设备上发生。

由于性能问题，通常会在移动设备上关闭复杂的动画和视频背景，因为它们会减慢网站的加载时间，尤其是对于移动网络上的访问者。 自 2018 年以来，这种类型的更改变得越来越普遍，当时移动页面速度成为谷歌的排名因素之一。

一般来说，动画和交互应该以微妙的方式使用来支持用户体验，并且不应该分散访问者的注意力。 它也不应该是帮助访问者完成操作的基本要素。

悬停是另一种常见的设计元素，在移动设备上可能看起来不同。 在桌面上，悬停是指当访问者将鼠标悬停在对象或图像上时会更改或显示文本的对象或图像。 虽然这在大型设备上效果很好，但请记住，在移动设备上，访问者不使用鼠标，这意味着访问者必须点击才能看到悬停。

因此，如果您有一个框或图像在悬停时显示文本，则应确保消息传递对访问者的步骤并不重要。

在讨论动画时，您和您的开发团队还可以查看 Google 的网络动画最佳实践指南，以避免任何有关 Flash 或过时技术的错误。

规划弹出窗口和第三方元素的位置

关于是否在网站上使用弹出式表单以及是否在移动设备上实现它们一直存在很多争论。

避免在移动设备上弹出表单的一个论点是访问者可能更难关闭表单或消息。 自 2017 年 1 月以来，谷歌警告不要使用侵入性插页式广告来阻止访问者看到页面上的所有内容，因为它们在移动设备上尤其成问题。

您可以在与客户讨论弹出式表单时权衡所有这些元素，并决定表单设计的最佳用户体验。

在采用移动设计方法时，考虑如何将元素放置在较小的设备上会很有帮助。 例如，当访客滚动时，屏幕右侧的粘性按钮可能在桌面上可以正常工作，但这些类型的粘性元素会使移动设备上的视图空间变得更小。

虽然实时聊天和可访问性小部件等元素可能会在最后一刻添加，但在网页设计过程的早期进行规划有助于避免访问者界面混乱。

实时聊天已成为一种非常流行的工具，聊天小部件通常位于设计的右下角或左下角。 通过将这些元素包含在设计模型中来提供有关放置这些元素的建议将帮助您预见重叠项目的任何问题。

重新考虑表单设计和布局

在移动设备或较小的平板电脑上填写和提交表单对于访问者来说可能是一项烦人的任务。 这就是为什么在网站设计中考虑表单的替代选项至关重要的原因。

在创建移动菜单导航时，请考虑在标题中包含“点击通话”电话号码，以便访问者可以轻松联系到商家。

在设计网站上的所有表单时，桌面和移动设备的最佳做法是尽可能减少表单字段的数量 - 并明确指出什么是必填字段。

表单移动体验的一个技巧是设计表单标签，而不仅仅是在表单字段中使用占位符文本。 移动设备上的访问者很容易被其他通知和交互打断，因此他们可能会在表单完成过程中被打断并忘记列出的占位符文本。 提供清晰的表单标签和错误消息对于 ADA 合规性也很重要。

最后，表单在页面上的位置以及如何通过响应式布局进行调整至关重要，因为表单位置会影响转换。

结论

鉴于对移动性能的日益关注，在您设计项目时将上述一些想法付诸实践将在这些项目启动时为您节省时间和挫败感。 是否有其他有助于您的设计流程的移动 UX 技巧？ 在下面发表评论！

下一步：通过有用的在线课程建立您的网页设计技能！

移动用户体验设计只是作为专业网页设计师必须掌握的众多事情之一。 虽然并不总是有很多时间可以提高您的技能，但参加在线课程是确保您继续接受教育的好方法。

本文为网页设计师提供了一些最佳在线课程的完整列表（+他们的成本），因此您不必花费更多时间搜索所有可用选项！