【设计理论】公司项目实践中，空白页插画该怎样画？

空页面即“缺省页”的情感化设计分析

空页面即“缺省页”，当页面内容为空或者信息响应异常的状态，缺省页的设计是为了给到用户的反馈提示，使用易理解和语法恰当的表达当前的异常状态，同时也为了安抚用户体验情绪的重要场景，视觉体验的提升，在标准设计规划中提升用户体验，当我们遇到插画风格不统一，存在多套配色体系，设计元素复杂冗余，场景主题不突出等，种种问题的暴露时，也表现出空白页在整个规范体系中没有整体的规划和设计。

情感化设计思考

内容为空或者数据异常的缺失会给用户造成情绪上的焦虑，因此情感化的缺省引导是有必要的，好的情感设计能够有效的抚慰用户的焦躁心情，减少用户的负面情绪，能让用户的转移到当前操
作上，避免用户因为情绪的不满而放弃操作。

情绪版提炼出三个原则:简洁、清晰、温暖。

我们所要表明的设计方向即是，简洁明了的设计风格，清晰易懂的场景插画，温暖关怀的情感共鸣。

设计拆解

为了更好的迎合场景效果，我们在设计前景也通过了大量的思考、素材收集和竞品对比，并且要和同行 业中的风格形成差异化，更要结合元年的特色，我们给出了一个初步的想法。

我们把缺省插画做一个拆解，简单的分为五大元素：前景、背景、主元素、任务、状态。

视觉呈现通过渐变色、不透明度渐变、 投影、内阴影等形成层次变化和光影效果，多图层刻画来强化插画场景的质感和层次感。

例如：“404 页面不存在”这个场景，我们把元素拆解展示如下，通过几个特定的特征元素我们就组成了缺省的这个场景，同时我们在插画中也融入了中国风的元素；山水、亭子、飞燕、日落等作为通用的背景元素，国风图标的设计理念，使得用户在不经意间发现惊喜产生共鸣，我们在通过元素把握缺省场景的同时，也加入了一个充当与当前使用状态的用户小角色，在异常的缺省情绪下与用户建立情感连接。

实施落地

结合了前期情绪版的设计理念，插画风格的基本定调，确定好十几个缺省页的状态场景，接下来就需要 静下心来细细的刻画和打磨。

不同缺省场景结合，我们对产品现存所有的缺省状态做了新的视觉优化，在提升视觉体验的同时，也希望通过对缺省插画风格一致性的统一，来降低用户在使用中可能存在的困扰。

缺省状态的使用场景

缺省状态大致分为三个层级：系统层、信息层、业务层，不同层级的缺省状态也反馈了缺失的不同信息。

01.系统层：

当用户请求服务器时，返回提示请求提交失败，并检测到失败原因时呈现的页面。
例如：网络异常、404页面不存在、500服务器错误、403没有权限、没有找到搜索结果、功能建设中等，页面一般会有重新请求的快捷按钮，文案上可做失败原因的细分描述。

02.信息层：

请求服务器数据成功，但返回的各个场景下数据异常的页面。

例如：暂无数据、暂无人员、暂无报销、暂无待办、暂无发票、暂无申请、暂无图片等，文案内容以提示数据类型的数据缺失为主，显示形式除了常有的全屏缺省图，还会出现在数据下拉框中显示。

03.业务层：

在不同业务场景下的数据反馈状态提醒，如在商旅项目中也有特定的缺省的状态场景，例如：暂无行程、酒店机票火车票暂无结果等，根据不同场景设计不同的缺省插画给予用户更深层的情感化的体验。

文案风格

同样缺省页的文案指引也是很重要的一种情感抚慰的处理，通过俏皮的文案来激励用户同理心，也能够充分的读懂缺省插画的抽象场景，有时候缺省状态下也需要给用户明确的操作指引，在界面中提供明显的按钮、箭头指示用户操作。

缺省页的作用总结

解释说明，告诉用户当前页面的信息状态出现了什么问题。
安抚用户情绪，缓解用户焦虑、挫败、疑惑...的负面情绪。
引导用户操作，告诉用户解决方案，并引导用户进行操作。
强化品牌感，传达品牌定位、格调和气氛，与用户建立情感连接。

结语

作为设计师更要细节见真章，所有优秀的体验设计都必须照顾到方方面面的缺省情况，让每个产品细节处理到最好的用户体验，把设计的价值发挥到最大，产生相互信任的良好的品牌关系，这样的平台生态是良性的，这样的产品会更好的商业价值转化。

感谢您的阅读

更多建议欢迎交流，我们都在不断的学习与成长！