新手完全自学UI设计第七期：空状态页篇

新手完全自学UI设计第7期今天给大家带来的是APP空状态页的相关介绍，APP空状态页也叫做空白页、缺省页...

新手完全自学UI设计

第 7 期

今天给大家带来的是APP空状态页的相关介绍，APP空状态页也叫做空白页、缺省页、零数据页，是指移动应用界面在没有内容或数据时呈现出的状态。新手UI设计师通常会将全部精力集中在怎样更好的呈现内容和数据上，只有开发人员才会比较频繁的与这类相对“意外”的状态打交道。所以，APP空状态页是新手UI设计师比较容易忽视的一个界面类型。

要想打造完美的整体体验，作为设计师，我们不能放过任何一个用户有可能接触到的界面状态。

我们基本都是在主要流程界面的设计工作完成之后才会回过头来考虑完善一下，因为从表现上来看，空状态给人的感觉就是临时性的，有些微不足道。

不要被空状态的名字所迷惑，实际上，这个状态在引导性、愉悦性和保留用户等方面的潜质对于产品体验在细节当中的成败有着不可忽视的作用。

那么什么情况下会出现APP空状态页呢？

从产品体验的角度来，空状态大体可以由以下三类情况触发：

A、产品初体验

用户第一次在使用你们的产品的时候因为很多功能都还没开始使用，这时候并不是所有的界面都是有数据的，所以会出现空状态页。比如，你在使用一个社交类的APP，刚开始使用的时候聊天列表界面肯定是空的。

B、无数据或者用户清空数据

用户在使用产品之后有可能会清空数据，这时候会出现空状态页。比如邮箱客户端，你将所有的邮件删除之后，会出现空状态的页面。

C、出错、失败

类似于网页的404页面，提示用户出错了。比如，很多APP在无网络下的提示界面。

所以，针对以上三种情况，空状态页有三种设计原则：

A、没有数据时，引导用户创建内容。

B、思考目标用户在使用产品时的心理与目标。

C、发生错误时，不要让用户进一步焦虑。

至于具体怎么设计，现在最流行的方式是插图加一句话的方式。当然，也可以是简简单单的一句话加一个按钮。设计的时候考虑以上三条原则，设计起来就比较简单。对于新手朋友唯一的难点可能就是插图怎么画，这里可以教大家一个图标组合法，在网上找两个扁平的图标，然后组合在一起产生一种新的意义，比如下图这样：