恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
想留住用户?从做好空状态开始
0.0°
2019-04-03 原创文章 教程 举报 690 5 2 0

一篇教会你:空状态设计全面指南

Image title

Image title


空状态(Empty states)或者被叫做缺省页,作为一个只有2%的用户才能看见的页面来说,经常是不被设计师所重视的。


很多人认为空状态就是告诉用户这个页面是空的,可有可无,并不重要。然而不然,当用户在使用产品时出错,在没有良好引导的情况下,可能导致用户感到挫败从而直接流失,这是我们不想看到的!


近几年,随着互联网行业的崛起,众多优秀的App纷纷上架,在相似的产品中,用户选择谁、淘汰谁,如何脱颖而出,在这竞争激烈的市场中存活下去?这是每个人都在思考的问题。


我们看到越来越多的App致力于通过空状态提升品牌的体验,以同理心营造氛围以细节留住用户。


Image title


一、空状态的场景分类:空状态一般何时出现?出现时用户的情绪如何?我们应该如何解决?


二、插画在空状态中的意义:目前,单独的文字描述,已不能满足用户的需求。插画在空状态的使用中越来越广泛。


三、空状态的四大功能:用户引导、品牌展示、调动情感、解释说明


四、空状态在实例中的运用:结合实例,探索功能与插画的优雅结合


Image title


哪些场景会出现空状态?我们又该如何告别空空如也的尴尬?


经过大量的体验与调查,归纳总结了空状态的场景,可分为三大类:产品初次体验、操作结果反馈、网络出现故障。


Image title


一、产品初次体验


产品初体验时出现的空状态又分为三种情况。


(1)初次启动浏览界面

对于初次打开一款App的用户来说,产生空状态是再自然不过的事啦。此时空状态的目标是引导用户操作,让用户充满参与的动力。


Image title


(2)用户创造内容的界面


需要用户亲自添加的内容,比如评论、图片上传等,这是用户产生的内容。此时,页面就需要吸引用户添加内容。


Image title


(3)每次启动后产生的界面


是指在退出界面后又重新进入的界面。目前大多数界面都使用缓存的方式,把之前浏览的内容储存下来,将空状态消灭。特别是feed流页面多采用此方式,比如微信朋友圈、今日头条等。


Image title


二、用户操作结果反馈


这里是指通过用户主动的操作所产生的空状态。比如用户对自己的购物车清空、对垃圾邮件的删除等操作。用户在进行项目检索或筛选时,发现没有符合的对应结果。此时空状态是处于被动状态,是不可避免的。但是在特殊情况下,比如购物车、书架等用户可选择添加时,可以引导用户添加其感兴趣的商品。


Image title


三、网络出错失败状态


这是在非正常状态下产生的,一般特指无网络状态。需要利用网络加载,可是加载不出内容。此时用户心情是焦急不安的,空状态就需要设置一些情感化的文字与俏皮的图案,弥补用户的失落感,获得正面情绪。与此同时向用户提供新任务,使其解决当前的问题。


Image title

Image title


从空状态内容来分,可分为纯文字说明、提示性图文、提示性图文结合操作按钮引导。


Image title

近几年,插画在生活工作中,特别是互联网行业中所占的比重越来越重要了。一方面是干巴巴的文字已不能满足用户的情感共鸣,另一方面也说明产品越来越重视用户体验了。


目前主流的空状态页面使用的插画风格主要有:扁平、渐变、描边、立体等,更多的是将两种或两种以上风格组合而成。


如果产品有自己的吉祥物,也就顺其自然的将吉祥物作为插画主角了。例如途牛、京东、飞猪、每日优鲜等产品。


Image title


Image title


通过前文分析,在空状态界面的设计中,我们需要向用户解释说明当前⻚状态,让用户第一时间知道自己现所处位置、环境、情况,从而判断自己接下来的行为,这是十分有必要的。那么,我们做的空状态界面就是要为用户解决这些所带来,并可能会困扰他们的问题,最终为用户提供快速解决的方案。 至此,我们可以将空状态归纳为四大功能特点。


1、是用户引导的重要一环

产品一般需要花费⼤量的时间、金钱来提升产品的注册量,Andrew Chen的研究表明,平均每个APP 会在用户安装后3天丢失77%的日活用户。⽽新用户是最常碰到空状态的⽤户群体,⼀个优质的空状态设计能使产品获得好的第一印象,从而降低用户流失。


2、品牌展示的重要补充

不同的品牌有不同的调性与定位,是消费者对品牌认知的标准,也是提升产品知名度的一个核心关键。当用户遇到了空状态界面,是否还能有品牌辨识度?让用户能在浏览中还记得浏览的还是你的产品,而不是别家的或者其他行业的,这至关重要。因此,空状态是品牌展示的重要补充。


3、调动用户的情感

调动用户情感产品的功能性、易⽤性是重要的,但⼀个成功的产品最重要的是让人感到愉悦并能深深吸引⽤用户,通过空状态⻚面设计可以很好的调动用户情感,使用户在与产品的互动中产⽣生积极正⾯的情绪。从而让用户喜欢上产品。


4、解释说明的渠道

在前面的场景中已表明,用户遇见空状态时大多数时候是以负面情绪所控制的。这时候,化解用户产生的误会是紧急且必要的。空状态就是一个向用户说明的最好的渠道,解释问题,并引导用户,解除用户心中的疑问。


Image title

Image title

Image title




更新:2019-04-03

收藏

5人已收藏

  • 2

    作品

  • 2

    粉丝

  • 0

    关注

  • 12306_品牌IP差异化设计

    猜你喜欢

      2019-04-03 原创文章 教程 举报 690 5 2 0

      想留住用户?从做好空状态开始

      0.0°

      你确定要举报想留住用户?从做好空状态开始

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2019年03月28日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      2
      5
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录