浅析如何设计交互缺省页

缺省页指页面的信息内容为空或信息响应异常的状况；设计缺省状态的作用除了是鼓励用户在异常边界状况的操作提醒，同时也有安慰用户体验情绪的重要情景；更重要的是为界限场景打造出良好用户体验。通过预测缺省状态形成的机理，从而更为精确的掌握交互缺省页的设计方法。1.哪些状态必须缺省页

提到缺省页面可能是设计师最容易忽视输出的范围，可能等到对接的开发同学提出来，“这个页面，如果没有数据的之后，该如何显示啊？”。为了更好的把控设计缺省页交互状态，首先要知道缺省页出现的原理。App页面内容（比如图片、文字、数据字段等等）都是请求服务器数据，顺利返回后，正常显示到用户端页面。在知道清楚基础推动逻辑后，就可以开始梳理整理缺省状态的设计模式。

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

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

系统层：指当客户请求服务器时，返回提示请求提交失败，并检查到失败理由时呈现的页面；比如：加载失败、服务器异常、无网络等；页面通常会有再次请求的快捷按钮。文案上可做失败理由的细分描述，也可节省费用使用网络异常的统一文案。

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

空白层：请求服务器数据成功，但显示无数据；内容页在无数据时必须缺省状态进行表达；比如：页面空数据、搜索无结果等。空白页面属于正常网络显示画面，所以通常会在缺省页附带有相同属性模块的客户引导，争取顾客重复消费的目标，满足客户的操作的诉求。

最终按照每个不同的缺省状态，梳理产品相对应的场景。逐一按照画面特征来设计页面内容。那缺省页的设计有什么表现方式呢？

2.缺省页的体现方式

没有用心设计的缺省页无法给客户带来良好用户体验，并也许给客户带来困扰，如下图：某小众直播系统的拉新邀请页面，无邀请记录状态下没有任何有效反馈信息，用户不能明确得知究竟是网络问题而是账号同步错误亦甚至是没有一次邀请。正确的缺省页设计内容理应确立表达出合乎用户心理预期的视觉画面表达（图形）；和使用易理解和词汇恰当的表达当前的异常状况（标题）或者于鼓励客户解决难题的文案描述。

图5缺省页的出错示范

1视觉图案+文案此类缺省设计方式通常应用于表达系统性无响应或初始空白态的缺省场景。视觉图案通常使用app吉祥物或主风格延展出的icon或插画来表示缺省状态；文字：通常为“标题”或“标题+描述”结构；标题一般是表达发生缺省的缘由；叙述文案则表明结束缺省状态的缓解方法，如“请检查网络是否顺畅”等等。

2视觉图案+文案+引导

这些缺省设计方式通常采用于必须客户引导操作来超过业务目标的缺省场景。在视觉图案+文案的基础上加入鼓励模块，主要作用于防止用户在数据边界的状况下，会由于未能超过操作目而增加的跳出率。引导模块的内容包含：相似属性内容，相似行为目标按钮或解决缺省状态操作按键，加入引导，用户进行某项行为以及认知这些信息，对于功能的教学和使用频度的提高有侧重要作用。引导模块的方式也有日新月异，逐渐成为新用户业务引导的作用，不仅限于页面平铺，也可以做成固定气泡微动效，例如：抖音的发布缺省页。

3.缺省页的设计要点

缺省页除了常规的提示型设计方式，还有许多其它的设计方法，帮助客户体验在遭遇困难，更好地安慰用户的心情。这些设计方法有些是取代原本的缺省内容，让顾客有更多地消费空间与深度。有些是拓展缺省状态的补充内容，让顾客不容易跳出页面，增加客户的消费时长。具体如下：

1使用推荐内容

缺省状态中的空白层相当制约边界状况的用户体验，提出一种假定，是否可以刻意推荐同样属性的内容呢？这种的界面既不会变得苍白无力又可以留住用户的切记力。相似性的内容也可以缓解用户目标的迫切性。所以说，这种方式比较合适内容型产品中使用。例如：新客户在开启电商产品的网购车之后，理应是空白无消费行为的操作记录。那么系统方通过客户画像与热门排名算法推荐了一个商品流。这样可以缓解用户无目标性挑选的诉求，增加消费时长。至于产品即便确定客户画像的推荐算法，可以借助获取第三方注册的个人基本数据然后，才给我推荐了数据库内相对应标签的热门商品，这样推荐的准确度也会高些。

2.使用缓存

是否使用缓存内容替代缺省状态？按照产品特点来判定，工具类、金融类等同类型产品不合适使用缓存；由于客户交互操作的数据需要维持即时性与真实性。而内容型、电商类等类别产品适合使用缓存来取代缺省状态；原因：用户消费内容的转换模式是先消费后转换的行为特征，不存在系统操作门槛，且缓存内容可以替代产品的缺省状态，安抚用户操作失败所带给跳出率偏低的风险。

3.情感化表达

当缺省页给到客户时，通常省时省力的作法就是老老实实告诉用户当前的状况，最多配上一个带有通识性的黑色icon。但是，秉持着以用户体验为己任的时代，我们虽然可以把缺省内容表达得非常生动形象一些。在此处会加入一些情感化的表达，而不是无非也是做到准确的目标而已，比如加上可爱的插图故事，或者把文案写得非常拟人化、喜剧化一些。这些配图在让用户知道当前的状况的同时，往往也能引起用户会心一笑，从而填补空白页面带来的失落感或者可以带来用户一些正面的情感。如下图：

4.提供新任务

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

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

结语：作为设计师有时会看到需求方说法“这种很少发生的状况，我们可以干脆不管它。”但是细节见真章，所有优秀的感受设计都需要照顾到方方面面的缺省情况。让每个客户的流量价值发挥到最大，产生互相认同的良好的品牌关系。这样的系统生态是良性的，这样的产品会更有流量转化的商业化价值。