空状态在用户引导过程中的作用

本文为我的原创译文，原文作者：Nick Babich

原文地址：https://www.smashingmagazine.com/2017/02/user-onboarding-empty-states-mobile-apps/#comments

用户是根据打开APP后首先看到的几个页面来建立对这个产品的期望。为了避免他们在用过一次后，就把你的APP删掉，你应该告诉他们如何去完成关键任务，激励他们以后再次使用。也就是说，你需要在用户最初与产品互动时，就成功引导并吸引他们。

引导过程（onboarding process）是让用户成功使用产品的关键。毕竟，第一印象相当重要。在此文中，我们将会介绍如何运用“空状态”的来引导用户。

什么是空状态？

对大多数APP来说，不管是新闻订阅、任务管理，或系统监控等等，内容都是它们的核心价值。因此如何设计“空状态”——在用户初次使用时，还没有生成内容或数据的页面——就尤为重要。

默认状态为空白，需要用户通过一步或几步操作来生成数据的页面，非常适合作为引导页面。除了让用户知道这里将会有什么内容，空状态还能向用户介绍如何使用这个APP。即使引导过程只有一步，适当的提示仍然能让用户确信他们的操作是正确的。

Expensify 的空状态向用户介绍了应当如何开始操作

空状态在引导过程中的价值

空状态是紧密结合的引导过程的一部分，你可以利用它来指导和吸引用户，让用户通过操作来产生内容。

教育用户

首先，空状态应该帮助用户理解上下文。通常，用户知道了即将发生什么，才会觉得舒服。最好的方式是“展示或告知”：向用户展示有了内容后的页面是什么样的，或用清晰的文字说明来告知他们。

引导操作

大多数空状态会告诉用户它们是什么，为什么存在。但是，有效的空状态会更进一步引导用户：接下来能做什么。教育用户是很重要的，但好的空状态要能够成功引导用户行动。将空状态看作一个起始点，并利用它来激发用户的操作。

创造愉悦的用户体验

你的APP不仅要实用（能为用户解决某个问题）、好用（容易学习和使用），也应该令人愉悦。空状态是与用户建立良好关系，并让他们了解你的APP个性的绝佳机会。

如何设计一个好的空状态

虽然空状态能够吸引用户，但在设计和开发过程中，它却往往被忽略。因为我们通常习惯于设计一个内容充分的页面，一切都被安排的井然有序。然而，当用户还没有完成必要的操作来产生内容时，我们该如何设计界面？空状态恰恰是一个体现创意和可用性的好机会。

避免让用户陷入死胡同

对一个空状态页面来说，最糟糕的设计是让用户陷入了死胡同。这会给用户带来困惑，并增加不必要的点击。比较一下Modspot的这两张图片：第一张是Modspot目前的空状态页面，设计的很巧妙，能引导新手用户进行下一步的操作，让使用体验更流畅。

第二张图是我针对同一个页面所设计的假版本，来说明如果缺乏有效引导，空状态页面会让用户陷入死胡同，无从知道接下来该做什么。

保持空状态的简洁

美观的空状态通常是简洁的。你应该运用极简主义的设计方法，凸显最重要的内容，尽可能减少额外的干扰。你需要精心编写文字，让它一目了然，并配上简明精美的图形。

Dropbox  for iOS

让空状态直观易懂

但是别忘了，空状态可不只是好看就行了。它要能帮助用户理解上下文。即便它只是一个暂时的引导步骤，设计师也应该最大化它的沟通价值，引导用户进一步的操作。

让我们来看看Google Photos的空状态页面。视觉上，它看起来很棒：布局得体，图形美观。也提供了引导，告诉用户如何创建“Collection”。

Google Photos  for iOS

张扬产品个性

想给用户留下好的第一印象，光有可用性是不够的，产品个性也很重要。它能让你的APP带来愉悦的体验，令人难忘。如果你的空状态不同于竞争产品，你的用户就会注意到，并期待你整体的产品体验也独树一帜。下图显示了Khaylo Workout如何利用空状态来展现个性，图形和文字的语气都很特别。

Khaylo Workout for iOS

鼓励用户操作

在空状态页面，你的首要目标是说服用户尽快去做些什么，来消除空状态。这不仅需要告诉用户利用APP会得到什么好处，也要引导用户去完成相应的操作。

来看看Facebook Messenger的安装页面。当用户进入这一页时，会看到鼓励的文字——既介绍了Messenger的优点（可以用来拍照或录像），也显示了用户有多少Facebook好友正在使用它。“Install”按钮则将用户顺理成章地引导到了下一步。

Facebook for iOS

可能的话，提供个性化的内容

当你将APP变的个性化时，你能更快地向用户展示它的价值。个性化的主要目的是APP主动展示满足特定用户需求或兴趣的内容。它根据所掌握的用户信息，来调整内容，给出个性化的空状态页面。

可以提供启动内容，让用户能立即开始浏览你的APP。比如，一个阅读APP可以基于用户信息，为他推荐几本可能感兴趣的书。

Material Design

在用户界面中融入情感

空状态能展示你业务或产品人性化的一面。正面的情感刺激能激发用户参与。至于空状态传递哪种情绪，取悦于你产品的目的。下图Google Hangouts的空状态，就展现了情感化的一面，能激励用户在Hangouts上获得邀请。

Google Hangouts  for Android

当然，像这样去展示情感是有一定风险的——有些用户可能理解不了，甚至会厌恶。不过也没什么，用户能对你的设计产生情绪反应，总比显得无动于衷要好。

展示成功状态

当新手用户完成了一个重要任务，是你在用户与产品间建立积极情感联结的好机会。承认用户的进步，并向他们的成功表示祝贺，能让用户知道他们做的很好。

成功状态是庆祝用户顺利完成任务，并提示他们进行进一步操作的绝佳机会。例如，对Writeupp的用户来说，完成任务列表显然是一项成就。此时，APP给出祝贺语：“干的好！”，就是一种正强化。这样的成功状态能让用户觉得开心，而给出接下来的操作提示，则能让用户继续使用这个产品。

WriteUpp  for iOS

进一步探索

下面是更多学习资源，感兴趣的话可以去看看：

· Useronboard上有很多引导体验的案例和详细解读

· Uxarchive也是一个非常好的网站，包含了许多热门APP的引导页面

· Ui-patterns收集了许多Web-APP的用户引导界面

· Emptystat.es是用户提交的各种空状态页面合集

总结

空状态绝不应该是空空如也。不要让用户在初次打开一个APP时，面对一个空白的界面。好好去设计空状态，因为它并不是用户体验中一个暂时或微不足道的部分。事实上，它和其他部分一样重要，在驱动用户参与，带给用户愉悦上扮演了重要角色。