空页面不是什么都没有的页面啦!

来自:厚朴HOPE工作室(微信号:Hope-Studio),作者:一瓦

什么是空页面

处于空状态的页面也叫空白页面、置空页面、缺省数据页面或者空页面。


bilibili 无网络的空页面


相比与首页、列表页和详情页,空页面一般是在项目设计的最后阶段才进行考虑的。但是空页面对于引导用户起着重要作用,也是一个与用户建立情感化链接,强化品牌形象的好机会。



最基本的空页面包括非交互式的图像简短的文字说明,它们需要做到:

1、  告诉用户当前页面的信息状态/出现了什么问题

2、  提供给用户解决途径并引导用户进行操作

3、  传达品牌定位和气质,与用户建立情感链接


也就是要达成三个目标:

教育(告知)用户、引导用户、取悦用户


例如

淘宝购物车空页面

1、“购物车竟然是空的”——当前页面的信息状态。

2、“你可能还喜欢”——引导用户进行操作。

3、“再忙,要记得买点什么犒劳自己”——与用户建立情感链接。



空页面出现的场景


1、  初次使用的场景:空白的收藏页、购物车、浏览记录、关注页等

2、  完成或清空内容:收件箱、任务列表等

3、  操作无结果:搜索无结果、识别无结果、筛选无结果

4、  出错页面:页面不存在、无网络


初次使用的场景

1

说明页面,并引导用户添加内容

当当的商品订单空页面

咸鱼的关注空页面



2

使用入门内容填充空页面,帮助用户熟悉应用和当前页面的操作

1、 添加入门内容的空页面适合存储内容(如书籍或音乐)或创建模板内容(如笔记或文档)的应用。

2、  突出展示主要功能

3、  用户能够删除和替换入门内容

滴答清单 空页面的入门内容


完成/清空内容


评论页面、消息页面、任务管理页面等,在当前任务处理完成后,空页面需要给用户适当的鼓励。


滴答清单 无任务空页面



操作无结果


搜索无结果、识别无结果、筛选无结果


bilibili 搜索无结果


若是识别搜索无结果,

可以在空页面提供最佳匹配的内容。


形色 识别无结果

(识别我的市松小雏当然无结果啦~)


出错页面

1

页面不存在

当前页面不存在了或访问不到,设计一种有趣好玩的情感化场景可以节缓解用户的焦虑感。

站酷 404空页面


2


网络连接失败


此时可以提供以下信息给到用户:

1、告知用户当前连接失败

2、提供给用户解决问题的途径

3、提供给用户反馈的途径


这三项信息的重要性是递减的,一定要告知用户当前连接失败,最好能够提供解决问题的途径,如果有必要则需要给用户反馈错误的途径。


只告知用户当前连接失败

夸克浏览器 网络连接失败/页面不存在


同时提供给用户解决途径

淘宝 提供刷新页面功能


Chrome 经典的无网络小游戏和无网络解决途径


空页面可以很强

空页面还可以埋彩蛋,是情感化设计的好帮手~

"No fonts found!"


END


参考文章

《你所忽略的置空页面设计法则》

http://www.xueui.cn/experience/app-experience/design-rule-of-empty-page.html

Material Design

https://material.io/design/communication/empty-states.html#alternatives

推荐↓↓↓
Web开发
上一篇:这可能是我用过最“强大”的API 下一篇:Nginx的几个常用配置和技巧