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

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

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

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

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

 

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

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

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

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

 

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

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

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

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

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

 

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

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

 

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

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

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