辞典精译 | 改善移动用户体验的7条原则

UX Pedia Presents

本文约4374字，阅读需要11分钟

适用于移动设备的设计原则

研究主题：优化移动用户使用体验

研究对象：7条改善移动用户体验原则

本文的原作者是SimpleSite的设计团队负责人，他结合多年PC端和移动端的经验，总结了7条适用于移动设备的设计原则并提供了一些相关的案例。无论你是为Web还是为APP设计，这些原则均适用，因此希望对你有所帮助。

原则1：追求极简主义

“完美不是没有什么可以添加的，而是没有什么可以去掉的。”

——安东尼·德·圣埃克苏佩里

将所有必要的UI元素放到智能手机屏幕上，同时又不造成界面混乱和用户负担过重，这可能是一件棘手的事情，因此当空间有限的时候，追求极简主义尤为重要。在为每个屏幕上的UI元素设定优先级时，你需要保持理智。如果在界面中添加过多的信息，试图为用户提供他们想要的一切，可能会导致用户不知所措。

深入了解移动用户的需求，他们最需要完成的任务是什么?你需要为它们提供哪些基本信息和功能? 根据一条简单的经验法则，在每个屏幕争取一个主要操作。在这里，比如过滤器，合理的默认值，巧妙的排序选项，易于访问的搜索功能以及逐步公开的解决方案就派上用场了。

一旦你确定了尽可能多的优先级，你可以通过增加留白、使用简单、优雅的字体和其他视觉设计最佳实践来达到更加简约的设计。极简设计可以改善网站或应用程序的视觉体验和速度。速度是体验的一部分，加载页面或某些内容花费的时间越长，体验就越差。

你和你的用户不可能做到面面俱到，所以要优先考虑速度以及可能添加的所有功能，内容和视觉效果等。

案例一：Instapaper

Instapaper应用程序上允许用户方便地保存文章以备以后阅读，并且该应用程序的主屏幕也是围绕此目的设计的，它显示了用户已保存文章的列表。

Instapaper应用程序的主屏幕(作者截图)

在其文章列表上方有一个搜索栏，在每个顶部都有一个菜单，该应用程序甚至没有最常见的页脚菜单。此外，该应用程序采用了干净的单色设计。

案例二：Behance

Behance是另一个可以学习的精美简约APP。该设计使用了大量的留白，并且每个屏幕都有清晰的焦点。

Behance应用程序的主页和个人资料屏幕(作者截图)

原则2：将最重要的元素放在靠近底部或中心的位置

史蒂文·霍伯（Steven Hoober）在移动用户行为和最佳实践方面做了很多有趣的研究。他的研究表明，当用户用一只手拿着手机时，将最重要的UI控件放在用户拇指可以触及的地方是很重要的，尽管他也证明了用户可以通过多种不同方式握持手机。

智能手机屏幕上拇指的伸展范围(摘自Steven Hoober的报道)

他还指出，如果让移动用户选择，他们更喜欢将内容垂直居中显示在屏幕上。阅读与内容互动似乎都是这种情况。

“我进行了一项研究，使用户可以将内容移动到屏幕上自然希望的位置。一旦将内容移动到屏幕中间，他们就会点击选择它。” —史蒂文·霍伯

在必要的情况下，可以考虑将（一些）最重要的内容居中显示在屏幕上，但是不要将页脚菜单设置为居中的图标和按钮。当可以选择时，移动用户更喜欢在屏幕中间阅读内容并与之交互。

史蒂文·霍伯(Steven Hoober)的一项研究显示了测试参与者最喜欢点击的热图位置

案例一：Audible

有充分的理由证明，页脚菜单在各种不同的应用程序中都非常常见，除此之外，音频播放器还提供了一个将主控件放置在屏幕下半部分的例子，例如在播客应用、音乐播放器和有声读物应用程序中，主控件都是位于屏幕的下半部分。

Audible应用程序的播放器(作者截图)

案例二：Fitbit

可以说，Fitbit应用程序的主要功能是向用户提供信息。为了便于用户访问，这些信息集中在应用程序的主屏幕上。

Fitbit app主屏幕（作者截图)

原则3：减少文本输入

虽然从很多方面来说这都是一项令人惊叹的发明，但不可否认的是，使用触摸屏键盘进行长时间输入会很糟糕。由于按键太小，与笔记本电脑或外部键盘的机械运动相比，反馈效果较差。

与笔记本电脑或台式设备上的用户相比，你的移动用户与设计进行交互的时间通常更少，他们可能在旅途中或排队等候时想要分散片刻的注意力。

某些辅助程序可以将笔记本电脑或台式设备的优点带到移动设备中。如果你的用户在平板电脑上使用外接键盘，鼠标/或手写笔，则在这方面，他们更接近你的笔记本电脑和台式机用户。但是对于大部分用户来说，情况可能并非如此。

你的手机用户在使用你的网站或产品时，既没有意愿也没有时间输入大量文本。因此设计如下：

-自动填充任何可以自动填充的输入字段；

-当用户开始键入或输入搜索词时，提出明智的建议；

-让用户选择类别或以其他方式过滤选项；

使用日期选择器，而不是要求你的用户编写日期。

这些只是几个明显的例子，一旦你养成了问自己这个问题的习惯，可以通过减少用户输入次数来解决此任务，你也能发现更多的问题。

案例：Eventbrite

值得借鉴的是Eventbrite应用程序中的搜索功能。特别是在搜索基于时间的事件时，常规日期选择器实际上是智能默认列表中的最后一个选项：“随时”，“今天”，“明天”，“本周”和“本周末”。

Eventbrite应用程序的时间选择器(作者截图)

原则4：增加点击目标的大小

笔记本电脑或台式电脑上的光标可以让用户点击屏幕上最小的目标，但是在触摸屏上点击目标要困难的多，不仅是因为你的指尖比鼠标的光标大且准确性不高，而且在你尝试点击它时，它会覆盖目标。

根据原则2，理想情况下，点击目标的大小取决于其在屏幕上的位置。但是，最大可能性的设计点击目标是不会出错的。

请遵循Apple和Android提供的指南，后者建议点击目标分别至少选择44 x 44dp和48 x 48dp（与设备无关的像素）。最明显的实现方法是增加UI控件的大小。此外，尝试在元素周围添加一些额外的留白，不仅可以降低误点击的风险，还可以创建更简约的界面。留白还可以使每个点击目标大于控件本身，这并应用于屏幕上的所有UI控件，且对于那些不易变大的小控件尤其重要。

你可能不希望在页脚菜单中增加可点击图标的大小，或对文本链接使用32点的字号。相反，只需增加元素本身周围不可见的点击目标区域的大小即可（或告诉你的开发同事这样做），在不影响其他UI元素的情况下使其尽可能大。

如果你遵循上面的建议，那么你设计的是为了预防错误而不是错误处理。但是，你永远不可能完全消除错误提示。考虑到这一点，请确保在错过目标时不会发生灾难性事件。

案例：Meetup

Meetup应用程序是值得学习的好例子之一，在查看Meetup小组时，屏幕中间有一个显眼的大按钮，用户可以轻松触摸并点击。

meetup应用程序中的meetup小组(作者截图)

原则5：优先考虑易读性

无论设计平台是什么，易读性都是重要因素之一。在设计时应该始终遵循字体大小，行高，长格式文本的字体选择等方面的通用原则。

对于移动设备，最重要的建议是16pt的字体大小。如果使用比这个更小的字体，那么对于部分用户来说，可读性就会受到影响。不过，针对移动设备更有趣的挑战是，你的网站或应用程序可能会在户外使用。它将在路上、繁忙的街道上使用，并在阳光直射屏幕或用户眼睛的情况下使用。从可用性的角度来看，这并不是真正的“理想条件”。

如果你的目标是伟大的用户体验——而不仅仅是在一个灯火通明的房间里才能完美展示——你需要优先考虑易读性，而不是你自己的审美偏好。

案例：Medium

许多本机应用程序支持动态调整字体大小，以适应用户的设置。从设计完美的字体大小到确保你的应用程序支持动态字体，这将改变作为产品设计师的职责。如果你想从一个网站学习可读性优化设计，推荐访问Medium.com。

An article on Medium.com (author’s screenshot).

原则6：提供即时且良好的反馈

随着5G的到来，针对糟糕的移动互联网连接进行设计可能很快就不再是一个问题了。不过，在此之前，不要期望你的移动用户拥有稳定、高速的互联网连接，也不要忽视你的加载状态。任何移动用户都可能在某一时刻等待加载数据，特别是当它们使用手机连接时，“等待”是一个相对术语，我们很少用毫秒来度量，但是我们会在UX中做。

如果延迟超过300毫秒，你的用户将会注意到，如果延迟超过1000毫秒，用户可能会开始在心理上有转换。如果不能在这段时间内加载用户点击的内容，至少需要向他们展示你正在做的事情。

案例：Duolingo

提供一些反馈绝对比完全没有反馈要好，例如Duolingo，他们利用加载时间来提供一个有趣的事实，并伴随着吉祥物有趣的动画，有用且引人入胜。