移动应用程序和网页应用程序_设计网站和移动应用程序的空白状态页

空状态页是鲜为人知的设计元素，在用户体验中起着重要作用。 最简单的形式是，空状态是用户首次访问没有可用内容的页面时看到的页面布局 。

这可能包括移动应用程序 ，社交网络，甚至是空白的博客类别。 目的是交付看起来像非空页面的空页面。 访客应认识到缺乏内容是即将到来的一种手段 。

我想介绍空状态页的工作方式以及为什么它们如此重要。 接口设计人员应考虑这些要点，并在适当时尝试将它们应用于空状态。 首先，让我们研究一个空状态如何起作用以及如何为接口提供价值。

空国家的价值

伟大的空状态设计之美在于简单性。 空白页说明一旦有内容，页面上应该显示什么 。 它可能是被动的（例如，收件箱为空），或者可能是主动的（例如，空的Twitter feed）在等待用户。

空白页面无聊，沉闷甚至令人困惑。 空状态提供指导，以帮助用户了解他们在看什么。 即使是空白页，额外的上下文也有帮助。

对于没有现有数据的新帐户，空状态也会给人“新鲜感”。

由Redditor Bambo_Ocha完成的测试检查了20种不同的应用程序是否为空状态设计。 CTA按钮，示例数据，甚至简短的教程演练都出现了各种设计风格。

在用户群中蓬勃发展的应用程序应设计出空状态，以鼓励用户活动 。 这项活动可能是发布内容，添加朋友，上传照片或为应用创建的任何内容。 Tookapic下面的屏幕就是一个很好的例子。

但是，即使不需要采取任何措施，空状态页仍然具有价值。 这些设计主要用于提供信息。

静态信息同样有价值，并且拥有一个空状态并不是一件坏事。 例如， 此页面设计没有显示来自跟踪应用程序仪表板的当前指标。 用户可能想添加一些指标，但不要将破折号留空。

类似的静态设计可能对空白的博客存档或空白的邮件文件夹非常有用。 没有消息要显示是完全可以接受的。 但是页面也不应该完全没有上下文。

重要页面元素

空状态页上最重要的元素是context 。 这可能以图形，文本或两者的形式出现。 您想通知用户页面为何为空以及其中可能包含哪些数据（电子邮件，推文，朋友个人资料等）。

尽管文本是网络上的主要交流媒介，但您不能忽视图形和图标的价值。

DigitalOcean具有出色的仪表板，具有空状态图形，可以清楚地说明其观点。 他们的公司使用富有创意的品牌和简洁的版式，因此空白状态页如此具有说明性也就不足为奇了。

空状态设计的另一个关键方面是号召性用语按钮 。 尽管超链接也可以正常工作，但通常将其设计为按钮。

目的是帮助用户采取措施并清除其空状态。 无论这是需要添加数据还是要在站点上执行操作，CTA都会引导用户执行清除空状态所必需的下一步。

Dropbox具有两个CTA按钮的出色设计 。 当Dropbox用户没有文件夹时，他们可以创建一个新文件夹或将示例文件夹添加到页面上。

鼓励用户活动

号召性用语按钮是激活的元素，但是请记住页面复制解释了用户在做什么 。 没有人会不知道为什么点击按钮。

鼓励活动的最佳方法是在空白状态页上写上精美的副本。 引导用户通过鼓励用户整个应用程序活动的内容流。

图标用于演示用户应添加到站点的内容。 箭头指向用户应该单击的按钮以及一些鼓励行为的文本。 这是一个精妙的空状态设计，具有您期望的所有元素。

同样， Gumroad空状态提供了两个针对不同潜在动作的选项。 用户可以添加数字产品或物理产品来开始销售。

页面上的其他链接指向帮助指南和联系方式。 一切都经过了令人难以置信的简化，并且紧密地结合在一起。

网络与移动应用

所有介质的空白状态页应遵循类似的设计趋势。 但是与智能手机相比，台式机的用户体验略有不同。

大屏幕上的网站有更多的空间容纳更多按钮。 网页也可以具有较大的导航元素 ，这些元素可以将其他人吸引到网站上。

可以通过类似于Nusii在其提案页面上的样式来解决。 在没有提案的情况下，将引导用户到顶部导航栏中的“添加提案”按钮。

移动应用程序可能有类似的问题，但屏幕要小得多。 这使得将用户吸引到操作中变得容易得多 。

我发现最好以更少的选择来简化移动应用程序。 将视觉效果用作吸引人的东西，以鼓励采取行动并指向非常特定的用户流。

空状态设计实例

学习空状态设计的最佳方法也许是研究一些示例。 精采的网络画廊emptystat.es策划了从各个网站到移动应用程序的空白状态页面。

我亲自挑选了一些值得您注意的示例，这些示例可以最好地说明空状态设计。 如果您还有其他建议，请随时告诉我们。

DigitalOcean浮动IP

Webflow Beta

视力

比特桶

没有固定的群组

Facebook消息

LayerVault

锻炼挑战

缓冲区空

Word App文件

印象笔记聊天

Beamly对于Android

有声读物

掌上应用

英国广播公司我的新闻

GitHub Wiki页面

翻板

Chrome书签管理器

Mac Infinit应用

空的Facebook Feed

翻译自: https://www.hongkiat.com/blog/designing-empty-state-pages/