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

缺省页指页面的信息内空或信息响应异常的状态；设缺省状态的作用不仅引导用户异常界状态的操作提示，同时也安抚用户体验情绪的重要场景；更重要的是为边界场景营良好户体验。通过分析缺省状态产生的原，从而更为准确地把握交互缺省页的设计原则。

哪些状态需要缺省页

谈到缺省页面能是设计师最容易忽略输出的范围，能直到对接的开同学提出来，「个页面，果没有数据的时，该怎么显示啊？」。为更地把控设计缺省页互状态，首先要缺省页出现的原理。App 页面内容（包括图、文字、数据字段等等）是请求服务器数据，顺返回，正常显示到客户端页面。在清楚基础现逻辑，就以开始梳理、整理缺省状态的设计思路。

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

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

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

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

空白层：请求服务器数据功，但显示无数据；内页无数据时需缺省状态行表达；例如：页面空数据、搜索无结果。空白页面属于常网络显示场景，所以一般会缺省页相似属性模块的用户引导，争取用户重复消费的目标，满足用户的操作的诉求。

后根据每不同的缺省状态，梳理产品相对应的场景。逐一根据场景特点设页面内。那缺省页的设哪些表形式呢？

缺省页的表现形式

用设的缺省页无法给用户良好用户体验，并可能给用户困扰，如下图：某小众直播平台的拉新邀请页面，无邀请记录状态下任何效反馈信息，用户不能明确得知到底网络问题还账同出错，亦或者一次邀请。确的缺省页设内理应明确表达出符合用户理预的视觉场景表达（图形）；使用易理解语法恰当表达当的异常状态（标题）甚至于引导用户解决问题的文案描述。

△ 图5 缺省页的错误示范

1. 视觉图案+文案

此类缺省设形式一般应用于表达系统性无响应或初始空白态的缺省场景。视觉图案一般使用 app 吉祥或主色调延展出的 icon 或插画表示缺省状态；文字：通常「标题」或「标题+描述」结构；标题通常表达出缺省的原因；描述文案则明结束缺省状态的解决办法，如「请检查网络否顺畅」 。

2. 视觉图案+案+引导

此类缺省设计形式一般于需要户引导操作来达到务目标的缺省场景。在视觉图案+案的基础上入引导模，要作于避免户在数据边界的状态，会因为无法达到操作目的而的跳率。引导模的容包括：相似属性容，相似行为目标按钮或解决缺省状态操作按钮，入引导，户进行某项行为或者感知某些信息，对于功的和使频率的升有着重要作。引导模的形式是日月异，逐渐变成户务引导的作，仅限于页面平铺，可做成固定气泡微效，例如：抖音的发布缺省页。

缺省页的设计技巧

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

1. 使用推内容

缺状中的空层非常响边界情况的用户体验，提出一种假，是否可以刻推相同属性的内容呢？这的界面既不会显得苍无力可以留住用户的注力。相似性的内容也可以解决用户目标的迫切性。所以说，这种方法非常适内容型产品中使用。例如：新用户在开商产品的购物车候，理应是空无消费行为的操作记录。那方通过用户画像热门排行算法推了一个商品流。这可以解决用户无目标性挑选的诉求，增加消费长。至于产品如果确定用户画像的推算法，可以通过获取第三方登录的个人基本数据之后，才给推了数据库内相对应标签的热门商品，这推的准度也会高些。

2. 使用缓存

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

3. 情感化表

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

4. 提供新任务

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

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

结语：作为设计师有时会听到需求表述「这极少出现情况，我们可以暂不管它。」是细节见真章，所有优秀体验设计都必须照顾到方方面面的缺省况。让每用户的流价发挥到，产相互信任的良好的品牌关系。这样的平台态良性的，这样的产品会流转化的商业化价。

欢迎关注「TCD设计心」公众号：