空状态页是鲜为人知的设计元素，在用户体验中起着重要作用。 最简单的形式是，空状态是用户首次访问没有可用内容的页面时看到的页面布局 。
这可能包括移动应用程序 ，社交网络，甚至是空白的博客类别。 目的是交付一个看起来像非空页面的空页面。 访客应该认识到缺乏内容是即将到来的一种手段 。
我想介绍空白状态页的工作方式以及为什么它们如此重要。 接口设计人员应考虑这些要点，并在适当时尝试将它们应用于空状态。 首先，让我们研究一个空状态如何起作用以及如何为接口提供价值。
空国家的价值
伟大的空状态设计之美在于简单性。 空白页面会解释一旦有内容，页面上应该显示的内容。 它可能是被动的（例如，收件箱为空），或者可能是积极的（例如，空的Twitter提要）在等待用户。
空白页面无聊，沉闷甚至令人困惑。 空状态提供了指导，以帮助用户了解他们在看什么。 即使是空白页，额外的上下文也有帮助。
对于没有现有数据的新帐户，空状态也会给人“新鲜感”。
由Redditor Bambo_Ocha完成的测试检查了20种不同的应用程序是否为空状态设计。 CTA按钮，示例数据，甚至简短的教程演练都有各种设计风格。
在用户群中蓬勃发展的应用程序应设计空状态，以鼓励用户活动 。 这项活动可能是发布内容，添加朋友，上传照片或为应用创建的任何内容。 Tookapic下面的屏幕就是一个很好的例子。
但是，即使不需要采取任何措施，空状态页仍然具有价值。 这些设计主要用于提供信息。
静态信息同样有价值，拥有一个空状态并不是天生的坏事。 例如， 此页面设计没有显示来自跟踪应用程序仪表板的当前指标。 用户可能想要添加一些指标，但不要将破折号留空。
类似的静态设计可能对空白的博客存档或空白的邮件文件夹非常有用。 没有消息要显示是完全可以接受的。 但是该页面也不应该完全没有上下文。
重要页面元素
空状态页上最重要的元素是context 。 这可能以图形，文本或两者的形式出现。 您想通知用户页面为何为空以及其中可能包含哪些数据（电子邮件，推文，朋友个人资料等）。
尽管文本是网络上的主要交流媒介，但您不能忽视图形和图标的价值。
DigitalOcean具有出色的仪表板，具有空状态图形，可以清楚地说明其观点。 他们的公司使用富有创意的品牌和简洁的版式，因此空白状态页面如此说明性也就不足为奇了。
空状态设计的另一个关键方面是号召性用语按钮 。 尽管超链接也可以正常工作，但通常将其设计为按钮。
目的是帮助用户采取措施并清除其空状态。 无论这是需要添加数据还是要在站点上执行操作，CTA都会引导用户进入清除空状态所必需的下一步。
Dropbox具有两个CTA按钮的出色设计 。 每当Dropbox用户没有文件夹时，他们都可以创建一个新文件夹或将示例文件夹添加到页面上。
鼓励用户活动
号召性用语按钮是**的元素，但是请记住页面复制解释了用户在做什么 。 没有人不知道为什么只是点击按钮。
鼓励活动的最好方法是在空白状态页上写上好的副本。 引导用户通过鼓励用户整个应用程序活动的内容流。
ModSpot的这种空白状态是质量设计和令人鼓舞的内容的绝妙例子。
图标用于演示用户应添加到站点的内容。 箭头指向用户应该单击的按钮以及一些鼓励行为的文本。 这是一个精妙的空状态设计，具有您期望的所有元素。
同样， Gumroad空状态提供了两个针对不同潜在动作的选项。 用户可以添加数字产品或物理产品来开始销售。
页面上的其他链接指向帮助指南和联系方式。 一切都经过了令人难以置信的简化，并且紧密地结合在一起。
网络与移动应用
所有介质的空白状态页应遵循类似的设计趋势。 但是与智能手机相比，台式机的用户体验略有不同。
大屏幕上的网站有更多的空间容纳更多按钮。 网页也可以具有较大的导航元素 ，这些元素可以将其他人吸引到网站上。
可以通过类似于Nusii在其提案页面上的样式来解决。 在没有提案的情况下，将引导用户到顶部导航栏中的“添加提案”按钮。
移动应用程序可能有类似的问题，但屏幕要小得多。 这使得将用户吸引到行动中变得容易得多 。
我发现最好以更少的选择使移动应用程序更简单。 将视觉效果用作吸引人的东西，以鼓励采取行动并指向非常特定的用户流。
空状态设计实例
学习空状态设计的最好方法可能是研究一些示例。 精采的Web画廊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/