设计师最常忽略的UI页面状态：空白状态

设计师必须让用戶在 “首次使用" 就有好的体验！本篇就要探讨设计师更常忽略的页面 – 空白状态（empty state） 页面。

大多 app 平均会失去 77% 的用户（用户下载后三天）。更糟的是，在 30 天内， 将近 80% 的用户不再使用。造成如此低的用户留存率（retention rates）是因为 app 制作或概念不良吗？恐怕有其他原因。基本上，使用者会下载许多 app 试用，并在几天内就会决定该删除那几个。这代表怎么在这个期间内让使用者上瘾，是迈向成功的关键。而你的任务就是确保用户要经常使用你的app，且能心满意足。但在达到这个目标之前，你必须让他们在 “首次使用" 就有好的体验！本篇就要探讨设计师更常忽略的页面 – 空白状态（empty state） 页面。

第一眼印象太重要了！

设计师应该通常都会先设计内容齐全的代表页面，并在示意图上呈现更佳排列的效果。直到更后（或没有）才考虑可能遇到的空白状态（empty state） 。但重要的是，"空白状态" 的呈现具有能驱动用户继续使用的潜力，我们要把握这个与用户沟通价值的时机。

什么时候使用者会遭遇 “空白状态" ?

首次使用： 首次开启 App

发生错误：触发某事件

使用者主动清除：当使用者把内容都清空时

设计空白页面的效益并不仅是美学的提升，它能让用户预期接口可能要呈现的内容，也可增加使用者的黏着度，并告知使用者进行某些动作会发生甚么事情。设计 “空白状态" 页面，可达到下述三

效益：

教学与帮助

让使用者开心

激励使用者行动

1. 提供教学与帮助

在 “空白状态" 页面上可达成的第一个效益就是：指导使用者如何使用你的 app。如果他们不懂 如何操作，app 可能就会被打入冷宫。所以，你应该要协助他们理解下一步要干嘛？或让他们可期待会有种事件发生。

在发生 “错误" 的页面上，应该要提供有用的信息，如协助排除。此页面的设计需在 “友善的程度" 与 “帮助的效益" 中取得平衡。当错误发生时，你应该向使用者解释为什么看不到内容，该怎么解决。

负面案例： Spotify 在错误页面上仅呈现 “有错误发生" 的讯息。

Spotify 的错误页面并没有提供任何帮助

好的案例： Azendoo 留下讯息： 你就像身处荒岛，感到迷失方向且失去联系吗？跟随我们的建议，保持冷静，点把取暖的火，并且按下重整试试。

Azendoo 的错误页面就有趣且有帮助多了

好的 “初次使用" 页面设计可以传达以下信息：

解释正在使用的内容类为何

告知使用者目前所在页面

告知用户此步骤，需要一些资料的导入，才会显示出内容（例如先follow一些人）

2.让使用者开心

若要给使用者好的第一印象，使用性是关键但非为一，产品所呈现的 “品牌个性" 更是重要。假使你能让 “空白状态" 的页面看起来与其它竞争对手不同，其实也代表着你向用户证明 “产品体验同样也具独特性"！ 而我们的目标就是设计出令人愉悦惊喜的界面。

你能做出清新或让人意想不到的创意吗？例如以下透过动画来表现的案例：

或是你能使用开玩笑的手法：

Aaron Walter 由人类不同的需求层次，来解释 “成功的使用者体验" 需具备何种要素；他认为 app 应该具功能、可靠性与可用性，同时也应该是愉悦的。所以试试把 “同理心" 应用于 “空白状态" 页面吧：

Google Hangouts—当没人邀请时，无论原因，总是会令使用者沮丧。因此，它在此页面上呈现一名哭泣小孩的插图。不过，我们可以思考，这样做能刺激或鼓励使用者透过方法来取得更多邀请吗？

为了提升使用者看到 “空白状态" 页面的体验，你可以透过一些手法来取悦他们，如下：

带入品牌元素（ 具差异或有趣的）

具幽默感或娱乐性 （ 利用 “正面" 的情感元素，并给用户惊喜）

显露出人性的那一面 （ 提供奖励，或即使你没义务解决也提供协助）

3.激励使用者行动

大家可以把 “空白状态" 想成小型的 landing page，一个成功的设计会把 “特殊功能" 或 “特色" 的信息，在此页面告知给使用者，并且导引他们去做出我们预期的动作。

在 “空白状态" 的页面上激励使用者进行某些行为，你可以这么做：

鼓励使用者使用：利用适当并带激励作用的用词或设计，如 “学习更多" 或 “让我开

说服使用者使用：提醒用户他们使用你的产品能带来的效益。

给使用者指示：推荐或告知使用者更佳上手途径，并提供 CTA 按钮（或有箭头引导）来引导使用者脱离"空白状态"，进行有意义的行为

设计空白状态（empty state） 的技巧

千万不要认为 “空白状态" 页面仅是体验中暂时或次要的部分，而不去设计它。带给你的使用者愉悦的使用体验，并试图将功能或特色与情感链接。向用户解释 app 能带来的价值，这样才能让用户理解为什么他们应该关注你。 保持简单的视觉： 简洁的 icon 或 轻爽的插图，再搭配 CTA 按钮 通常就够了。 如果 “空白状态" 页面是由活跃用户的行为而产生，可在上面呈现另他们愉快的讯息。 假使是使用者的错误而出现 “无理想内容状态" 页面，你必须清楚的解释如何解决问题或返回。

结论

“空白状态" 页面的设计就如同其他项目一样重要，因为好的使用者体验是来自于整体操作旅程的总和。"空白状态" 页面是你与使用者的管道，设计上需要让讯息与操作之间达到微妙的平衡。

文章摘录链接 ：http://www.cocoachina.com/design/20160630/16870.html