前言

本文以实际空状态设计需求为例，讲述我从了解需求到分析需求，然后设计页面，一步步设计空状态页面的思路

了解需求

1.为什么要设计空状态

产品经理在原型设计过程一般只绘制涉及产品功能的页面，空状态并非产品主要功能的页面，因此很容易被遗漏。如果设计师没有注意到这一点，去完善空状态页面的设计，则内容区会显示空白，会让用户认为系统异常，让用户不知所措。

2.空状态使用场景及作用

制作空状态页面前，先了解一下空状态有哪些使用场景，梳理一共需要绘制多少张页面

第一类场景是用户请求服务器正常的情况，这里又分为有数据和无数据。

（1）有数据：如果用户初次体验产品时，还未在本产品创作内容。此时空状态页面的作用就是帮助用户快速了解当前状态，引导用户产生内容，增加留存。

（2）无数据：用户访问服务器正常，但是此数据可能已被后台隐藏，也可能已被删除或者服务器无此类数据，所以用户端显示无数据。无数据的时候，可以增加系统推荐，毕竟商业设计赋值于业务，提高数据转化也是设计的重要价值之一。所以可以增加系统推荐功能，推荐内容通常展示在空状态页面下方，增加内容曝光率，吸引用户点击。

第二类场景用户请求服务器失败时，提示用户请求提交失败，如无网络。此时空状态的作用则是安抚空数据的页面给用户带来的负面情绪，缓解用户焦虑

分析需求

经过上面的了解，我们列出来了那些页面需要设计空状态。这里我列举设计无网络的例子。接下来我们需要去了解市面上比较流行空状态的表现形式。表现形式分为以IP吉祥物为主角代入场景和无吉祥物的情况。

IP吉祥物为主角代入场景画面的情况：在当今信息爆炸的时代，在有限的消费者心中占据一席之地，与其他品牌形成差异化，让用户记住产品，是每个品牌追求的目标。在心理学中，图像往往比文字更容易为人识别、记忆与喜爱，所以很多品牌都会塑造品牌吉祥物，通过亲和可爱的吉祥物拉近与用户的距离，建立用户粘性，从而加深品牌记忆。

无吉祥物的情况：当产品无吉祥物的情况下，通常采用虚拟的小人物代入场景，或者使用与空状态有共性的事物表达当下状态。

由于我们的产品没有吉祥物，所以我设计空状态页面时，选择采用与空状态有共性的事物来表达空状态。

下面列举我设计“无网络”空状态页的设计思路，我采用插图+文字的表现形式设计这一页面，首先是进行关键词事物联想，思考与“无网络”相关的关键词，再从思维发散的众多关键词中筛选出几个关键词，然后进行联想组合设计。

我选择了“宇航员”“星球”“WiFi”这几个关键词，当时的想法是太空中没有网络，加上宇航员，那就做的有趣点，宇航员把网络搬到太空去了，表达无网络的意思，再结合品牌色，设计了下面的页面

感觉页面有点单调，需要丰富了一下细节。加入其他小星球丰富画面元素的前后关系，增加页面空间层次。小星球跟前面的大星球让画面有了大小对比，画面没那么死板，然后再用噪点笔刷增加画面的细节与质感

一张空状态页面就这样完成了

希望我的思路对你有启发

Powered by Froala Editor