3种空状态出现场景，5种消灭空状态的技能教你玩转空状态

这时候的逻辑是这样子的：界面展示用户产生的内容→用户没有产生内容→我们来指引用户产生内容。这样子即消灭了空页面，又可以让用户产生内容，一举两得。而且，这种方法还可以解决一种问题：用户不知道生产内容的入口在哪。所以，这么一看，这种方法简直是一石三鸟。

操作指引有两种方式，一种是通过浮层来引导操作入口，另一种是创建快捷入口。说文字比较苍白，直接看下面的配图吧。

对于这两种方法，各有利弊吧：创建快捷入口的引导性非常强，用户容易注意到，操作也简便；浮层指引的话引导性没有快捷入口那么强，不过胜在用户教育好，下次用户就知道从这里产生内容了。相比较而言，我会更加偏向浮层指引这种方式。

3.使用缓存

虽然我在无意发现的刷新类型区分中针对空白页面刷新这种情况的出现做了一番解释，但是我至始至终还是觉得这种方式体验不太好。针对这种情况，使用缓存是一种非常直观的方式。把之前的的内容存储下来，在展示页面的时候先展示缓存的内容，再加载新内容，这样就非常简单地把空状态消灭了。现在大多数的资讯浏览类的页面都会采用这种方式，比如说朋友圈，网易新闻等等，以至于大家都习以为常了，反而忘了其实这也是消灭空状态的一种方式。

4.情感化表达

当空白界面是用户操作的结果时，我曾说过这里其实没有太多的方法，我们只能老老实实地跟用户说这里就是空白状态。只是，在这样一个追求用户体验的年代，大家也开始把这个提醒表达得更加生动形象一些。在这里会加入一些情感化的表达，而不仅仅只是冷冰冰的文字，比如加上俏皮的图像，或者把文案写得更加戏剧化一些。这些配图在让用户明白当前的状态的同时，往往也能引发用户会心一笑，从而弥补空白页面带来的失落感甚至可以带给用户一些正面的情感。如下图：

这是一个吃药计划的app，设置好之后，每天按照时间表来按时吃药。当天计划完成的时候，列表显示为空，但是上面有个大大的笑脸，还加了一句话“今天的用药计划完成咯，明天再见吧”。不得不说，这种情感化的表达确实比空白状态或者单纯的几句话要来的更加贴心。

这是一个出错的页面，图案是一个流落荒岛的场景，文案是“糟糕，连接掉线了。冷静一下，生个火然后下拉刷新一下吧”。通过一种俏皮的图案和文案，确实可以舒缓用户掉线时的挫败感。

更多的情感化表达的例子可以参考：Empty States 。

5.提供新的任务

前面的四种方法其实说到底，都是在弥补当前任务失败造成的失落感。也就是说，我们的落脚点仍旧在当前的任务中。不过，当当前的任务完全不可行的时候，这时候就需要考虑新的方法了。比如，提供给用户新的任务，让他暂时忘记当前的任务，自然而然就不会有挫败感了。

举个例子吧，当在断网的情况下用户使用chrome浏览器浏览网页的时候，界面会显示一个小游戏。这是一个通过空格键操纵小恐龙躲避障碍的游戏，游戏虽小，但是趣味性十足。在浏览网页失败的时候，提供这么一个小游戏去分散用户的注意力。不得不说，这确实是一个非常好的维度。

再举个例子，当访问腾讯系的网页访问失败的时候，网页除了显示404状态之外，还会显示一个寻人启事。把错误界面和公益结合在一起，不得不说，创意十足。既解决了空状态的问题，又做了好事，一举两得。而且用户可能可能被这个公益的举动吸引了，然后就成功地转移了这是一个404页面的事实。

洋洋洒洒讲了这么多，最后总结一下就是以上这张图。记住空状态可能出现的场景，当设计走到这个场景的时候留多一个心眼，然后按图索骥即可。

专栏作家#

妖叶秋，一年级交互设计师，产品经理专栏作家。做过ToC产品的交互设计，现在在尝试ToB的业务。主攻交互，也懂点用研、视觉和产品的知识。爱生活、爱设计、爱读书、爱总结，头像下方是我的联系方式，欢迎志同道合者与我交流。

本文原创发布于产品经理，未经许可，不得转载。

关键字：用户体验, 用户, 浮层, 感化

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！