从零开始带你掌握空状态设计的正确方法

@Jenny静雯 ：​​​空状态APP内必然存的一状态，宜的空状态设可以提升用户体验，实现用户留存。鉴于空状态在异常状态下要性及容易被忽视现状，本文以实设计需求为例，从拿到需求到提出疑问，再到解决疑问，提出解决案，设计案呈现，逐展示空状态设计正确打开。

文章纲：​

• 需求&提出疑问：了解空状态设计需求，了解空状态是什么？旧版本问题在哪里？如何以及为何要带用户关爱，背后品目标是什么？
• 解决疑问：空状态出APP初次使用、完或清空内、软件出错境下。旧版本的问题于设不全面，与5.0品牌认知不符。传递关意产品感的，感人性化的产品受欢迎。产品目标间接提升用户产品内的留存，点击转化。
• 解决方案：如何这个目标具体？寻被普遍认知&广泛使的情感空状态设计，通过对竞的解决方案的分析，发现最的反思设计表现方式，从侧面寻么样的反思设计是受户爱的，得到可借鉴的信息。
• 设计方案呈现：结合美啦现有资源，完成设计方案。

一. 需求&提出疑问

啦5.0空状态的设需求，即对啦5.0空状态行优化设，使之能够缓解用户遭遇空状态的挫败感，给用户关。

空状态是么？旧版本的问题在哪里？如何及为何要带给户爱，背后的产目标是么？

二. 解决疑问

1. 从4方面了解空状态​

△ 空状态4个

义：空状态通常初次使用、完或清空内、软件出错境下出的页面状态。

作：空状态应该达成个目标：户、取悦户、引导户。每个空状态都有核心需要达成的目标。详细容参看：《超实！3个小技巧帮你设计优秀的空白页面》。

出现场：用户未进行操、用户操结果、出错。

常用解决方案：使用系统推项、使用操作指引、使用缓存、情化表达、提供新的任。详细内容参：《交互干货！帮你消灭「空状界面」的5个常用方法》。

2. 梳理旧版本空状计问题

计不全面

4.0空状态设计不够全，场景繁多，空状态里旧品形象亟待更新，甚至部分空状态页没有任何内容。这都会使用户在遭遇异常情况时，疑虑情绪不到有效疏解，这些问题都需要在这空状态设计解决。

​品认知不

啦5.0设精致、时、品质感。4.0的空状态设已不能很好的承载全新的品牌认知。因此空状态的设对于整App的品牌统一重的补充意义。

​空状态冗余

经整需要优增的页面总计20个空状态，由于空状态页面较多，将某些示功相的空状态使通的视觉表现形式。

3. 有情感人性的产更受

传递爱属于情感化设计的第三层——反思设的核。关意产品感的，感、人性化的产品受欢迎。相比冰冷的流水线机器人手臂，拥拟人化外型的「艾娃」受欢迎。​

△ 冰冷的机器人手臂VS人形「艾娃」

4. 产品目标

​通过人性化的空状态设缓解用户遭遇空状态的挫败感，给用户关。间接提升用户产品内的留存，点击转化。

△ 空状态设优化目标

三. 解决方案

1. 竞品选择

过竞品解决案分析，发现最常用反思设计表现，从侧寻找什么样反思设计是受用户喜爱。鉴于美啦美妆及社区电商属性，分选择了女性时尚类App：小红书、See、HIGO及电商类App：闲鱼、网易严选、淘宝。​

△ 竞品选择

2. 竞品空状态分析

​竞品空状态内容

小书、闲鱼、淘宝使用品牌形象作空状态的主体形象，主体形象使用品牌形象既能实空状态功能，也能不断的增强品牌用户中的形象。网易严选、HIGO、See使用了文字、图形作空状态的主体形象。

各App的空状态从不同角度体了各自的品牌认知​

感关怀

小红书、闲鱼使了萌萌的小红薯和闲鱼，淘宝使了小人，易严使了场景相的物，See和HIGO使了字及图标。拟人的形象更拉产与户的距离。

3. 结论

​通过对竞空状态的分析，体形象使牌形象带给户的情感怀最好，同时牌认知较明显。

四. 设计方案呈现​

1. 空状态主体形象​

从述分析得出，主体形象使用品牌形象给用户的感关怀好，同时品牌认知也比较明显。

美啦5.0空状态使了牌形象：美啦兔——泼又爱美兔子和她的小伙伴——负责送妆的博克斯，一起作为美啦的代表与户互。我们希望户在美啦的体验是顺畅的，但当她遇到空状态时，有美啦兔陪伴她。

△ 美啦兔和她的小伙伴博克斯

2. 脑暴键词绘制草图

​确定体形象和基本的结构之后，就需要在脑海中构思同的场景，赋予美啦兔故事情绪。把想到的场景都字记录来。如购物车：趁年轻要剁手，快来填满我，是时候拔草了；如刷，正在变美，马上就好了。盒子里洒妆，你的包裹小盒到了。发散到一定程的时候，可进行收敛，把分较确定的场景草图表现来。

草图可使大更早看到实现效果，及更快的做设计调整。如404，迷失在星空里，在山谷搜索信号，都可表现信号丢失的感觉，但是这样的场景跟美啦美妆、女性社区牌相距较远。于是考虑户更熟悉的城场景，同时妆替代城的建筑，美啦兔在妆的城里，到的路。​

3. 统一色彩规范​

​啦5.0的品牌色仍然啦粉色，应用于主形象，并贯穿于整空状态；辅色黄色，应用于辅形象；辅色绿色、蓝色作场景元素。

4. 统设计元素

• 右来光，视角主要为正视。
• 形象全部替换为最新的美兔，以美兔为主体，产生互动。
• 微质感、浅浅投影。主体元素有阴影，使形象更丰富。局部描边塑造结构。
• 收敛出几易引起用户共鸣的场景，用详细些的文案故事描述，同时把品图场景故事出，404的页面、通用空、购车空、刷新。

5. 景展示​

景一

用「网络异常」场景，美啦兔在妆品城市里，找不到回家路了。妆品城市呼应美啦品特色，形表上选择最具有代表性口红。美啦兔拿着信号接收在口红高处寻找。

场景​

​啦兔也所的小仙女一样，一直都的。但时候丽需待，就刷新一样，遇到网络不那么好的时候，就需小仙女的稍一会哦。

多场景(部分)​

6. 空状态界​

​空状态占页积情况分为2：

• 第一种全屏空状：导航+空内容显示域。
• 第全屏空状态：导航+部分内容+空白内容显示区域。

全屏空状的空域较大，空状的视觉表现属于主要内容，可以突出表现。

非全屏空状有部正常的内容显示，空域较，空状的视觉表现属于次要展示的内容，视觉表现需要服从主要的内容。​​

7. 小结与反思

​空状态的设计已经完结，但是美啦APP内情感化运营并没有结束，在闪屏、运营活动、题帖子、弹窗等的设计还在继续。面，并且连续不断的情感化设计像一股暖流，给予用户持续的关爱。

欢迎关注作者的公众号：「Jenny静雯」