UI界面设计 ·

APP设计术语解读:什么是APP空状态界面设计

有时候设计师乃至所有参与移动APP开发的人员,在和APP胶着之后往往陷入了一种假想的繁忙之中,却忘记了初始的空状态,空状态至关重要,空状态决定了用户的第一印象。

 

APP设计专业术语解读之:什么是空状态

空状态,或称零数据状态。

“空状态”是指移动应用界面在没有内容或数据时呈现出的状态。长久以来,空状态界面一直是被忽视的,因为设计师们通常会将全部精力集中在怎样更好的呈现内容和数据上,只有开发人员才会比较频繁的与这类相对“意外”的状态打交道。

如下图就是比较简单的APP产品空状态界面原型设计。

APP产品原型空状态设计

从这一点可以看出,产品经理也是必须重视APP空状态界面设计

 

也正是因为这样的原因,空状态界面留给用户的印象大体上就是晦涩难懂的文案以及缺乏视觉设计风格。

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

我们基本都是在主要流程界面的设计工作完成之后才会回过头来考虑完善一下,因为从表现上来看,空状态给人的感觉就是临时性的,有些微不足道。不要被空状态的名字所迷惑,实际上,这个状态在引导性、愉悦性和保留用户等方面的潜质对于产品体验在细节当中的成败有着不可忽视的作用。

APP空状态设计

 

空状态通常会在初次使用、完成或清空内容、软件出错等情境下出现。

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

A、产品初体验

B、成功完成目标任务

C、出错、失败

 

你的App在这三类情况下的表现可以将用户与产品的关系推向两个方向:

用户参与度和忠诚度得以提升并保持稳定

用户暂时或永久性的放弃这款产品

目前很多人都喜欢第一个方向,但多数产品却是在走着第二条路,这其中的决定性要素之一,就是你在空状态这个貌似不起眼的地方花费心思的多少。

app消息推送

 

25学堂的也可以告诉大家,空状态界面设计也是一种提高APP留存率和转化率的一个因子。

因为这个环节相对特殊,某种程度上属于用户引导机制的一部分。

 

1、初次使用APP   

APP在初次加载时留给用户的第一印象是非常重要的。你的一部分用户也许已经通过其他同类产品建立起了心智模型及预期,他们会非常敏感的从一开始就将你的应用与他们已经熟悉的那些进行对比;而另外一些用户可能完全没有同类产品的使用经验,他们就像一张空白的花布,等待着惊喜或失望。无论哪种情况,差劲的第一印象所造成的损害都是很难弥补的。

mobile-app-ui-ux-empty-state-design

所以,APP刚刚推出的时候,必须重视一些出现空状态的情况的设计。尽量减少用户对使用APP的抵触心理。就好比我们网站的404错误页面。或者没有网络的情况下如何使用等。

 

2、没有数据的显示和用户清空数据之后的显示界面

这样的情况,很多种创意的APP设计。比如邮件APP设计。

APP邮箱空状态设计

Gmail则在这种最基本的做法之上又进了一步,他们的设计师在空收件箱页面中放了一个微笑着的太阳,通过对人类情绪的模仿,为产品赋予了人格,使用户从情感上感受到愉悦。而且他们在文案的处理上也很贴心:“你当前没有邮件要处理了,开心的享受这一天叭!”

如果是另外一种情况,比如界面是空白的,里面啥提示和文字都没有。这个时候用户心理没有得到积极的回馈。会很心慌。也很容易产生疑虑:我是否已经真的清空了收件箱,还是我的网络连接有问题?或是别的什么状况导致我看不到收件箱里的其他邮件?任何一点疑虑都会导致认知上的负担,进而影响产品的整体体验。

 

3、出错的时候出现

这种情况很多见。也是我们APP设计师要主动去这样的APP空状态界面。

“出错”多数是由网络连接的中断引起的。可以试着在这种情况下提供一些更有用的或是更具亲和力的内容,而不是一堆丑陋的出错信息。让用户在非常规用例中看到你的设计,他们就会感知到当前的状况是在可预计范围之内的,从而放松下来。

别让我思考 设计书籍推荐

 

留意那些用户无法获取任何内容的状态,给用户某种形式的反馈我们进一步将本文内容抽象为三条简单的设计原则:

1、没有数据时,引导用户创建内容

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

他们是否会频繁的清空数据?如果是的话,进行相应的设计;你甚至可以准备一些不同的空状态内容来随机展示。

3、发生错误时,不要让用户进一步焦虑

通过你的设计弱化用户心中的负面感受,降低他们对坏状况的感知。

 

后续,25学堂继续跟大家分享一些比较优秀的APP空状态界面设计欣赏。这样学习更加直观。

记住:空状态的UI设计是一个细节的设计,足够优秀的空状态设计可以提高用户的体验度,所以不要因为空状态属于小细节而忽视它的作用。

参与评论

  • 含蓝

    参考参考,我认为很好,大家说说

    3年前 (2015-12-21)
    回复
    回复含蓝
  • 含蓝

    参考参考,我认为很好,大家说说

    3年前 (2015-12-21)
    回复
    回复含蓝
  • 111

    说 了那么多,还是不知道怎么设计啊

    3年前 (2015-12-18)
    回复
    回复111
  • 25学堂

    如何设计第一节课:http://www.25xt.com/appdesign/10060.html

    3年前 (2015-12-18)
    回复
    回复25学堂
  • 25学堂

    谢谢阅读,这一教程只要是告诉大家什么是APP空状态界面设计,具体怎么设计请看下一节教程

    3年前 (2015-12-18)
    回复
    回复25学堂
  • 111

    说 了那么多,还是不知道怎么设计啊

    3年前 (2015-12-18)
    回复
    回复111
  • 25学堂

    如何设计第一节课:http://www.25xt.com/appdesign/10060.html

    3年前 (2015-12-18)
    回复
    回复25学堂
  • 25学堂

    谢谢阅读,这一教程只要是告诉大家什么是APP空状态界面设计,具体怎么设计请看下一节教程

    3年前 (2015-12-18)
    回复
    回复25学堂