如何设计空状态界面？来看这篇超全面的总结！

想要设计出优秀的空状态，首先要学会理解需求。

因为工作变（tiao）更（cao）许久没有更新了，各位读者老爷见谅。考虑到未来职业规划，同时想在年轻时多接触一些新的设计方向T Z a，因此毅然决然的投入到了B{ P Y E 4端UX的行列，这对我来说是一个挑战，但我喜欢挑战，目前逐渐适应，正好手上有空状态相关的设计任务，因此在构思阶段整理了本文，希望大家有所收获。

那么开始我们文章正文。

什么场9 L @ f G景我们需要空状态插画？

什么是空状态，空状态是指用户在使用产品时遇到的因无数据展Z P d , p R K d示而中断体验的场景。空状态并不全指异常状态，并不局限于产生错误的异常场景。

• 错误异常类： 出现错误如404，断网，加载失败等场景
• 中性类：搜索结果为空、数据为空、地址未添加、新用户未使用导致的内容为空等状况
• 积极正向类：任务或事项被清空，用户主动促成的空状态界面

针对三种情况有不同的设计倾向。

1. 针对错误类

试想此时的场景如何，洞U D G g n ~ s察用户的想A Z 3 S 3 9 :法，感受，此时用户一般正在进行一项任务，异常场景导致任务被打断。这导致的结果是，一方面Y P : D – . k e j用户任务受阻中断，亟需接续任务流程，另一方面用户f e 4 = g X W k对异常和错误产生厌烦的不适情绪，通过安抚用户来挽回产品形象，2 { E j避免用户流失。针对这两点我们需要提供对应的解决方案。

• 阐述问题：告知用户问题出在哪里，缓解用户不适情绪
• 恢复任务：需要提供明确的解决方案辅助用户回$ { 3 c K到任务正轨，如一个跳转按钮，或者一句解决方案说明

2. 针对中性类

中性类常见的u T H ~ !为数据为空的情况，它并不能归咎于产品异常或错误，而是正常状态，如购物车未添加商品，新用户未发布内容。在 ] n o y –此类空状态场景下，产[ 4 h E品需要说明当前状态，即陈述事实，同时针对某些场景可以提供对应的推荐方案,以解: $ $ R g K决数据为空的问题。

• 陈述事实：描述清楚数据为空的事实，原因
• 推荐方案：展示我们建议的方案，帮助用户解决数据为空的情况，但并不强制而只是推荐，如推荐一些商品、引导去发布内容等等。

3. 针对积极类

积极场景下，表明用户通过正向操作获得正向结果，此时需e O 0 E # M 9要一些正向反馈，因此建议采用一些鼓励 [ c 7 M P性M c n C / ` H m *质的文案来呼应用户此时的状态，心理。某些操作成功的结果页也可以归属于积极类空状+ Y 1态页面。

针对以上三类空状态，我们在设计时P v % T O仅需要分为两种场景考虑。

其8 8 D . x一，针对异常错误类空状态，最高优先级的设计目标是保证任务接续，使用户清晰明确地了解任务中断原因，并能够快速获得解决方案，此类场景下，空状态下的6 I [ u 9 n / I设计要素主要用于解决用户面临的迫切难题，其核心主旨是“恢复和救援”。

其二，除异常类的其他) e * ~ P两类空状态。中性及偏积极的空状态场景下，产品自身处于无过错的一方，此时的空状态也并没有影响到用户的原体验流程。因此针对此类空状态的设计可以更自由的组合各种页面内容，例如反馈、建议、引导等。根据对用户的理解和对场景的分析来预测用户行为，想用户所想，展示用户亟需或感兴趣的内容与功能，消灭空白，保证体验贯通。其核心主旨是“预测和补充”。

且此种场景下，设计师可以在保证体验的基础上融入更p / I g & F : q b多业务向的考量，转e ( w U ` # d I }化为设计表现则是一些对业务有帮助的信息推介N Z R R ] e ? 5 I，商# V ~ _ P品推介，如淘宝空购物车下可以根据用户偏好推荐一些优质商品，课程类产品在用户清空学习事项后推荐一些新的课程等等。

当然业务不仅仅局限于显性的利润，可以将目光放的更长远，例如如何利用空状态下的内容设计来促进留存及用户粘性，提高用户忠诚度及品牌认同，这些作为隐性的业务价值同样能为产品带来* a r 7 ; E , : k出乎意料的神助攻。

以上，我们定义了什么是空状态，概括了空状态的三种类别（异常类、中性类及积极类）。同时我们也分析了两种场景下，设计空状态页面的考量与倾向。针对异常类场景，解决造成用户体验中断的问题是其核心要点，而针对非异常场景，设计可以结合体验和业务对空状态页面的内容进行更自由的组合r v 8 * a ( _，预测用户行为，使用用户感兴趣的内容填补空白，以及基于商业化目的去进行对应的商品及信息的曝光。

行业通常如何设计这些内容？（常见类型、方式)

1. 有哪些常见的形式

常用的信息元素或组件有以下四种

• Content(信息模块)：陈述结果，解释状态，阐述方案（纯展示）包含插画&文案
• Operate（操作模块）：CTr = e r L sA按钮，明确的，用于解决^ q F r当前问题的操作
• Guide（引导操作模块）：当前页面存在操作控件，引导模块需要给予位置提示或操作提示
• BoxG f m :&CardV B L 4（定制化内容容器）：内容元素与操作组件的自由组合，根据产品特定体验目标或业务目标自定义J N B C的信息集合。

实际场t [ E g l M I (景下的排列组合

纯配图

此形式在商9 / y X ^ ;业产品中使用 9 | A 3 D 1较少，多^ z 9 v见于飞机稿及一些小众& } r b g P B产品。一图胜千言是理想的情况，真实场景下，孤零零的一张配图无法阐述当前U R .发生了什么以及应该如何摆脱困境。不建议使用。

纯文案

纯文案能够简洁清晰描述问题或状态，帮助用户快速定位| y 2 g K r L问题点。适用于极简产品、对视觉没有极致要求的B端产品，有个性设计语言的小众产品等。缺点是略显单调u V r，无法进一步触发场景，] a – B : ] U ] T产生共鸣。创造更多价值。

插画配图+文案

比较主流的空状态内容形式，通过精心设计的插画陈述产r 4 (品状态，引导体验路径甚至传达品牌价值，辅之对应的精确文案。从传达信息的角度帮助用户理解当前所处的状态，遇到的问题，以及解决方案。

插画配图+文案+CTA按钮

同上E ` o，在插画加文案的信息模块的基础上增加了一个操作按钮，该操作基于用户所处的场景来配置功能，可以用来解决用户面临的紧迫问题，也可以用来引导新用户开始产品体验旅程。

插画配图+文案+引导线索

当前页面已经存在解决空状态的操作控件，如新建功能，而空状态提e . @示需要完成的任务时吸引用户注意力到对应的功能，帮助新用户熟悉产品，快速掌握核I 1 O ,心功能。

定制化的内容容器

需要展示更复杂的内容，提供更多样功能，此时设计师可以根据产品诉求，对确定的内容规格进行“封装”，封装后的形式就像是一个BOX或者说; ? 3 T : 1 s } M我们熟悉的卡片设计，0 t 3 H w x一个box模块包含富文本信息、操作功能等多样的内| E W ^ G e E Y #容。作为; 0 d 2 A Y定制化的特殊组件，它更契合你的产品形态，契合业务诉求? v ` I @ A 5 g，拥C o v [ [ z b y有更强的陈述能力和解决方案等能力。

2. 有哪些常见的样式：

按照三维属性划分：线性、面性、2.O V o J e ~ W p f5D&伪3D、3D

按照配色风格划分：灰色、灰色+彩色点缀、彩色

是否有人像插i A l 9画参与：是、否

除此之外，空状态插画还可以有动效、游戏化等形式，但并不作为主流形式来参考。根据以上三] D T S v ] } { r个分类的排列组合，我t D i ? y M b们能够创造出足够饱满的插画配图。同样，在选取不同风格的组成元素时，这里也有一些参考建议。

关于三维属性的选取：

线性插画更加轻盈，没有过于复杂的细节，具] W =有高度概括性，适用范围较广，且容Z = 9 }易制作，拥有独特的简洁美感。接受度较高，是比较主流的配图样式。7 , @特别适合不张扬，无需强调和分散注H * . e ~ d p E ~意力的场景，只作为辅助元素为产品界面增添细节及搭配体验文案来 L M K ) B S O 5陈述内容。但不精心打磨的情况l S l *下，线性插画容易产生简陋感，粗糙感，因此需要注意形体构造和颜色的搭配。

面性插画同样是主流的插~ ( u画表现形式，与线性构成对比。面性插画种类繁多，根据添加的细节多寡，从完全扁平的2D形式，到拥有复杂光影光影表现的质感形式，可供选择的方向较多。更加考验设计师的视觉设计能力、配色能力等。需要注意的是面 R l性. 9 B M d + h Q u插画_ ` ~能够与丰$ 1 4 . . F 6 f富的颜色搭配创造视觉冲击力，其聚焦用户注意力的能力较强，需要根据体验目标和业务目标在合适的场! v C B 7 E N景使用。

2.5D和3D属于较新潮的风格s A B 4 v } n a G，尤其是近几年b ; g H ] K新兴的3D设计，他们的共同点是拥有更强的表现力视觉感染力，符合新的视觉趋势，容易引发用户视觉到情感上的共鸣，但新潮的趋势往往并不敢用于大体量的成熟产品，需要兼顾多种类型的用户群，总之谨慎选择，同时3D和2.5D都对设计师提出新的技能要求，有一定的操作门槛。

关于颜色o B K g :的选取：

首先，灰色系是最不容易出错，且最契合空状态 H I I O G Q A D场景的配色方案，其朦朦胧胧的视觉呈现效果即能够丰富界面细节，又不会作W Q 4 $ e `为视觉重心削弱其他核心信息的获取c 9 h y s z ( ] 效率。其次灰色系配色的设计下限较高，简单的讲就是容易出效果，即便没有太好的配色功底也能仅仅通过明暗的搭配来产出具有高级质感的配图。

彩色拥有更丰富的视觉表现力，但也有t 6 | X 1着与之对应的复杂性。彩色配图容易“抢焦”，需要考虑是否会干扰到主信息的传达效率，如果插画的视觉重心甚至超过了CTA按钮，那必然是不可取的。

所以，遇事不决，量子力学，中庸之道。 选择灰色系与彩色点缀的方式未尝不是一个终极解决方案。

我们设计它的目的是什么？希望实现什么目标，5 L i s # q如何评估？

空状态的设计有一个广度的目的，即保证用户的体验流畅一致，以及更进一步的满意度乃至信任感。这实际上是用户体验设计的一个核心命题，即尽可能提升用户使用产品的体验。

空状态在其中担任着桥梁、救援队的角色，专门处理一S # p 7 3 P @些特殊场景的体验问题，l K h a p y如+ U = R 新用户初次登录，( / = M g = ? a如何快速I ? s的被教育为基础用户，被引导熟悉核心流程？因网络、设备、误操作等原J – T F ^ d因导致的产品体验流程的中断如何才能快速恢复？2 # : % R n空状A ` 6 U l j态界面曝光的场景下，如何把空白页转化为机会，融合业务价值及品牌价值？^ N ^ c z

因此可以见得，空状态在不同场景下，可以有很多目标，这要根据实际产品情况来判断，但一个总的指导原则可以确定，即优先解决用户面临的问题（通过阐述当前状态、原因、及提供解决方案），其次考虑如何接力打力增v I K * – ) {加用户价值（用户愉悦性、接受度、用户粘性、信任感等），然后融合业务价值（增加利于商业化的内容模块），最后注意整体使用情感化的表达方式，从体验文案到配图。

案例

下面提供一些实际案例，来讲解一下比较典型的空状态设计目标

1. 解决异常问题

针对异常类空状态，设计目的在于解决问题，恢复任务。因此主流做法是陈述问题、说明原因，阐述解决方案，最好H 0 & ] m 9 O能够提供直接的解K ~ g D } 6 ] U 8决方案，如跳转、刷新按钮。

以下图中的两个无网络状态举例，文案与配图主要用于陈述当前遇到的网络问题: y h ) ，同时左侧的网易云阐述了解决方案——检查网络设置，右侧的美团则提供了解决当前问题的加载按钮。由于PC端和移动端的F n ! # % w差异，因此两者在设计空状态方案时也略有^ n X t w U不同。PC端不需要加载按钮，因为网络连接后会自动加载，移动端网络问题主流场景是弱网状态，其次是网络连接中断，用户恢复网络后需要手动去刷新。

2. 数据为空场景

数据为空的场景f n D实际有很多种，但大多数都不应该被定义8 J V为异常，例如搜索结果为空，描述的是当前库内存在的数据不包含搜索项这样一G ) ~ W .个既定事实。以告知结果为主。

新用– & i u . | f 9户初次使用，未执行任何操作，此时空状态页面一方面阐述当前状态，另一方面提供对应的引导，指导用户快k e M !速学习产品，上手并填充内容，教育用户的同时解决了空状态的情况。

另一种情况则是涉及到用户权限，例如登录使用的权限。产品内的某些模块、信息与账号体系属于强绑定的关系，需要登录后才可浏览，另外登录使用高级功能也可能是基于业务的考量。由于这类权限空状态会打断用Z ` $ F Y r L =户原有体验流程，因此需要谨慎选择。例如淘宝不会在用户未登录时不予展示商品。

3. 积极结果页

今日事项已清空、任务list已清空，未读邮件已清空，此类用户主动促成“空状态”的场景可以被定义为积极类空状态，此种场景下，清空任务，达成空状态是用户的目的，而不是异^ 1 H常场景。属于用户完成任务后的成功反馈，因此其设计应当偏向正向，积极的主题，适合的鼓励用户，促进用户与产品的互相认可。此类场景是情感化设计最容易发挥作用的地方，从文案的字句斟酌，到插画的情感化融入都有无穷的可操作性。

4. 品牌价值的传达

品牌价值作为用户潜意识层f S = S H 0 s !的影响因素，是一个需要持续发力的设计层面。成熟的产品团队都会结合自家产品特色，历史品` k y X Q A f牌建设来打造专属品牌形象，如钉钉的钉三多、飞猪的小飞猪等，一个形象打造好可以发挥极大地品牌I B L i ) D p价值，占领o n 0 f 6 H N M用户心智，从而间接提高市场占有率。打造专属品牌形象，与幽n d O默风趣的主题插画配合，讲故事、谈理想、获取共鸣，强化品牌观一气呵成。而空状态界面正是其优质的载体，制作精良的品牌主题插画更可以缓解用户焦虑、张扬产品个性，与H a . | G 9 I )竞品构成差异化。

最后，希望设计师在设计前能够花费一定的时间来思考设计，而不是快速进入设计制作阶段，阅读了上面这些内容，你应该能意识到X ! a @ _ 6 t – 5，空E ! 4 o I v状态设计中，插画的美观性反而是最次要的，e J @ O ? + g当前页面的设计目标，体验V ~ E上的考量、业务上的思考等内在才是其核心要素，想要设计出优秀的空状态，首先要学会理解需求，理解当前场景下，用户需要什么，公司与团队期望h A s + 1 F & r从中获的什么，没想清楚这些，再精美的插画也没有意义。

另外，L H U n打个广告，Base深圳，Shopee（外企，不加班，J { q , O P d福利多多），有B端经验的优先C端有相关想法和信心的也可以，加我微信（zhttyy1234563 M ; 4 r P）帮忙内推，目前团队正在进行核心项目的重构，供应链相关B端产品，处于产品从0到1的设计及设计规范的制定阶段，对个人成长相当有利，最关I H s ; B *键的是，现在很缺人、很缺人、很缺人，所以面过的几率很大，所以尽情的把简历推送给我吧y E 3。