美文网首页移动设计
空状态设计你需要知道的

空状态设计你需要知道的

作者: 闫小娇 | 来源:发表于2018-07-15 22:45 被阅读436次

    空状态是改善产品用户体验的一种方式,从引导到鼓励用户与您的应用互动。

    空状态是UI中尚未充满信息的时候。也就是说,当屏幕已经填充的时候,它们是最终将具有内容的屏幕。

    尽管如此,空状态提供了一个有趣的用户体验机会。事实上,空状态可用于指导用户采取行动,向他们介绍您的应用或展示您的品牌个性。

    您可以将空状态转换为与用户进行有意义的对话,并提供引人入胜的用户体验。

    所以  说了这么多什么是空状态?

    空状态是针对与页面内容而言的,当应用程序的内容无法显示的时候就称之为空状态。空其实是用词不当,因为页面上有某种类型的内容。实际上,空状态可以显示各种不同的内容以增强用户体验,我们将很快介绍。

    我们来看看像Instagram这样的应用。如果您尚未添加任何喜爱的照片并切换到“收藏夹”屏幕,您可能会看到一个空状态,告诉您尚未添加任何收藏夹。

    Instagram的悲伤,空白状态

    Instagram的收藏页面上没有空状态。它是空白的。他们错过了通过添加自己的用户来推动用户开始使用应用的机会。

    可以出于各种原因设计空状态。最常见的是,在以下情况下:

    1.用户已清除所有数据(例如清空其收件箱)

    2.用户是新用户,刚刚完成引导

    3.用户遇到错误(例如,如果您没有使用应用程序的wifi连接)

    用户体验设计中忽略了空状态

     Shruthi padala曾经说,许多人认为空状态是不需要注意的辅助页面。原因是只有2%的用户看到空状态,这意味着它不会是经济来源或实际使用。

    这解释了为什么空状态被忽略了。没有多少用户会看到它们,并且需要花费大量时间却获得不多的回报。正是这种心态可能会损害最终的用户体验。

    但是更多的产品决定在低用户和低持续时间的情况下重新做空状态。为什么?因为即便有2%的人需要拥有出色的用户体验。它给体验带来了更多的润色和影响。

    想象一下,如果用户是新用户并且正在探索应用程序并且不知道是留下还是离开。设计这些关键时刻非常重要。

    空状态不会是您的应用程序成为世界上最成功的东西,但它远远高于用户的喜悦。

    使用空状态的好处

    1.空状态可能是注入个性的机会,应该始终考虑品牌和用户的目标和背景。

    2.正确组合文字和视觉效果是与用户沟通并帮助他们实现目标的关键。

    3.同样,如果不是更重要的话,也会为您的用户提供下一步。如果你不这样做,你就不会在空状态下提供任何价值; 它只是一种化妆品添加剂。

    如何做好空状态

    如果您的任务是设计一个空状态,那么请记住一些好的做法,以便您可以帮助您的用户实现他们的目标。

    1.在空状态屏幕上设置号召性用语按钮

    例如,您可以在空状态屏幕上设置号召性用语按钮。假设您有一个刚安装的社交网络应用程序

    Facebook应用

    有朋友列表标签,但它是空的。一个好的号召性用语要求您的用户查找并添加他们自己的朋友可以让他们参与并在您的应用中。您的行动呼吁基本上告诉用户如何将该空屏幕变为填充屏幕。看看Favebook的做法~

    2.为你的空状态添加个性

    但是你的空状态是一个很小的例子,你可以在你的产品中注入一些个性。这并不自然意味着有趣。在您的用户界面中添加幽默时,请谨慎使用。今天的一线讽刺可能会很新鲜,但明天可能会在用完之后在UI中留下陈旧的味道。

    在空状态设计中使用简洁清晰且易于使用的文字。结合一个定制和适合的插图,你可能会在一个获胜的空状态。

    Google的Material Design指南规定,如果您打算使用图片,请确保:

    1.有中性或幽默的语气

    2.与您的品牌一致

    空状态应该是:

    1.有一个有用的消息

    2.与您的品牌保持一致

    3.传达屏幕的目的,而不显示不可操作性

    3.使用空状态来教育您的用户

    您可以使用空状态向用户显示如何使用您的产品。空状态在新用户中起着重要作用。

    如果您想留住您的用户,那么良好的引导是关键。

    4.使用入门内容

    Material Design解释说,为了帮助新用户,您可以使用入门内容填充其他空白屏幕。这样,用户可以立即使用您的产品,从而更轻松地学习您的产品。

    存储音乐或书籍等内容或使用模板化内容(如笔记或文档)的应用程序可以从初学者内容中受益。让用户能够更改入门者内容是一种维护参与度的方法,因为用户正在创建自己的应用程序。

    从上面看读取应用示例。它使用免费书籍填充,从那里他们可以探索应用程序的其余部分。

    空状态设计 - 番外

    空状态不必为空。使用它们与您的用户开始对话。会话将导致您的产品与用户之间保持持久的关系。

    通过使用上面概述的策略,您将创建一个帮助用户实现目标的空状态

    加我微信一起讨论设计问题:

    更多的设计请关注:

    Dribbble:https://dribbble.com/yanruijiao2

    参考文献

    https://uxplanet.org/everything-you-need-to-know-about-empty-state-design-af05bee42429

    相关文章

      网友评论

      本文标题:空状态设计你需要知道的

      本文链接:https://www.haomeiwen.com/subject/sikmpftx.html