关于加载设计,你要知道的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

相关推荐

  • 【UED人物】朱锫:自然建筑

    近日,朱锫建筑事务所作品景德镇御窑博物馆荣获“2017年度The Architectural Review未来建筑奖”之“最佳文化建筑”(the Winner of the Cultural Regeneration category)。自此,又一位中国建筑师叩开了国际大奖之门。△ 景德镇御窑博物馆室内效果图“未来建筑奖”始于2002年,每年由英国知名建筑专业杂志《The Architectural Review》(建筑评论)评选并颁发...

    2018-02-07
  • 网站分页导航对用户体验和优化的影响几何?

    欢迎点击上方蓝字免费订阅温馨提示:请点击上面的蓝色字体,再点击“关注”,这样您就可以继续免费收到精彩的内容了。在博客、杂志甚至是大多数站点中,分页的点击次数可能比搜索还要多,因为在很多时候,访客并没有明确自己的需求,只是在网页中一页接着一页的浏览信息,如果在分页上有良好的用户体验同时又能引导访客进行浏览,就能大大增加网站的黏性。但在很多站点中,分页并没有得到足够多的重视,即便是花时间来制作分页也不过是基于图标的样式和设计,对分页组件的整...

    2018-02-01
  • 设计思考:中西医结合,开出交互良方

    我们大都倾向于对观点进行主观表述,而不是对事实进行客观陈述,为了减少主客观的分歧,设计师应该利用好研究分析对交互工作的“润滑”作用。

    2017-04-30
  • 我是如何从测试转到产品的?

    为什么我从测试转产品?无论硬件研发还是软件研发,都需要测试工程师找出软件缺陷、保障产品质量,以降低项目风险,我们可能听到过由于某一个漏洞导致公司损失多少钱的例子。而测试的价值就是尽可能早的——发现这些会给公司造成损失的问题,在项目交付前反馈到开发修复。所以测试岗位对于企业来说也至关重要。在做测试时,我一直期望能发挥自己的最大价值,无论是功能性问题还是用户体验问题,我都会一一跟踪。当兼顾项目进度,有些问题来不及修复时,遗留问题我会...

    2018-04-02
  • UE网APP现已发布:UE小组,致力于自学UE。

    UE小组是为:ue自学者提供一个自学UE的渠道和平台,希望能帮助到大家 UE小组的官网:UE小组 豌豆荚、360市场也可直接搜索“UE小组” 进行下载 现在支持安卓版本,稍晚些支持IOS,请广大苹果用户持续关注。 IOS和安卓…

    2015-05-27
  • 如何输出一份合格的交互设计文档?

    做一件事之前一定要先想清楚做这件事的目的,为什么要做这件事,只有这样,才能万变不离其宗,不会变成为了做事而做事,这很可怕。拿交互设计文档来看,为什么要写交互设计文档,这是开始写之前要想清楚的。

    2017-05-15
  • 浅聊四个主流的页面间跳转动效

    最近一直在做交互规范总结的工作,在不断梳理页面间跳转逻辑的同时,发现页面间的逻辑关系并不能和页面间跳转的动效很好的结合上。虽然只是零点几秒 的切换动效,却能在一定程度上影响用户对于页面间逻辑的认知。为了输出详细的规范,花了大量时间把玩现在公司线上的产品以及国内外优秀的APP,尤其是苹 果、谷歌自己开发的APP。(如果某些方面在设计规范中并没有给出答案,就在原生APP中找答案吧!)

    2017-05-29
  • 【曝光台】用户体验不佳 “海带宝”屡遭投诉

    导读凭借业内领先的电子物流平台和遍布全球的优质物流资源,海带宝为全球跨境电商、代购平台提供一站式综合进口物流解决方案。然而,据“电子商务消费纠纷调解平台”(微信ID:DSWQ315)接到的用户投诉维权案例统计,“海带宝”存在提现等待队伍长、转运速度慢、用户体验不佳等问题。电子商务研究中心(100EC.CN)了解到,深圳海带宝网络科技股份有限公司成立于2013年8月,是一家基于互联网智能化物流解决方案的高新技术企业,国内现有员工300余名...

    2018-04-26
  • 在网页设计中运用柔和色调

    小编推荐:看一些让人舒服的设计的时候 总是会发现,人家的用色大部分都很柔和,一些温暖人心的设计总是有一些共同特点,网页设计中也有一些使用柔和色调的方式~

    2015-01-08
  • 【交互设计】手机界面中的灰色运用

    苹果手机的出现,有效的提升了设计师的地位。我有个在微软工作过的朋友告诉我,在苹果手机产生规模性的影响前,他们把设计师称为“美工”,后来,才尊称一下“设计师”。在手机界面的设计中,灰色的使用常常可以为界面…

    2017-08-01