关于加载设计,你要知道的8种策略和4种样式

加载的作用在于缓解用户的等待焦虑,同时及时的向用户反馈当前的系统状态,以提升产品的用户体验。


加载的作用在于缓解用户的等待焦虑,同时及时的向用户反馈当前的系统状态,以提升产品的用户体验。

关于加载设计,你要知道的8种策略和4种样式

什么是加载?为什么需要加载?

关于加载设计,你要知道的8种策略和4种样式

加载如同反馈,在人机交互中,用户与界面的每一次互动都是一次加载过程。因操作导致的页面跳转、刷新或弹窗等从而使页面元素信息发生变化行为,页面都需要向服务器发送请求信息,服务器接收到后在发送反馈信息,而由于网络及页面自身处理信息的原因导致这个信息对换的过程可能发生延长从而需要一个“反馈”即加载来缓和用户的等待。加载有快有慢,快得可以让你根本没意识到这种“反馈”,同时慢得也会让你感到崩溃。

因此我们需要一种设计来缓解用户等待时间内的焦虑感,同时即时反馈页面状态——那就是加载。

8种常见的加载策略,及其设计意义

启动页加载

说到启动页,大家肯定首先想到的是广告位、节日营销或加强品牌意识。可以点击,并且一般都可以选择跳过。实现方式可以为静态页,也可以是动态图。

其实不然,启动app需要一个短暂的过程,启动页的作用是自然地过渡这个过程。除了上述的3中做法,启动页还有一种做法就是,做出和首页一样,给人感觉进入首页特别快。

关于加载设计,你要知道的8种策略和4种样式

界面跳转加载

可分为两种方式,当前页加载和进入下页加载。

1.当前页加载:点击按钮后,在当前页提示正在加载并处理,成功后进入下一页。适用于需要判断及验证处理的页面中。例如表单信息判断和登录验证等。

2.进入下页加载:点击按钮,跳转至下一页面并加载内容。绝大部分app采用这种加载方式,极大的增强了流畅的感觉。

关于加载设计,你要知道的8种策略和4种样式

白屏加载

多出现在H5页面中,特点是一次性加载完所有数据,界面单一。若加载失败,页面为空。

关于加载设计,你要知道的8种策略和4种样式

分布加载/懒加载/预加载

界面中各类元素多种多样,根据不同需求有不同加载方式,主要分以下三种:

1.分步加载优先加载占网络资源较小的元素。如先文字和默认图标后图片,图片加载完成前使用占位符显示;当加载的页面内容有固定的框架时,可以先加载框架,再加载框架内的内容。此方式能够及时展示相应内容,减少用户心理等待时间。

2.懒加载:图片一直是网络资源占用大户,对于一个前端有几百张图片的网站来说,如果首屏即加载所有图片(无论这些图片有没有被用户看到),那无疑是既浪费网络资源,又伤害用户体验的事。目前,淘宝网、知乎等大流量网站都已经使用了图片滚动懒加载的方案——仅当图片滚入视窗,被用户看到的时候,才会去真正加载。

3.预加载:就是提前加载。如在启动页时预加载首页;通常应用在信息流中。比如搜索结果页,也就是我们经常看到的列表视图。当我们“将要滑到”页面底部时,页面自动请求数据,为你加载出下一页。所以一般你在浏览下图这种列表时,感觉非常流畅。因为页面进行了预加载。

关于加载设计,你要知道的8种策略和4种样式

智能加载

考虑网络流量问题,智能加载不仅需要考虑加载的速度,还需要考虑用户流量成本。因此通常应用于WIFI和4G网络切换条件下,另外还需产品判定网络是否通畅。

  • 在WIFI条件下:优先加载高质量图片、优质音乐和视频;
  • 在4G条件下:下载行为自动终止,优先加载普通甚至停止加载图片或音乐视频;
  • 在网络不通畅下:默认加载低质量甚至停止加载图片或音乐视频;

关于加载设计,你要知道的8种策略和4种样式

缓存加载

针对无网络的情况下,让用户仍能查看之前已缓存在本地的信息,使页面不至于空白,这不仅能够有效减少用户流量成本,同时增加了访问速度。

4种加载样式

  1. 状态栏加载:一般系统默认配置加载样式。
  2. 导航栏加载:将导航栏标题临时变成加载信息文字提示。
  3. 界面中加载:下拉刷新、懒加载和吐司加载。

关于加载设计,你要知道的8种策略和4种样式

总结:加载设计的核心原则

加载贯穿用户的行为路径,通过以上的案例背后设计的目的我们可以总结出加载设计的原则:

关于加载设计,你要知道的8种策略和4种样式

  1. 让加载时间变得更有价值——减少等待时间
  2. 让加载变得更加有趣——忘记等待
  3. 保证用户对加载的可控性——及时退出加载

减少等待时间

上述提到的加载策略都有案例分析,不再做描述。

忘记等待

让加载有趣,情感化加载,即将情感化的设计元素融入到界面中,不仅增加了产品生趣,还缓解用户等待的焦虑感。情感化的加载不仅能够适当降低用户的焦虑感,同时能够突显品牌或其他信息。

关于加载设计,你要知道的8种策略和4种样式

及时退出

由于网络或系统的原因,加载有时会时间过长,用户并没有足够的耐心停留在当前页等待你慢慢加载。此时用户有选择退出加载的权利,同时也可以设置默认时间内加载无法进行提示用户重新加载。

关于加载设计,你要知道的8种策略和4种样式

THANK YOU FOR WATCHING…

 

本文由 @刘东晨 原创发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/21144/

(0)
CatherineCatherine
上一篇 2017-04-27 10:45
下一篇 2017-04-27 12:55

相关推荐

  • 别逗了,真正的“用户体验”并不如你们所想

    什么是用户体验?如何评价用户体验的好坏? 在知乎上,俞军说:“我理解的用户体验,是让用户付出最小成本满足需求”。这其实仅仅是在讲“易用性”(usability)。另有位叫做Allen Zhang的大牛说:“个人对用户体验的目标…

    2015-10-10
  • 【用户体验.春节特辑】我拿什么记住你(总第268期)

    亦可访问www.koushutianxia.com了解详情编家谱   修家史   留视频建祠堂   亲互动   传万代总第268期时间是这个世界上最锋利的武器,没有任何事物能够阻挡。所有的一切,人、物、事都随着时间的磨砺逐渐模糊、逐渐消逝。父亲的突然去世,一直是我心中最深切的痛,他的离去是那样的突然,突然到我完全无法接受他已经永远离去的事实。总觉得父亲依然还在,总会幻想我下班回家,父亲还会像往常一样在门口笑眯眯的看着我说:“回来啦,儿子...

    2018-02-19
  • 当售电开始谈“用户体验”

    [图片]   现在,很多售电公司打着“增值服务”的噱头来签客户,承诺给客户绝对满意的用电服务,但现在很多用户却反映:售电公司并没有兑现签合同时所承诺的很多增值服务,用户蒙受损失。即使仅仅只是部分售电公司的原因,但是这样下去,增值服务这手好牌迟早会被打烂,增值服务的说服力会也来越低

    微信热点 2018-02-14
  • 改善电商网站用户体验的6个技巧

    电子商务是一个复杂的系统,作为电子商务的典型模式之一,B2C网上零售网站要考虑的因素很多,甚至一些看似不起眼的因素都可能决定一个用户最终是否在该网站完成购物。 在消费者注意力越来越分散的今天。如果您希望潜在客户更多的停留在自己的网页上,进而产生购买行为,就需要牢牢吸引他们的注意力,并且提供简便愉快的购物体验。做到以下这6点,相信没有用户会拒绝从你的网站购买商品,甚至会带来更多的返购和忠实用户。1.提升网站的加载速度落地网页的速度通常是转...

    2018-05-08
  • 朋友圈最近上来几个广告,导致我的朋友圈被讨论轰炸,那么朋友圈的交互设计解析你有兴趣看看吗?还有,朋友圈已死!

    1. 朋友圈的印象 2. 设计上的体现 3. 浅析设计背后原因 4.不足点分析 5.我们向微信学习什么  

    2015-01-26
  • 设计师要懂心理学の眼见非脑见

    我们一般认为,当我们观察周围的一切时,眼睛会将看到的信息传输给大脑,大脑再对信息进行处理,让我们感受到真实的世界。但其实不然,脑见并非眼见,因为大脑总会解析眼睛看到的所有信息。试举一例,请观察下图: …

    2014-11-26
  • 58内部方法!一个更适合产品迭代的卡片创意法

    58UXD:交互设计 师常常需要进行迭代设计,在已有的产品框架上发现问题,优化体验,更好地达成产品目标。

    2017-08-25
  • Adobe XD 中文汉化包 - UI/UX design in Adobe Experience Design

    Adobe XD 中文汉化包 - UI/UX design in Adobe Experience Design

    2016-03-30
  • 交互设计背后隐藏的万亿级医美市场在哪?

    你一定过很多书,走过很多的路,可书山瀚海,究竟那一句改变了你?当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放我期待张雨生 - 未来感谢你的阅读,百无一用是书生,十有九八堪白眼。什么是互联网交互:简单的是指互联网与手指或者语音之间的直接联系,2010年前简单的视频影音播放器还没有意识到用户和用户之间交互的强大之处,所以很多播放系统后来才加了弹幕功能,交互设计强调独立个体我与众多个体的交流交叉联系,微信微博是目前市场上最大的交互...

    微信热点 2018-02-26
  • #UX第四课 我学会了玩玩具

    在同一时间,我成为一个父亲,刚进入UX的世界我,试图弄清楚,如何让我的产品,图象,可以理解的,易于使用的,直观的。我是一个巨大的玩具风扇,还是玩弄他们之前,我的儿子回来了,不过他在家里意味着更多的玩具和更多机会和他生命中的第一个月他观察他的互动玩具。看着他让我想起了和界面设计的普遍经验在我们的生活从一开始,我们如何如果我们打算建立一个可以理解的产品从那些经验特别是学到很多。

    2014-12-28