/空状态: 助你呈现出更有效的交互
最新文章2023-12-02

空状态: 助你呈现出更有效的交互

在设计过程中，我们经常容易忽视一个方面，那就是界面的空状态。但如果我们拥有良好的空状态设计，那么它就可以帮助呈现出更加引人注目的用户体验，同时进行更有效的交互。


可是，究竟什么是空状态呢？

我们又该如何通过空状态进一步完善自己的项目呢？


今天，我们就来探讨认识一下空状态 (Empty State)。




01

空状态


顾名思义，空状态是我们与产品进行交互时“没有任何东西”可显示的时刻，它的核心并不在于“空”。事实上，空状态可以显示各种不同的内容来增强用户体验。因此，它是改善用户体验的一种方式，且可以引导并鼓励用户与我们所设计的产品进行交互。


如果我们想进行高质量的设计，那么空状态就有可能成为良好用户体验与不良用户体验之间的转折点。以下是我们在日常中可能遇到的一些最常见的空状态示例：

  • 在网页上显示“无法找到内容”的搜索结果

  • 清空后的购物车

  • 存储类应用程序上的空文件夹

  • 404错误

  • 无更多新消息通知

  • 清空的电子邮件收件箱

空文件夹

404错误

无新消息通知

值得我们注意的是，一个有价值的空状态可以让用户知道发生了什么、为什么发生，以及应该如何进行处理。以Dropbox Paper为例，它在首次发布时就为用户登陆提供了良好的空状态UX设计。其界面上的号召性用语按钮可以帮助用户在开始进行一系列操作时，无需过多思考下一步该做什么。

Dropbox Paper登陆时的空状态


02

空状态的类型

Deliveroo的产品设计师Ryuan Cordell认为：“文字和视觉效果的正确组合是与用户沟通并帮助他们实现目标的关键。设计团队应该像在界面上做任何其他事情一样，在文字设计上投入尽可能多的时间和注意力。”


因此，我们在设计过程中需要知道，没有文字或图片指导的空白屏幕会导致混乱和不确定性。而经过深思熟虑的空白状态屏幕设计也可以有效帮助我们提高用户的参与度。除此之外，为了推动呈现极佳的用户体验，空状态存在四种常见类型：


  • First Use (首次使用)：在首次使用新产品时界面没有显示内容

  • User cleared (已执行清除操作)：当用户完成清除收件箱或任务列表等操作后将会显示一个空白屏幕

  • Errors (错误)：当出现问题或出现诸如手机因网络问题而离线等故障时，就会显示错误

  • No results/No data (无结果/无数据)：如果我们执行搜索并查询为空或没有可显示的数据时，就会显示这一状态



03

空状态的最佳实践

在对空状态设计有一定了解后，我们就需要考虑一个问题：如何有效地填充这些空白屏幕以此呈现出最佳的空状态设计？
▍Keeping Empathy (保持移情)

糟糕的空状态设计会让用户感到迷失，并导致糟糕的用户体验。这种感觉不仅令人讨厌，还会产生相当大的影响。而解决这一问题的方法就是：使用可自定义的插图，并用一些令人愉快的视觉效果填充这些空状态屏幕。


以TransferWise为例。由于没有进行任何交易，因此其屏幕可能完全是没有任何内容的。然而，设计师决定添加一点视觉刺激。这样不仅可以创造出令人赏心悦目的界面效果，而且也有助于向用户解释此页面上即将发生的事情。

TransferWise的空状态设计

在Gusto这款程序中，它使用了一些具有个性化和有趣的图案来进行填充。因此，整个界面就为用户添加了惊喜和喜悦、情感和个性，而这些都是我们创造更好用户体验的方式。所以，对于空白屏幕来说，通过传递移情消息可以增加多样性并创造更具吸引力的个性化体验。

Gusto的空状态设计

▍Using Starter Content (使用初始内容)

在Material Design中解释到：为了帮助新用户，我们可以使用初始内容填充其他空白屏幕。这就可以帮助用户快速上手，并使学习使用这款产品变得更容易。


在众多应用程序中，存储音乐/书籍，或使用笔记/文档等模块化的应用程序可以借助使用初始内容进行有效设计。以下面的某款阅读应用程序为例。它使用了免费书籍来填充界面，进而提高了用户对于这款程序的探索性。

▍Adding Personality (添加个性)

如果我们设计的产品表现出无趣感，那么这就是一种最糟糕的用户体验设计了。但若在此时添加一个富有个性的空状态设计，那么它就会立即显得有趣且有意味。

一个成功的空状态设计具有这样的一个特点：使用友好且平易近人的副本，并将其与定制且合适的插图相结合。然而，我们需要确保同时使用的图像和副本之间没有竞争性。一个好的图像可以在界面中注入足够的乐趣和参与度。这也是为什么我们能够使用简单而传统的副本的原因。


例如，Material Design就指出：如果我们要使用图像，就需要确保它具有中性或幽默的语气，且与产品保持一致；而我们所设计的标语也应该传达出有价值的消息。

▍Providing an Action Step (提供操作步骤)

对于某些产品来说，我们并不需要提供指导或任何内容来填充屏幕，因为它不具有任何意义。但在某些情况下，我们却可以简单地为用户提供一个操作步骤并将此类操作保持在最低限度。

这一示例旨在告诉用户可进行操作，但仍将其保持在最低限度
希克定律指出：“做出决定所需的时间会随着选择的数量和复杂性而增加。”因此，我们也需要注意：号召性用语最多保持一到两个小时，这样用户就可能会更快的采取行动。


例如，当用户刚接触某款程序时的关注人数为零。而在这种情况下，Instagram则为其用户呈现一个良好的空白状态屏幕供他们选择“想要添加关注的人”，以此提高它的强大功能。

刚接触INS时，用户会以一种快速简便的方式找到其他用户
▍Equipping Helpful Guidance (提供指导)

根据产品类型，我们可以使用空状态来指导用户。一个很好的例子就是项目管理类的应用程序。在开始注册新账户时，用户还没有开始运行任何项目。而这就提供了一个潜在的绝佳机会来帮助他们快速入门，从而降低用户放弃使用该应用程序的机会。

Evernote在引导用户使用空状态页面设计方面做得很好

综上所述，我们可以知道，空状态并不一定是空白界面。一次良好的空状态设计可以帮助我们与用户展开对话。而对话则会导致我们所设计的产品与用户之间建立更加持久的关系。虽然我们有时也会忽略空状态，但它却实实在在地可以增强用户体验并有助于我们创建更具有凝聚力的产品。

空状态(Empty State）



以上，就是有关空状态(Empty State)的相关介绍，希望可以帮助大家在设计中更好地提升用户体验，并呈现出更有效的交互设计。


编辑：YAN

图文信息源于网络，侵权告知即删








本文来自微信公众号“交互设计小站”（ID：racjiaohu）。大作社经授权转载，该文观点仅代表作者本人，大作社平台仅提供信息存储空间服务。

TAGS:

相关文章