如何在新用户引导流程中用好空状态界面？

当新用户打开你的APP的时候，最初的几个界面将会直接影响用户对你的网站的预期。为了确保用户不会在第一次打开之后就卸载APP，你应该用好最初的空状态页面，通过引导，帮助用户完成关键性任务，获得成就感，达成目标，并不断回来，成为你的APP的回头客。换句话说，要在第一次交互之后，成功吸引用户，让他们流连忘返。

新用户引导流程是这当中的关键。创造第一印象，你只有一次机会。今天的文章，我们将会提供一些使用空状态来优化新用户引导的策略和技巧。

什么是空状态

对于许多APP而言，内容是它的核心价值。无论是新闻类APP，还是效率类应用，均是如此，因为对于用户而言，绝大多数时候是为了内容而使用引用。这样一来，一开始使用的时候所面对的空状态界面，就显得至关重要了：当用户还没有看到内容也没有内容填充APP的时候，它将如何引导用户完成从无到有的过程？

对于默认为空的状态，或者仅仅只有基本默认设定的设置界面，也非常适合引导新用户熟悉产品。除了给用户对内容的期待之外，空状态界面还适合教用户使用APP。即使新用户引导流程在这里被压缩到一个步骤，它也能够称职地引导用户做正确的事情。

在 Expensify 这个APP当中，空状态教会用户如何起步，让他们安全地使用产品。

引导流程中空状态的价值

作为用户首次使用所打开的界面，空状态界面对于用户熟悉产品有这毋庸置疑的价值。你应该利用这个机会尽可能地吸引用户，教育用户。

教育用户

首先，空状态界面应该帮助用户了解上下文情况，让用户熟悉当前的状况，为什么会发生这样的情况，安抚用户的情绪。此时应该这样展现信息：向用户展示界面有内容时候的样子，或者向他们告知此时应该如何操作来获取内容。

提供行动指示

绝大多数空状态界面会告诉你，为什么会遭遇这样的情况。但是真正有效的空状态，会告诉你下一步要做什么。教育你的用户很重要，但是在用户最初遭遇空状态的时候，你要驱动他们前进，前进了才是初步的成功。空状态界面就是最佳的起点，你可以通过设计来鼓励用户前进。

创造愉悦的体验

虽然绝大多数的APP都是功能性的（解决具体问题），也是可用的（易于学习，易于使用），同时它也应该是令人愉悦的。空状态是你的APP同用户构建起情感联系、塑造个性的绝佳机会。

如何设计绝佳的空状态

空状态能够吸引用户，但是在产品和UI设计的过程中，常常会忽略它的这一属性，甚至会忽略对空状态的设计。因为在绝大多数时候，我们所设计的都是填充好内容的界面，布局都被精心挑选的内容塞满了。但是，当内容还未来得及加入界面的时候，我们要如何展现界面呢？空状态界面，其实是展现创造力和可用性的优秀舞台。

避免走入死胡同

当用户进入空界面之后，发现整个交互和操作都走入了死胡同，不管怎么操作都无法改变现状，这才是最糟糕的局面。且不说陷入这样的僵局给用户带来的混乱感和无效的多余操作，它本身的不可用让用户对APP所产生的失望情绪，才是最致命的。

看看 Modspot 两个界面设计案例吧。第一个界面是用户首次使用的空状态页面，巧妙的借助这个界面来引导用户发布作品：

而第二个界面则是忽略空状态界面设计时候的样子，没有演示，没有引导，也没有说明，对于不会主动尝试的用户而言，这就是个死胡同。

让空状态界面视觉上简单清晰

空状态本身内容并不多，即使加上说明和指引，也应该足够简单。将最重要的引导和说明突出展示，减少无关内容，降低干扰。简而言之，需要将清晰直观的文案，和强引导性的视觉设计结合起来。下面iOS版 Dropbox 的离线文件空状态界面，就非常值得学习，简单清晰的文本加上有趣的插画，让用户瞬间明白了这个功能如何使用。

让空状态具备直觉性

当然，空状态页面要漂亮，但是它不仅仅要具备视觉美，它还需要恰到好处地让用户明白上下文场景。即使它只是新用户引导的一个环节，你也要让它的信息传达价值最大化，比如告诉用户如何让界面状态从空变为非空。

下面以Google Photos 这个应用为例简单说明一下。作为Google的产品，它在视觉上做的相当棒，精美的布局和漂亮的图形都非常不错。然而，它的空状态并不足以帮助用户了解上下文背景，也没有回答下面的问题：

·合集（Collection）是什么？
·我如何能获得一个合集？

空状态界面不应该为用户创造更多的问题，而是要尽量解决问题。告诉用户当前界面是什么，以及要如何获得更多。

强化个性

个性化的设计让你的APP更加令人难忘。虽然在空状态界面中能呈现出的“个性”看起来并不多，但是即使是微小的个性化设计，都能让你的界面看起来和同类产品截然不同，它会让用户从这里开始体会到你的产品的不同之处。你可以看看Khaylo Workout 是如何在空状态界面中借助文案和插画来体现个性的。

拳击手套插画和Challenge 这个主题相互映衬，文案着重引导用户创建新的Challenge ，强化交互。

鼓励用户操作

你的首要目的是说服用户做点什么。在空状态界面中引导用户交互，不仅仅是告诉他们如何操作，还需要告诉他们这么做有什么好处。

来看看 Facebook Massenger 的空状态页面吧，当用户抵达这一页面的时候，页面中萌翻的吉祥物会鼓励用户使用 Messenger 拍摄视频和照片，并告诉他们有多少好友正在做同样的事情，可以在此分享内容。直接点击安装就可以解除这一空状态。用户在此可以选择了解这一服务，也可以选择直接安装，无论是哪个导向，都是有利于开发者的。

如果可能，提供个性化的内容

个性化的内容服务本就是为了让你的产品和用户需求更好的匹配，而个性化的服务本身就是你的产品值得炫耀的价值所在。

所以，当用户初次探索你的产品的时候，应该可以根据他们登录帐号或者其他的信息，为他们提供个性化的内容推荐、定制服务。就像下面这个阅读APP一样，在空状态页面中为用户提供推荐的图书：

在界面中注入情感

空状态还能为你展示你的产品富有人性的一面。积极的情绪刺激能够让你和用户之间构成情感联系。想要在空状态下呈现什么样的感觉，传达什么样的感情，都取决于你的目的，你想要达成的目标。作为一款社交软件，Google Hangouts 的目的很明显，是要引导用户尽量分享、交流和沟通，所以它所传递的情感也更加社交化。

当然，这种采用负面情绪的空状态是有风险的，有些人会在这种情形下进行更多社交行为以规避它，有的用户则会讨厌这种方式。但是没关系，有情感反应总比没有来的好。

巩固交互

当用户在空状态界面的引导下，完成任务的时候，同用户一起庆祝，告诉他们做的很好，是构建情感联系的可行方案。当用户达成任务的时候，你可以趁热打铁，让用户做更多，来维持状态。

比如在 Writeupp 这个应用中，用户需要达成列表中一系列任务。当用户完成全部任务之后，APP会给出“Well Done！”这样的祝贺语。为了巩固用户的成就，APP会提供后续的步骤和任务，让他们继续前进。

结语

当你在设计UI的时候，空状态页面从来都不应该是空的，它应该作为用户引导流程的一个起点，整个产品体验的重要一环而存在，推动用户前进，是你的产品服务的重要入口。

【这些文章都在探讨新用户引导】

1. 《觉得自己学了假设计?真正的新用户引导应该这么设计》
2. 《实例教学!10步打造更好的新手入门体验》

原文地址：smashingmagazine
原文作者：NICK BABICH
优设译文：@陈子木

本文由优设网原创翻译，请尊重版权和译者成果，转摘请附上优设链接，违者必究。谢谢各位编辑同仁配合。

【优设网 原创文章 投稿邮箱：yuan@uisdc.com】

================关于优设网================
"优设网uisdc.com"是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：http://hao.uisdc.com/book/。
设计微博：拥有粉丝量180万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com