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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
UE新手提升:空状态页面(缺损页)该如何设计更高级
0.0°
2020-05-05 原创文章 经验/观点 举报 722 4 3 0

对于空状态页面,我们做体验设计的时候,很容易造成一种既定的心里预期就是:忽略空状态的重要性,觉得它就是一个简单的“什么都没有”的提示,认为它的价值也和它的名字一样空无意义。


其实不然,在做设计的时候,空状态的设计往往更能抓住用户心理。


那么首先我们就要了解它是什么?什么时候会出现?对应不同场景体验中,如何赋予它更高的价值?



一、什么是空状态?

空状态是指:在用户使用产品中出现的没有数据时的页面展示。

比如没有关注的人、没有发布任何内容、没有收藏和喜欢、购物车为空 、搜索结果为空、无网络等等这些页面就是所谓的“空状态”



二、什么时候会出现空状态?

  • 初次使用(出现最多):app第一次使用时 。(什么操作都没有)
  • 异常、错误等结果提示:进程中某些错误、失败,无法操作(如:搜索无结果,推荐热门搜索、历史搜索...)
  • 用户清除:清空数据后 (明确知道自己做了什么,重点是给予结果性的反馈即可。)



三、如何设计空状态更有价值?

对于新手来说,认为空状态只是一个简单的告知。用一个简单的小图标加上说明文字就搞定了,用户接受到信息之后,能做的事情好像就只有接受这个提示而已。


那用户得到了这个告知,然后该干嘛呢?在这里就遇到了阻碍。


在这个空状态的体验中,只能无能为力的被动接受一个告知,心情好时,可能会返回再去看其他的功能;心情不好时,可能就直接点击关闭离开,造成用户的流失。


这种感觉就像是我选了一条路走,走到一条河的面前,你告诉我这个河太宽了你过不去,这条路从这里中断,得回头再去看看别的路。


好烦,是不是。


你想说,我都走了一半了,现在进行不下去了,那么我前面走的那些路都白走了,除了回头重新走别的路,就不能解决这些阻碍,让我继续前进吗?比如给我座桥、或者给我支船,让我一条路顺利的继续走下去。


这个搭座桥建只船的行为,就是提升空状态的价值,给它赋予更多能力的可能性。给用户一条顺畅连贯的使用体验的同时,提升业务的转化。


那我们应该怎么来搭建这座桥,提升空页面的价值,主要有5个方法:①使用操作指引;②使用系统推荐、猜你喜欢;③使用缓存;④情感化表达;⑤提供新的任务(惊喜、创新)。




01 / 利用操作指引,教育用户进入新手使用流程(常适用于:第一次使用)

对于工具类、UGC类产品,新手用户初次使用时,通常都会出现初始无数据的空状态场景,比如空着的工作任务、空着的动态、空着的作品列表、空着的文章等等。


这种初始化状态,没有任何内容,所以:需要用户进行某种操作才能产生内容的界面。


而这时的新用户是个小白,对产品没有过多了解,需要我们教用户接下来该做什么,让用户快速的进入到产品创造生产中,减少新用户流失。


解决方法:设计带有“行动性指令”文案的操作按钮、或者尝试带有“行动性指令“的交互动效,让用户创造内容。


豆瓣:利用可滑动的卡片交互形式,吸引用户参与感兴趣的话题,促成动态内容的发布




钉钉:排列出可以做的任务主题,让用户可以“立即开始”



小红书:微动效气泡引导用户“发布你的第一篇笔记“




02 / 系统推荐(猜你喜欢):留存用户,引流、提升业务转化(常适用于:第一次使用)

对于一些内容信息浏览页面来说,某些功能的使用与否直接影响整体业务运转,例如社交产品的关注功能、电商类产品的购物车、收藏功能等。这些功能在初始进入的时候都是空数据状态,然而商业产品对于这些数据通常都会是很重要的业务指标,比如电商类产品的商品浏览量、下单率等;比如社交产品的关注人数、点播量、点赞量等指标;再比如对信息进行搜索,无法获取数据时,产生的无结果空数据时,如何解决用户当时的心理需求?通过智能匹配同类项给出新的解决方案,比如关键字相似搜索结果、热门搜索等


那么该如何在“空”的状态下抓住用户的注意力,让他们开始感兴趣呢?


解决方法:利用系统推荐,把有趣的内容或者功能部分直观的展示在空状态页面,增加曝光率,吸引用户。



小米有品:空的购物车里的“为你推荐”



陌陌:没有关注时,为你推荐优质用户及内容,吸引观看并关注



网易云音乐:没有关注时,推荐你可能感兴趣的人



多点:搜索无结果时,推荐“热卖商品”




03 / 使用缓存(适用于:错误提示无网络)

无网络是一种很特殊的空状态,最投机取巧而且效果极好的处理方法,就是“使用缓存”,把之前加载好的页面内容存储下来,再次进入时先展示这部分内容。




头条:没有网络连接,可以看历史缓存视频



网易音乐:无可用网络,你可以播放已下载的音乐




04 / 情感化设计(适用于:第一次使用、用户清除、出现错误)

空界面在某些时候是无法避免其只是一种告知的简单存在,那我们是否还有办法让它变得有价值?


有。


解决方法:品牌视觉的价值。


大部分设计师通常最容易想到的就是插图+文案的样式,那我们完全可以在插图上来想办法,比起好看的插图,利用品牌IP形象并赋予“个性”,更容易让人产生记忆点,并对之产生一定情绪记忆。


用IP来讲故事,每一个空状态的场景都是故事的一个展现,联结产品、服务的功能和独特的个性,传达产品品牌的价值观,让用户产生愉悦感,更加能记住你的产品。



躺平:设计特别符合产品的IP形象,赋予性格和情绪来设计空状态(超喜欢这个又懒又屌丝的小人儿人设,看看这完全就是宅家最真实的你...)





05 / 惊喜,新的任务(常适用于:出现错误)

人是情绪化的动物,用户体验就是要让用户爽,爽就是要“愉悦、满意”,因此我们才总谈产品如何可以给用户带来惊喜,因为惊喜是情绪中最极致的愉悦与满足。


如何在信息如此少的缺省页里,给用户带来惊喜,发出惊奇的“咦”的一声感慨呢?


解决方法:创造新的任务给用户的负面情绪变为意外的惊喜,比如:小游戏、公益、好看好玩的视频动画、音乐...



内容清空时,出现一个可以玩耍的交互小游戏,将用户的负面情绪变成意外的惊喜



页面被删除时,公益寻人启事,提升页面价值





oooops 小结

最好的「空状态」页面设计,要让用户感受不到它的存在,像一个方向导航仪,有效引导用户很顺畅的继续体验流程,激活用户对业务的转化提升业务指标。


用户体验就是从细节上去优化提升产品的使用感受,每一个细小环节,都可能创造设计价值。


Powered by Froala Editor

更新:2020-05-05

收藏

4人已收藏

曾同学_zz

瞎画、瞎叨逼,关注我鸭~

  • 2

    作品

  • 1

    粉丝

  • 2

    关注

  • 学而思小学家长圈“开年饭桌寻锦鲤”新年拉新活动,视觉设计

    猜你喜欢

      2020-05-05 原创文章 经验/观点 举报 722 4 3 0

      UE新手提升:空状态页面(缺损页)该如何设计更高级

      0.0°

      你确定要举报UE新手提升:空状态页面(缺损页)该如何设计更高级

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2020年05月04日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      3
      4
      0

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

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

      登录

      手机号

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

      登录
      第三方账号登录