A-A+

创建最佳的移动设计的小提示

2017年05月20日经验杂谈已关闭评论阅读 1,347 次

好的设计解决了这两个问题：它明确关注用户的主要目标，并通过界面清晰度消除用户的所有障碍。

好的用户体验是将成功的应用程序与不成功的区分开。根据用户体验设计的好坏，用户每天都有得到和损失。设计移动应用程序时要注意最重要是确保它既直观又实用。显而易见，如果应用程序不实用，就会对用户没有实际价值，任何人都不会有任何理由去使用它。即使应用程序实用但需要付出很多努力，所以人们就不用去学习如何使用它了。

好的设计解决了这两个问题：它明确关注用户的主要目标，并通过界面清晰度消除用户的所有障碍。在本文中，我将分享七个用户体验设计的小提示，我认为这是创建一个好的移动用户体验的关键。

1、清晰无漏洞的用户流程

减少用户的努力来获得他们想要的东西。

用户通常必须在移动应用中快速完成一个核心功能：付款，检查新消息等。关注用户的主要目标，并从中删除所有障碍：

将大任务分解成小且有意义的任务：将屏幕上的操作设置为优先级。突出显示核心操作(与用户目标直接相关)，并隐藏所有辅助操作。卸载任务：了解设计中需要用户努力的任何内容(例如，阅读文本，输入数据，作出决定)，并寻找替代方案。你可以显示图片而不是文字，还是重复使用以前输入的数据，而不是要求用户输入更多内容，或者使用已有的信息来设置智能默认值?设计中断：无论您在设计什么，随身携带移动设备。允许用户稍后保存状态并重新接触应用。不要中断：通过要求用户对最近下载的应用进行评分，可以避免中断用户。相反，等到证明他们是重复使用者，他们将更有可能对你的应用进行评分，并提供更明智的反馈。专注于用户目标

将复杂的任务分解成较小的活动。这些较小的任务可能会更好地满足用户目标。拿Lyft.来说，该应用不会覆盖用户很多信息：它会根据地理位置的数据自动检测用户的位置，用户只需选择一个拾取位置即可。

避免登录墙

登录墙是要求用户登录或注册以继续进行的页面。当应用程序首次启动或首次访问网页时，通常会显示登录墙。请记住，过早的强制注册可能导致超过85%的用户放弃产品。

在下面的示例中，Soundcloud要求用户登录才能访问应用的内容。

用于Android的SoundCloud应用程序要求用户在首次启动时要创建或登录帐户。没有其他的途径。

商店结帐时经常遇到登录墙。电商网站和应用程序的设计师认为，通过登录，用户将能够利用以前保存的帐户信息，因此不需要输入其邮寄地址和信用卡号码等信息。即使Amazon也有这个问题——不提供客人结帐选项的服务。

亚马逊强制用户在退出之前注册或登录。

注册选项可能会被客户结帐选项安全地替换。在用户通过结帐时缓慢收集数据，购买后要求输入优惠券代码的密码，如“Smashing Magazine”。

Smashing Magazine的结帐表。

避免信息超载

“信息超载”一词由Hunter College政治学教授伯特兰·毛特(Bertram Gross)在1964年“The Managing of Organizations”工作中创造出来。信息超载的总定义如下：

当系统的输入量超过其处理能力时，会发生信息过载的现象。决策者的认知处理能力相当有限。因此，当信息发生超载的情况时，决策的质量也会降低。

信息超载是一个很严重的问题，阻止用户做出决定或采取行动，因为他们认为他们有太多的消费信息。有一些简单的方法来最大程度地减少信息超载。一种常见的技巧是分解。结帐表是一个很好的例子。经验法则是一次显示最多五到七个输入字段，并将结帐分解成页面，必要时逐渐公开字段。

分解使表单看起来更少，特别是当你从用户那请求大量信息时。(图片：Murat Mutlu)

2、隐形用户界面

使内容成为界面。

内容在大多数应用程序中提供价值。无论它是一个是社交源，新闻更新，待办事项列表还是一些技术，如系统仪表板，内容就是人们在这里的原因!这就是为什么关注内容并删除不支持用户任务的不必要的元素。考虑到他们的注意力减少，应该将用户快速引导到他们要找的内容。内容就是界面。

地图

Google地图是一个很好的例子。为了重新设计，Google删除了所有不必要的面板和按钮，称该地图为界面。

卡片

可以用作界面的另一种模式是card-style design。卡片是显示可操作内容的好方法，因为它们允许内容自然地显示出来。

卡片激励探索。(图像：Ramotion)

Swiss Air的应用程序就是一个常见方法的例子。在票价表中，每排成为折叠的手风琴，如果需要可以打开。

Flipboard是界面中卡片的另一个很好的例子。 Flipboard是一个个性化的杂志，汇总来自新闻源和社交媒体网络的内容，使你能够发现和分享故事。

每张卡片都是可消化的相关信息。

3、呼吸界面

使用空白区域引起对重要内容的关注。

白色空间(或负空间)是设计元素周围的空白区域，这通常会被忽略。虽然一些设计师认为这是浪费宝贵的空间，但它是移动设计的一个基本要素。Jan Tschichold说：

白色空间被认为是一个主动的元素，而不是被动的背景。

减少混乱

界面超载了太多的混乱信息。添加的每个按钮，图像和文本行都会使屏幕更加复杂。

桌面上的混乱很糟糕，在移动设备上是有一百倍的差。(图像：ftrain)

正如Antoine de Saint-Exupéry所言：

“当没有什么可带走的时候，完美就可以实现了。”

摆脱移动设计中不是绝对需要的东西，因为减少混乱有助于提高理解能力。一个简单的经验法则是每个屏幕都有一个主要动作。为应用程序设计的每个屏幕应该支持对使用它的人的一个真正有价值的动作。在必要时更便于学习、使用、添加或建立。

优先内容

白色空间非常有助于可读性和内容的优先级，而且还可以进行视觉布局。因此，它可以简化用户界面并改进用户体验。

遵循你设计中的“少就是多”的原则。 (图像：Material Design)

4、简化导航

导航应激励用户参与并交流你所提供的内容。

帮助用户浏览应该是每个应用程序的高优先级。移动导航必须是可发现且可访问的，并且必须占用很少的屏幕空间。但，由于小屏幕的局限性以及Chrome内容优先级的需求，使得移动设备上的导航可以访问是一个挑战。

在为移动应用设计导航系统时，请考虑一些常规的经验法则：

(1)了解你的用户

导航应适应大多数应用程序的用户需求。每个目标群体期望与你的应用程序进行某种类型的交互，因此使这些期望符合您的需求。

(2)优先导航选项

将不同的优先级(高，中，低)分配给普通用户任务。在用户界面中突出显示具有高优先级和频繁使用的路径和目的地。使用这些路径定义您的导航。

(3)使之可见

Jakob Nielsen says，认识一些东西比记住它更容易。通过操作和可见选项，最小化用户的内存负载。导航应随时可用，而不只是在我们预期用户需要的时候。

(4)利用视觉交流

Icons 和其他图形元素应帮助用户了解菜单选项。想想购物车图标;它作为签出或查看项目的标识符。用户不必考虑如何导航进行购买;这个元素会引导他们进行适当的动作。

(5)当前位置的沟通

“我在哪里”是一个根本的问题，用户需要一个答案才能有效地导航。未能指出当前位置是许多应用程序中的常见问题。想想位置指标。

(6)使其易于交互

使菜单的选项big enough to be easily tapped。太小或太靠近的项目对于移动用户来说是一个巨大的挫折来源。

(7)测量用户的参与和保留

参与是你的产品所需要的第一件事，因为这是大多数公司实际赚钱的地方。确保测量随着时间的推移，用户保留应用程序的成功。

即使是那些熟悉所有这些规则的设计师，最终还是会创建一些让人困惑、难以操作或难以找到的菜单。

导航用户界面模式是好的可用性的捷径。让我们看看一些例子

切换菜单

依靠菜单控件来简化移动界面(特别是在小屏幕上)是很诱人的。但是，隐藏这些菜单背后的应用程序的关键部分可能会损害使用。隐藏的导航降低了参与度，减缓探索和迷惑人。

虽然与切换菜单(右)的界面看起来比具有分段控件的界面(左)更清晰，但后者已经获得了更多的参与。图片：Luke Wroblewski)

以更明显的方式公开菜单选项增加了参与度和满意度。

标签栏

标签栏和导航栏非常适合具有相对较少导航选项的应用程序。该模式在iOS和Android上都采用。标签是伟大的，因为它们在前面通过一个简单的点击，显示所有主要的导航选项，用户可以立即从一个视图到另一个视图。对于这种类型的导航，我强烈建议使用标签进行导航选项。不要让导航像猜测游戏。

标签栏通过一次点击可以使主导航选项可用。(图像：Ramotion)

分段控制

如果只有几个目的地，可以使用分段控件。与标签栏一样，所有选项都可以立即显示，只需点击一下即可访问。

全屏导航

这可能听起来与我所说的节省屏幕空间相矛盾，但全屏导航或许是一个不错的选择。基本上，它是一个页面(通常是主页)，列出所有导航选项。虽然将无法显示任何内容，但全屏导航模式对于简单性和连贯性很有好处。一旦用户决定要去哪里，那么你可以将整个屏幕空间用于内容。这种类型的导航在基于任务的网站和应用程序中运行良好，用户正在专注于完成非常具体的任务(例如，检查航班或更改手机上的设置)，或者在一个会话期间将其限于一个分支(例如，如果他们在一个特定的服务或产品中被隐藏)的导航层次结构。

Cookly使用全屏菜单，图片设置正确的心情，并刺激用户与应用程序互动。(图片：Patrick Wong)

当你使用层次结构树导航时，这种类型的导航是很好的——例如，当你的菜单具有包含七个主要选项时，每个选项包含子类别层。

图片：Dennis Kardys

搜索框

如果搜索是你的应用程序的主要功能，则需要在人员面前。不要隐藏它或者将其显示在屏幕的顶部，或者是具有激活搜索模式的可见参考(放大镜图标)。

如果搜索是你的应用程序的主要功能，请将其显示出来，因为它可能是让用户最快地发现路径。 (图片：Think With Google)

5、单手操作

适应你设计的大屏幕。

随着iPhone 6和6 Plus的发布，显然屏幕尺寸将会不断扩大。

以下是人们掌握手机的三种基本方法：

人们掌握手机的基本方式。 (研究：Steven Hoober)

据史蒂文·霍伯(Steven Hoober)的研究，85%的用户用一只手使用手机。以下热图显示了自2007年以来每个iPhone显示屏尺寸的拇指区域。你可以看到显示屏越大，屏幕越不易访问。

根据Scott Hurff的研究，右撇子的拇指区域

调整你的设计以改善用户体验。确保你的应用程序可以轻松地(完全)在一个大屏幕(如iPhone 6或7)上使用。

共同操作和导航的绿色区域

将顶级菜单，常用的控件和常用操作项目放在屏幕的绿色区域中，用一个拇指就可以轻松地达到。

在iOS的Pocket应用程序中，所有导航控件都在页脚中。当手机保持正常时，可以方便地到达。 (图片：Dmitry Kovalenko)

破坏操作的红区

由于你不希望用户不小心点击这些操作，请在难以达到的红色区域中放置破坏性的操作(例如删除和清除)。

Apple的Mail应用程序中的“编辑”按钮处于难以到达的区域。

6、速度的外观

不要让用户等待内容。

虽然即时响应最好，但有时你的应用程序将无法达到速度的标准准则。缓慢的响应可能是由于Internet连接不良引起的，或者操作可能需要很长时间(例如安装操作系统的更新)。尽可能地使应用程序快速响应。

屏幕架构

让人们知道，使用进度指标会有一段时间。话虽如此，虽然进度指标的意图很好，但结果可能是坏的。正如 Luke Wroblewski mentions，“进度指标的定义是要注意有人需要等待的事实。就像看时钟一样——当你做的时候，时间似乎变慢了。”进度指标有一个很好的选择：屏幕架构。这些容器本质上是页面的临时空白版本，逐渐加载信息。而不是显示一个加载指示器，使用屏幕架构来专注于实际进度，并创造对将来的预期。这意味着事情正在发生，随着信息逐渐显示在屏幕上，人们看到应用程序在等待时正在进行中。

随着内容逐渐加载，屏幕架构会填满用户界面。(图像：Tandem Seven)

Visual Distraction 视觉分散

请记住，认知作为原始速度一样重要。如果一个应用程序让用户在等待时看到有趣的东西，他们将不太注意等待本身。因此，为了确保人们在等待事情发生时不会觉得无聊，会引起分散。

创意进度指标可以减少用户对时间的看法。(图像：Creative Dash)

背景下的运作

在后台做事情，使即将发生的动作显得很快。打包到后台操作中的操作有两个好处：它们对于用户是不可见的，它们发生在用户要求它们之前。

在Instagram上传图片的过程是这个技术的一个很好的例子。该应用程序提前上传照片。一旦用户选择要分享的图片，应用程序就开始上传;当用户准备按“分享”按钮时，上传完成，用户可以立即分享他们的照片。

Instagram邀请用户在后台添加标签作为图片上传。

7. 定时推送通知

在发送消息之前先思考两次。

每天，用户都被无用的通知轰炸，干扰他们的日常活动，且令人厌烦，讨厌的通知是人们卸载移动应用程序的首要原因(依据71%的受访者)。

以下是制定以用户为中心的通知时要记住的四个原则。

移动的目标就是给每一个消息计数

发送推送通知时可能发生的最常见的错误，长期来看最具破坏性的是向用户发送比他们可以处理的更多的通知。不要用推送消息压倒用户，否则最终可能会完全删除你的应用。

不要同时推送所有通知。

推值

当用户开始使用你的应用程序时，他们不会介意收到通知，只要它们获得的值足够大于中断。不要发送推送通知，只是为了“吸引用户”。例如，Facebook通常会发送通知，邀请用户连接到随机建议的人或“在Facebook上查找更多的朋友”。这是一个当用户回到应用程序时的糟糕尝试。此外，它会中断用户不相关的警报。