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

相关推荐

  • QQ音乐年终盘点H5设计总结:音乐与色彩的次元幻想

    2016年是一个H5满天飞的年代,如何在众多牛气的H5中脱颖而出,留住用户关注和让朋友圈永无休止的不停传播呢?这也是一枚骚气且不隐忍的运营设计师一直研究琢磨的课题。这里拿QQ音乐年终盘点H5为例来解析下我对H5的次元幻想。

    2017-05-07
  • 『交互设计经验分享』信息交互设计金字塔法则

    本文由卓衡科技运营总监刘鹏分享。文中刘鹏讲述了他们在创业过程中总结出的交互设计的金字塔法则。 金字塔方法这个说法来源于美国著名的现代管理咨询公司麦肯锡。大致的意思就是:任何事情都能归纳出一个中心点,而…

    2015-01-27
  • 如何应对「为什么用这个颜色/字体/按钮」的问题?

    作为一名设计师,被质疑简直是家常便饭。相信你们在日常工作中,一定被人问过:“对于这个点,你为什么这样做而不是那样?为什么选这个颜色而不是那个?”之类的问题。其实,这也是面试中的必问问题。乍看起来,确实有点难回答。但每一个问题,其实都有他的思考路线图。今天笔者就来谈谈,如何通过交互的四个维度来入手,巧妙地破解这个问题。你为什么要设计一个白色的登录按钮?为什么选这个字体?

    2017-05-15
  • 由爱奇艺视频弹幕引发的思考

    弹幕一词最早用于军事领域,指代对某一区域进行密集火力攻击。2006年,日本视频分享网站Niconico首次尝试在视频画面上实时显示用户评论。由于评论在屏幕上快速飘过的形态类似飞行中的子弹,因此它被形象地称为“弹幕”。
    被称为“A站”的AcFun最早在2007年上线,是国内首个推出弹幕视频的网站。与Niconico相似,早期的AcFun同样聚焦动漫和游戏内容。2009年,哔哩哔哩(Bilibili,又被称为“B站”,最初站名为Mikufans)成立,其目标是为用户提供一个稳定的弹幕视频分享站点。

    2017-06-04
  • 上海benhealth招聘实习生 150/天

    回复「简历」,送你优秀简历模板。岗位岗位实习生岗位职责参与公司移动端、小程序以及 PC 端 Web 产品的交互设计;与产品经理和开发人员共同完成产品开发。岗位要求1. 平面、视觉传达相关专业本科或以上学历;2. 熟悉 Axure 和 Sketch 等交互设计工具;3. 热衷网络文化,熟悉网络热点和主流 App;4. 良好的沟通学习能力,工作热情高,责任感强。薪资福利150 元/天工作地点上海简历投递投递邮箱:jun.pan@benhea...

    2018-04-08
  • 优化App的设计:防止用户错误,并建立良好的错误信息

    “错误”时有发生。在App与生活中都会发生。有时是因为我们犯了错误,有时是系统错误。无论错误原因是什么,它们——还有解决方式——对用户体验影响深远。但它往往不被重视,草草处理错误、组织混乱的错误信息会使用户沮丧,最终抛弃你的应用。相反,处理得当的错误提示,能把失败变为惊喜。在本文中,我们会讨论如何优化app的设计,来尽力防止用户错误,并建立良好的错误信息。

    2017-05-13
  • Axure产品原型在手机上运行的完整教程

    图1 模拟丁香园的高保真原型在一般的开发工作之前,我们通常会设计产品原型,大部分为axure绘制的线框图作为产品的PRD文档,供UI和开发进行前期工作,但是有的时候客户、领导想在开发之前,看到产品的概貌,就必须做产品的高保真原型进行模拟,这时如果做出来的原型能运行在手机端,那再好不过,如图1(注:上图是仿照丁香园的家庭用药,做的一个高保真原型,算是免费给丁香园打广告,是不是考虑给我点广告费?哈哈)。原型制作软件有挺多,不过个人使用之后,...

    2018-03-06
  • 京东金融产品体验报告

    (1)产品定位这是一款多功能互联网金融产品,在满足大众理财(定投、基金)需求的同时,主打白条(也就是借贷)、众筹,简单说,就是将消费金融业务拓展到商城平台之外的大学、农村、旅游、企业采购、租房等8大场景领域,尽可能覆盖更多的额业务。

    2017-05-20
  • Sketch导入图片丢色、变白解决方案

    周五晚上回家作图遇到点状况,折腾了半天才好。整理一下发出来,估计有人用得上。以下内容为磨磨叽叽的瞎逼逼顺序,着急解决问题的同志可以快速下滑,会有提示周五到家日常打开电脑作图,做的做的发现不对劲,之前导入进来的图片好像不正常了。如下图一开始还以为是不小心降低了透明度,cmd+左键,发现没降。再想可能是加了纯色,看了一眼属性,也没有叠加颜色。醉了,这什么鬼。我一看既然不成那就算了。重新再导入一张图片,这张后入的是好的。没当回事,接着做图。过...

    2018-04-25
  • 移动端用户体验:底部导航

    把最重要最常用的操作放在屏幕底部非常重要,因为它们能用一只手指轻松触及。

    2016-10-30