小白自学APP设计:APP空状态界面设计教程【一】

昨天25学堂分享了一篇APP设计术语解读:什么是APP空状态界面设计,在文章中,主要跟大家介绍了什么是app的空状态,空状态出现在app哪些情况和场景当中。

当我们熟悉和理解了这些APP空状态相关知识和术语之后,才能着手设计这些看似轻微的app空状态界面设计。

这节课主要讲解如何来设计APP空状态界面。算是一篇小白自学APP设计的教程。

APP空状态设计足够优秀的话可以提高用户体验,使得用户留存率增加。这也是25学堂为什么要跟大家谈谈APP空状态界面设计的原因。

 

第一步:善于发现和积累APP空状态界面

学会和发现现有APP设计当中的一些常见的APP空状态界面设计灵感。下面就是来自手机浏览器当中的一些空状态常见界面效果图。  这些有爱的设计可以激发我们的设计灵感。

app空状态设计

看到上面这些,你的脑海当中有没有回忆出一些有意思的空状态的场景呢?

如果没有,可以跟随我们来看下这几个经典的APP空状态界面设计。

 

第一种:有权限控制的。比如需要登录或者注册才能看到的一些app界面。

需要登录才能看到的界面APP设计

25学堂点评:这一种APP空状态设计:先提示,然后告诉你点击登录按钮登录。非常卡通可爱的界面设计。对于这样有权限控制的app界面设计,需要非常的小心和用心。这个细节处理不好,损失的用户转化率是很大。如果你只是弹出警告层。这是粗鲁的表现方式。

多看APP的空状态设计学习

25学堂点评:这一种是比较直接的告诉你暂时没内容,需要进行下拉操作才能添加。  这也是非常棒的引导性app空状态设计。

QQ空间APP添加特别关心好友界面设计

25学堂点评:这一种是更高级的一种空状态APP设计。首先告诉你没有特别关心的好友,在界面当中显示你有特别关心好友的界面和假想的状态。 第三步就是引导你去添加。

非常的完美的APP空状态界面设计案例。

 

第二种场景:断网的时候的APP空状态界面设计。

网络错误的app界面设计

25学堂点评:这是一种APP的设计风格。学会善于app的动画和企业logo元素来过渡这样的场景界面。也是非常形象的表达。

 

app断网界面设计

app断网界面设计2

以上2个案例都是非常形象的表达了无网络的时候,提示用户采用刷新或者重新联网的操作。而且把网络的标志设计的非常逼真。场景也很合理。都是我们app设计师需要考虑的一个因素。APP使用场景的设计。

以上2种场景都是 在APP产品的初体验中,空状态的首要目标就是教育引导用户,帮助用户快速了解产品的首要功能跟操作方式,避免用户在操作过程中产生挫败感等负面情绪。

未完待续.....    谢谢大家对25学堂的支持和关注!

 

每天更新,
全站高品质素材免费下载!