如何设计交互缺省页？来看腾讯设计师的总结！

哪些州需要默认页面

当涉及到默认页面时，它可能是设计者最容易忽略的输出范围，并且可能直到docking  development学生提出“如果没有数据，这个页面应该如何显示？”为了更好地控制缺省页面交互状态的设计，我们必须首先了解缺省页面的原理。应用程序页面内容(包括图片、文本、数据字段等)。)是服务器请求的所有数据，在顺利返回后将正常显示在客户端页面上。在理解了基本的实现逻辑之后，我们就可以开始整理默认状态的设计思想了。

△ 图1 缺省状态的场景梳理图

缺省状态包括：系统层、信息层、空白层。

系统层：指当用户请求服务器时，返回提示请求提交失败，并检测到失败原因时呈现的页面；例如：加载失败、服务器异常、无网络等；页面一般会有重新请求的快捷按钮。文案上可做失败原因的细分描述，也可节约成本使用网络异常的统一文案。

信息层：请求服务器数据成功，但返回的数据异常的页面；例如：内容已删除、内容已下架、内容不存在；文案内容以提示数据类型的缺失为主。显示形式除了常有的全屏缺省图，还会出现在数据列表下单一内容缺失的缺省模块化的情况，例如：单一作品在书架上显示已下架。

空白层：服务器数据请求成功，但不显示数据；当没有数据时，内容页面需要以默认状态表示；例如，页面有空数据，搜索没有结果。空白页属于正常的网络展示场景，因此默认页面通常伴随着相似属性模块的用户指导，以争取用户重复消费的目标，满足用户的操作需求。

最后，根据每个不同的默认状态，对产品的相应场景进行梳理。根据场景特点，逐一设计页面内容。默认页面的设计有哪些表现形式？

默认页面的表示形式

缺省页面设计不仔细，不能给用户带来良好的用户体验，可能会给用户带来麻烦，如下图所示：利基直播平台的新邀请页面在没有邀请记录的状态下没有任何有效的反馈信息，用户无法确切知道是网络问题还是账户同步错误，或者根本没有邀请。正确的默认页面设计内容应该清晰地表达满足用户心理预期的视觉场景表达(图形)；并使用易于理解的语法来恰当地表达当前的异常状态(标题)，甚至指导用户解决问题。

1.视觉模式复制

这种默认设计形式通常用来表达系统无响应或初始空白状态的默认场景。视觉模式通常使用应用吉祥物或图标或由主色扩展的插图来表示默认状态；正文：通常是“标题”或“标题描述”结构；标题通常是表达默认的原因；描述副本解释了结束默认状态的解决方案，如“请检查网络是否畅通”等。

2.视觉模式复制指导

这种默认设计形式通常应用于需要用户指导操作以实现业务目标的默认场景。在视觉模式复制的基础上，增加了引导模块，主要用于避免用户在数据边界状态下无法达到操作目的的跳出率。引导模块的内容包括：相似属性内容、相似行为目标按钮或解决缺省状态操作按钮、添加引导、用户执行某一行为或感知某一信息，对功能教学和提高使用频率有重要作用。引导模块的形式日新月异，逐渐成为引导新用户业务的功能，不仅限于页面平铺，还可以制作成固定的气泡微动效果，例如，发布颤音的默认页面。

缺省页的设计技巧

缺省页除了常规的提示型设计方法，还有许多其他的设计技巧，帮助用户在遇到困难，更好地安抚用户的情绪。这些设计技巧有些是替代原来的缺省内容，让用户有更多的消费空间与深度。有些是拓展缺省状态的补充内容，让用户不容易跳出页面，增加用户的消费时长。具体如下：

1. 使用推荐的内容

默认状态下的空白层极大地影响了用户对边界条件的体验。本文提出了一个假设，我们可以故意推荐具有相同属性的内容吗？这种界面不会显得苍白无力，但也能留住用户的注意力。相似性也可以解决用户目标的紧迫性。因此，这种方法非常适合基于内容的产品。例如，当一个新用户打开电子商务产品的购物车时，应该是一个没有消费行为的空白操作记录。然后平台通过用户肖像和流行的排名算法推荐一个商品流。这样，可以解决用户对非目标选择的需求，并且可以增加消耗时间。对于产品，如果确定了用户肖像的推荐算法，在数据库中推荐带有相应标签的热门产品之前，我可以得到第三方登录的个人基本数据，这样推荐的准确率会更高。

2. 使用缓存

是否使用缓存内容代替缺省状态？根据产品特性来判断，工具类、金融类等同类型产品不适合使用缓存；因为用户交互操作的数据必须保持实时性与真实性。而内容型、电商类等类型产品适合使用缓存来代替缺省状态；理由：用户消费内容的转化路径是先消费后转化的行为特点，不存在系统操作门槛，且缓存内容可以代替产品的缺省状态，安抚用户操作失败所带来跳出率过高的风险。

3. 情感化表达

当缺省页给到用户时，通常省时省力的做法就是老老实实告诉用户当前的状态，最多配上一个具有通识性的灰色 icon。但是，秉持着以用户体验为己任的时代，我们其实可以把缺省内容表达得更加生动形象一些。在这里会加入一些情感化的表达，而不是仅仅只是做到准确的目标而已，比如加上活泼的插图故事，或者把文案写得更加拟人化、戏剧化一些。这些配图在让用户明白当前的状态的同时，往往也能引发用户会心一笑，从而弥补空白页面带来的失落感甚至可以带给用户一些正面的情感。如下图：

4. 提供新任务

通常缺省页的引导模块都着眼于解决当前任务。如果碰到没有解决方案的情况（例如：404，服务器崩溃等）可以提供给用户具有情感共情的新任务，让他们暂时忘记无法达到目标的挫败感，又有体谅的情怀。帮助建立正向积极的品牌价值观。例如：访问腾讯网时访问失败的时候，网页除了显示 404 状态之外，还会显示腾讯「宝贝回家」的公益寻人计划。将缺省页与公益内容相结合，不仅改善到用户缺省状态。也贯彻腾讯价值观「用户为本，科技向善」的输出。一个好的缺省页也可以承担社会责任，让公益传播到每个角落。

△ 图10 腾讯网404公益任务缺省页

结语：作为设计师有时会听到需求方表述「这种极少出现的情况，我们可以暂且不管它。」但是细节见真章，所有优秀的体验设计都必须照顾到方方面面的缺省情况。让每个用户的流量价值发挥到最大，产生相互信任的良好的品牌关系。这样的平台生态是良性的，这样的产品会更有流量转化的商业化价值。