缺省页怎么设计？

本文简述缺省页的样式类型及运用的场景

仅个人的见解与经验

什么是缺省页及作用？

缺省页是页面无内容或者异常的状态时展示的页面。设计缺省页作用是设计更好的用户体验，即在异常状态下的给予用户的友好的提示及安抚用户情绪。

根据异常的场景给予相关元素的缺省页，在产品页面相对应的场景特点来设计页面内容。

首先说缺省页的场景及原理

缺省页的运用的场景：

例如在页面无数据空白的页面时，用户进入后不知道是没加载出来，还是没有数据，这个时候就需要缺省页的提示啦。

缺省状态包括：

系统类

信息类

空白类

系统类：用户请求服务器给予返回值失败，并检测到具体原因呈现成缺省页，最好不要出现代码的返回值

常见的页面有：加载失败、服务器异常、网络异常 、无网络、信号弱等提示，一般页面会有重新获取等按钮，方便用户再次点击，缺省页可简述失败原因也可统一文案为网络异常。

信息类：用户请求服务器给予返回值成功，但数据异常情况的页面

数据异常时常见的页面有 ：内容已删除、商品已售空、 内容不存在、无权限等。也可在列表显示已抢完、已下架等字样。

空白类：用户请求服务器给予返回值成功，但无数据页面，会需要缺省页来表达

常见的页面有 ：搜索无结果、无消息/无通知、页面无数据等；一些消费型产品无结果时下方可相似属性产品的来引导用户进行消费的目标。

 

缺省页的样式形式：

产品相对应的场景。根据场景特点来设计页面内容，合理的图案、合理的提示文字信息来解决用户的疑惑

图1：进入页面根本不知道什么情况，无网络？无数据？登录失败？未加载出来？

缺省页的表现形式为4种

第1种：图形+文字信息

这种形式一般运用于系统性的响应或无内容的场景

图形：图标、插画来表达缺省；文字信息为或者“标题+描述”的结构表达缺省的原因

如：您还没有发表过帖子，如点到“我回复的”的模块无内容，一定是“您还没有回复帖子”。随意原则就是标题加上描述内容即可

第2种：图形+文字信息+引导

一般应用于需要引导用户操作的场景，用户也可以在无数据等情况可以达到或提升操作的目的

如：抖音点击无评论的视频时，会直接进入评论的输入页面

第3种：图形+文字信息+按钮

一般应用于引导用户操作的场景，用户也可以在无数据等情况提高跳出率，用户可以快速操作

如：对于一些关注或者是订单类无数据时页面，可以增加“去逛逛”“去看看”等按钮

第4种：图形+文字信息+推荐内容

提升用户体验，帮助用户在遇到困难时，更好地安抚用户的情绪。让用户有更多地消费空间与深度。让用户不跳出页面就可以看到更多内容，增加用户的消费时长和注意力。

例：在keep没有活动时，下方增加推荐的课程，可以增加用户的浏览及消费

提升缺省页的方式方法

使用推荐内容

在无内容时增加推荐的数据，最好推荐数据库内热门商品，根据用户的浏览记录更加准确的推荐相关内容

增加缓存的方式

缓存内容代替缺省页。适合部分的产品，如购物类、音乐类等比较适合，不适合实时类新闻、金融等。安抚用户操作失败等情况所带来跳出率过高的风险。

图形表达准确

在缺省页面上，简单粗暴的就是放一个表达强烈的灰色icon，凸显当前页面的状态。有精力和时间的话还是多处理细节，一些精美活泼生动的插画，让用户更加放松，心情愉悦。

如图1：私信无数据时，一个空盒子配上文字“您还没有聊天记录”

图2：根据企业的企业色和吉祥物精美的画出相关的缺省图案

结语：希望设计师们认真的设计相关视觉效果及用户体验，细节才是最根本，让每个用户的认可我们的产品！

如果你看懂了我写的，请记得点赞关注哟~~~