如何设计空状态界面

来源：衡阳UI设计培训学校时间：2021/1/11 16:18:41

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

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

　　什么场景我们需要空状态插画?

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

　　错误异常类： 出现错误如404，断网，加载失败等场景

　　中性类：搜索结果为空、数据为空、地址未添加、新用户未使用导致的内容为空等状况

　　积极正向类：任务或事项被清空，用户主动促成的空状态界面

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

　　1. 针对错误类

　　试想此时的场景如何，洞察用户的想法，感受，此时用户一般正在进行一项任务，异常场景导致任务被打断。这导致的结果是，一方面用户任务受阻中断，亟需接续任务流程，另一方面用户对异常和错误产生厌烦的不适情绪，通过安抚用户来挽回产品形象，避免用户流失。针对这两点我们需要提供对应的解决方案。

　　阐述问题：告知用户问题出在哪里，缓解用户不适情绪

　　恢复任务：需要提供明确的解决方案辅助用户回到任务正轨，如一个跳转按钮，或者一句解决方案说明

　　2. 针对中性类

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

　　陈述事实：描述清楚数据为空的事实，原因

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

　　3. 针对积极类

　　积极场景下，表明用户通过正向操作获得正向结果，此时需要一些正向反馈，因此建议采用一些鼓励性质的文案来呼应用户此时的状态，心理。某些操作成功的结果页也可以归属于积极类空状态页面。

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

　　其一，针对异常错误类空状态，的设计目标是增加任务接续，使用户清晰明确地了解任务中断原因，并能够获得解决方案，此类场景下，空状态下的设计要素主要用于解决用户面临的迫切难题，其核心主旨是“恢复和救援”。

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

　　且此种场景下，设计师可以在增加体验的基础上融入更多业务向的考量，转化为设计表现则是一些对业务有帮助的信息推介，商品推介，如淘宝空购物车下可以根据用户偏好推荐一些优质商品，课程类产品在用户清空学习事项后推荐一些新的课程等等。

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

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

尊重原创文章，转载请注明出处与链接：http://www.peixun360.com/659/news/308455/违者必究！ 以上就是衡阳UI设计培训学校 小编为您整理 如何设计空状态界面的全部内容。