在我们的产品中空白页面出现的场景主要有五类:
●用户完成/清空了内容:收件箱、任务列表
●操作无结果:搜索无结果、识别无结果、筛选无结果
●出错页面:404、无网络
3.空白页面需要解决的问题
●告诉用户当前页面的信息状态/出现了什么问题
●告诉用户解决方案并引导用户进行操作
●传达品牌定位、格调和气质,与用户建立情感链接
二.需要空白页面的场景及设计思路
通过上方内容我们了解了空白页面出现的场景和可以解决的问题,接下来我们就看看在不同的场景下,空白页面的设计思路。
1,用户初次使用无内容
几乎所有的app都会出现这样的场景,它的设计小技巧有以下六个方面:
①告知用户当前状态
这个时候对用户来说最重要的就是要告知用户当前状态,我们也会遇到有些APP的空白页面什么内容都没有,这样很容易给用户造成困扰,不确定这个页面是什么情况,是网络不好没加载出来呢,还是就是没有内容,所以最简单的方式是通过文字进行最直观的表达
●无XXX--无内容/无结果
●暂无XXX--暂无评价/暂无订阅
●还没有XXX--你还没有自己的专题哦/居然还没有订单
●XXX是空的--收藏夹是空的
●尚未XXX—尚未开通专栏
有些APP为了增加趣味性,会将文案进行了调整,用一些简单、俏皮的语言进行表达,会给用户特别不一样的感觉,一般会出现在购物类、音乐类、社交类等生活娱乐类产品中。
●大神什么都没有赞过耶
●这个星球找不到
●购物车空空的
●居然还没有订单
●虾米也没有--虾米音乐
●空空如也,请请勤劳发帖--最右
●大神什么都没赞过哎~--最右
●与人互动,心自徜徉--最右
●有喜欢的记得告诉我--淘票票
②提醒用户这里会出现什么内容
●这里可以管理下载的音频--得到
●下载的音频会出现在这里--得到
●这里可以看到近7天你所赞过的图片哦--好好住
●Mark一下,养肥再看我的收藏--36Kr
③引导用户进行操作
初次进入的用户面对空页面,产品一方面需要让用户知道自己当前的状态或者之后这里会出现什么内容,另外很多页面其实是需要引导用户进行进一步的操作,增加数据,互动等信息,因为只有当用户与平台进行了交互,被留下来的可能性才更大,所以现在很多产品都倾向于在空页面引导用户进行操作。
具体的引导方式有两种,一种是通过文案进行说明,另一个更直接,会在页面上放置操作按钮或者链接,让用户直接到达操作页面。当然很多时候,这两种方式是结合在一起滴。
●这里需要你的态度--36Kr
●该合集下还没有缓存视频,在详情页可点击离线缓存按钮进行缓存--腾讯视频
●来发布第一个问题吧
●发表提问,大家帮你回答--咸鱼
●36氪还没有你的脚印,去首页看看吧--36Kr
●最近没有和好友互动过,快去找他玩耍吧
●点我发树洞什么是树洞--最右
●木有内容,快来补充吧--最右
●无法定位请在设置中打开“位置”开关,以查看附近听音乐的人
●还没有人留言,还不快来抢沙发--咸鱼
●收藏分类效率翻倍快来创建第一个收藏加吧新建收藏夹--马蜂窝
●你还没有发布过整屋案例先参观一下住友们的家--好好住
●暂无商家收藏你可以将喜欢的商家收藏到这里随便逛逛--美团
●你还没有清单,创建一个体验下吧创建清单--美团
●购物车还是空的快去抢几件折扣好货去抢购
●你还没有超赞哦去发布宝贝,获得更多超赞吧!发布宝贝--咸鱼
●暂时没给任何赞赏有时候,鼓励他人是一种心意--虾米
●居然还没有订单好东西,手慢无去逛逛
●你还未给喜爱的TA加油呢,快去送人气吧--腾讯视频
●竟然一个脚印都没有留下明知买买买是个泥坑,还是忍不住往里踩--淘宝
●购物车竟然是空的“再忙,也要记得买点什么犒赏自己~”--淘宝购物车
④增加情感化文案
马蜂窝
●这里暂时还没有内容,愿你在每一片开阔浩瀚的海面上,都有碧海蓝天收入眼底
●这里还没有内容,愿你在每一个薄暮晨光的早上,都能被阳光亲吻
●这里暂时还没有内容,愿你在每一片一望无际的田野上,清风都掺着淡淡麦香
●这里暂时还没有内容,愿你在每一条川流不息的道路上,都能捕捉到沿途的精彩
●这里暂时还没有内容,愿你在每一个夜深人静的晚上,都有一片好思绪
下厨房
●等候着第一封信美味调剂生活,订阅你最喜欢的美食栏目,将会在这里收到最新的高人气菜谱和美文去看看值得订阅的栏目--下厨房
●创建菜谱的人事厨房里的天使开始创建第一道菜谱--下厨房
TIM
●通过,让沟通更顺利用心倾听,真诚对话-TIM
●来到了内容的荒原暂无本类型文件--TIM
●邮件,让工作更专业收不到邮件?获取帮助开始写邮件--TIM
⑤操作引导
用户知道当前页面状态了,但是对于功能,用户可能不理解,或者不知道该怎么做,就需要给用户提供一个操作指导入口
⑥直接推荐内容
可以推荐内容或服务
●招聘类网站未收到邀请的页面,会在这里推荐简历置顶服务,告知用户使用这项服务后简历被查看的次数可大幅提升!
2.清空
这里需要给用户一些积极、肯定、鼓励的语言或语气:
●你已经读完所有消息了
另外,有些产品会在空页面说明自己产品的功能卖点,增加用户的好感度。
●您暂时没有可以清理的账号我们会定期帮你找出那些关店的,六个月没有看过的,以及你可能不喜欢的账号哦,很智能哒!
4.已结束/未开始/被删除
在购物类APP中经常会有优惠券发放、或者店面活动,当活动结束的时候要用空白页面承载信息告知用户当前状态,来缓解用户未得到的失落感
●手慢了,本店代金券被抢完--饿了吗
●本店打烊啦暂时不接受新订单--美团外卖
●优惠券正在生产中,敬请期待--36氪
●问题被删除
5.错误状态
通常有两种情况会出现当前页面,一种是网络连接失败,一种是页面不存在了/404页面。
①页面不存在的话只需要给用户说明当前页面不存在了或访问不到,设计一种有趣好玩的情感化场景来环节缓解用户的焦虑感。
②网络连接失败的话,有3项信息是可以给到用户的,一是告知用户当前连接失败,二是给用户解决问题的途径,三是给用户反馈的途径
告知/引导
●对不起,您访问的页面已不存在
●网络不给力哦点击页面再试试吧~--爱奇艺
●网络未连接,请检查网络设置刷新重试--爱奇艺
●视频加载失败,请稍后再试点击重试--腾讯视频
●当前网络状况复杂,请尝试使用其它查看连接失败的原因及解决方法
●网络不给力,请稍后重试重新加载--手机百度
●网络请求失败,请点击重试刷新试试
反馈
●网络竟然崩溃了别紧张,试试看刷新页面报错/刷新--淘宝
6.搜索/筛选无结果
对用户来说出现搜索无结果的错误类型可能会比较多,一个可能是数据读取有问题可以引导用户再次操作;一个可能是因为关键词不对,需要更换关键词;也可能是因为筛选条件太多,没有交集;或者是当前产品中就是会缺少某些内容,需要用户辅助进行内容的补充完善,所以要根据产品经常存在的问题,来决定搜索无结果的内容。