其它优秀文章推荐:

创作能效:提升设计效率的王道之术!

海报总是不会设计?手把手教会你 !

海报版式总结:如何设计竖版海报版式?

如何将参考转化为自己的设计?

海报设计:优秀创意海报设计讲解

万能设计公式,教你设计商业海报

做了五年设计,还是这个排版技巧最实用

设计与格式塔心理学

三步法 – 助力精准提取设计思路

什么是空状态?

空状态是一个经常被忽略的页面。顾名思义,空状态就是当页面没有内容可以展示,数据为空白时的页面。例如我们常见的:网络无法连接、搜索无结果、没有关注的人等页面都属于“空状态”。

空状态重要吗?

很多人觉得空状态很简单,且曝光率不高,不需要特别设计。但用户面对空状态时往往很容易产生负面情绪,这时更需要合理的引导、情感化的安抚来提升用户体验。

When you start your next design project,keep this principle in mind:people will forgive shortcomings,follow your lead,and sing your praises if you reward them with positive emotion.
Aarron Walter,”Design for Emotion”

用户会原谅你产品的不足,跟随你的引导,甚至传播你的产品,只要你时刻让他们感觉到产品传达的正面情绪。

空状态的场景分类

APP UI:空状态设计(404页面如何理解?)

①初体验→引导创造内容

APP UI:空状态设计(404页面如何理解?)

①初体验→新功能介绍

APP UI:空状态设计(404页面如何理解?)

①初体验→系统推荐/了解偏好

APP UI:空状态设计(404页面如何理解?)

①初体验→默认内容填充

APP UI:空状态设计(404页面如何理解?)

①初体验→无关系链,引导加好友

APP UI:空状态设计(404页面如何理解?)

①初体验→未开启权限

APP UI:空状态设计(404页面如何理解?)

①初体验→未注册登录

APP UI:空状态设计(404页面如何理解?)

②无结果/信息→搜索无结果

APP UI:空状态设计(404页面如何理解?)

②无结果/信息→无消息

APP UI:空状态设计(404页面如何理解?)

②无结果/信息→无收藏

APP UI:空状态设计(404页面如何理解?) ②无结果/信息→空购物车

APP UI:空状态设计(404页面如何理解?)

②无结果/信息→无订单

APP UI:空状态设计(404页面如何理解?)

②无结果/信息→无优惠

APP UI:空状态设计(404页面如何理解?)

②无结果/信息→无评论

APP UI:空状态设计(404页面如何理解?)

③完成任务→清空待办事项

APP UI:空状态设计(404页面如何理解?)

③完成任务-→处理完邮件消息/读完书

APP UI:空状态设计(404页面如何理解?)

④出错→网络无连接

APP UI:空状态设计(404页面如何理解?)

④出错→页面出错

APP UI:空状态设计(404页面如何理解?)

空状态的作用

是否提供操作入口,可以根据具体场景需求来设计。

APP UI:空状态设计(404页面如何理解?)

 

①解释说明

一般用于用户不需要主动进行任何操作的情况,如无消息、无邮件等,告知现状即可。

APP UI:空状态设计(404页面如何理解?)

②解释说明+操作入口

给予清晰地指示,提供CTA按钮或指引箭头,引导用户进行下一步操作

APP UI:空状态设计(404页面如何理解?)

空状态的一些其他玩法

APP UI:空状态设计(404页面如何理解?)

①情感化表达→缓解负面情绪

Yelp:

在获取用户位置失败的时候显示了一个忍者恐龙,并且问用户“你是忍者吗?找不到你的位置呢”,在表达错误信息的同时,可能还会获得用户的会心一笑。

在页面出错时,用户难免会产生挫败感,此时可以通过一些有趣的图案或者文案,缓解这种挫败感。

APP UI:空状态设计(404页面如何理解?)

①情感化表达→鼓励积极行为

Gmail:

用户如果处理完了邮件,邮件列表为空时,会出现一个微笑的太阳,鼓励用户”Please enjoy your day!”

当用户完成任务后,是一个拉近用户与产品之间的感情的好机会,让用户知道通过自身努力,完成了一件很棒的事,值得庆祝与鼓励。

APP UI:空状态设计(404页面如何理解?)

①情感化表达→鼓励积极行为

MailChimp:

用户每次完成发送邮件时,吉祥物Fred会举起手来和用户High Five,整个交互引导像是在和用户一起庆祝工作完成那一刻的成就感。

APP UI:空状态设计(404页面如何理解?)

①情感化表达→引发思考

Clear:

当用户删除所有list或新建一个空白项时,会展示一些有意思的名人名言,让用户在空状态有所思考。

APP UI:空状态设计(404页面如何理解?)

②品牌宣传

Dropbox:

当分享文件链接失效时,错误页面会展示一个空心的品牌LOGO

APP UI:空状态设计(404页面如何理解?)

②品牌宣传

Tiffany:

结合品牌特点,通过适当的相关联想进行设计。比如Tiffany的出错页面,就结合了珠宝品牌的特色,用了一个空戒托的隐喻。

APP UI:空状态设计(404页面如何理解?)

③提供新的任务

NotFound:

利用网站的404页面来帮助找回那些走丢的人。把消失的界面和消失的人结合,场景很契合。用户被公益举动吸引的同时,也转移了对错误页面的注意力。

“每年都会有上千孩子走失。安装我们的应用,你的404页面就会自动加装一张走失孩子的照片。让我们一起携手送他们回家吧。”

APP UI:空状态设计(404页面如何理解?)

③提供新的任务

Google浏览器:

谷歌浏览器对于空页面的处理手法是一个恐龙游戏,通过游戏的形式缓解用户对于断网等类似结果的负面情绪。

APP UI:空状态设计(404页面如何理解?)

空状态的图案设计

建议与产品的风格调性保持一致。

APP UI:空状态设计(404页面如何理解?)

①图标(线性)

APP UI:空状态设计(404页面如何理解?)

①图标(面性)

APP UI:空状态设计(404页面如何理解?)

②插画(物+场景)

APP UI:空状态设计(404页面如何理解?)

②插画(单人+场景)

APP UI:空状态设计(404页面如何理解?)

②插画(多人+场景)

APP UI:空状态设计(404页面如何理解?)

③品牌吉祥物(人物占比大,结合表情动作)

APP UI:空状态设计(404页面如何理解?)

③品牌吉祥物(人物占比小,结合场景)

APP UI:空状态设计(404页面如何理解?)

④动画

APP UI:空状态设计(404页面如何理解?) APP UI:空状态设计(404页面如何理解?) APP UI:空状态设计(404页面如何理解?)

总结

1.初体验时,可以帮助用户了解功能,引导用户创建内容。
2.遇到错误时,想办法缓解负面情绪,并尽可能提供解决方法。
3.完成任务后,可以给予正面积极的鼓励。
4.空状态也是情感化设计、品牌宣传的好机会。

最后来一波不错的案例参考~

APP UI:空状态设计(404页面如何理解?) APP UI:空状态设计(404页面如何理解?)

参考文章及推荐阅读:

《Why empty states deserve more design time》

《Designing For The Empty States》

《有哪些好的「空状态」设计?》

《UI界面中的情感化设计》

APP UI:空状态设计(404页面如何理解?)



属性标签: , ,

欢迎留言

页面生成消耗的时间 0.517 秒,此页面一共查询了 113 次数据库!缓存时间:2020-07-16 12:07:22你的IP为:58.211.2.96