加载的作用在于缓解用户的等待焦虑,同时及时的向用户反馈当前的系统状态,以提升产品的用户体验。
什么是加载?为什么需要加载?
因此我们需要一种设计来缓解用户等待时间内的焦虑感,同时即时反馈页面状态——那就是加载。
人们常说好的交互设计就是解决用户时间问题的,其中最重要的就是 “别让我等”“别让我想”
常见的加载场景:
- 应用启动
- 登录注册
- 上传,下载
- 加载大量图片文字的情况,图片列表等
- 下拉刷新
- 上拉加载数据
- 点赞
- 进入新页面
- 手机付款
常见的加载策略及其设计意义
1、启动页加载
说到启动页,大家肯定首先想到的是广告位、节日营销或加强品牌意识。可以点击,并且一般都可以选择跳过。实现方式可以为静态页,也可以是动态图。 其实不然,启动app需要一个短暂的过程,启动页的作用是自然地过渡这个过程。除了上述的3中做法,启动页还有一种做法就是,做出和首页一样,给人感觉进入首页特别快。
2、界面跳转加载
可分为两种方式,当前页加载和进入下页加载。
- 当前页加载:点击按钮后,在当前页提示正在加载并处理,成功后进入下一页。适用于需要判断及验证处理的页面中。例如表单信息判断和登录验证等。
- 进入下页加载:点击按钮,跳转至下一页面并加载内容。绝大部分app采用这种加载方式,极大的增强了流畅的感觉。
3、白屏加载
多出现在H5页面中,特点是一次性加载完所有数据,界面单一。若加载失败,页面为空。
4、分布加载/懒加载/预加载
界面中各类元素多种多样,根据不同需求有不同加载方式,主要分以下三种:
- 分步加载:优先加载占网络资源较小的元素。如先文字和默认图标后图片,图片加载完成前使用占位符显示;当加载的页面内容有固定的框架时,可以先加载框架,再加载框架内的内容。此方式能够及时展示相应内容,减少用户心理等待时间。
- 懒加载:图片一直是网络资源占用大户,对于一个前端有几百张图片的网站来说,如果首屏即加载所有图片(无论这些图片有没有被用户看到),那无疑是既浪费网络资源,又伤害用户体验的事。目前,淘宝网、知乎等大流量网站都已经使用了图片滚动懒加载的方案——仅当图片滚入视窗,被用户看到的时候,才会去真正加载。
- 预加载:就是提前加载。如在启动页时预加载首页;通常应用在信息流中。比如搜索结果页,也就是我们经常看到的列表视图。当我们“将要滑到”页面底部时,页面自动请求数据,为你加载出下一页。所以一般你在浏览下图这种列表时,感觉非常流畅。因为页面进行了预加载。
5、智能加载
考虑网络流量问题,智能加载不仅需要考虑加载的速度,还需要考虑用户流量成本。因此通常应用于WIFI和4G网络切换条件下,另外还需产品判定网络是否通畅。 在WIFI条件下:优先加载高质量图片、优质音乐和视频; 在4G条件下:下载行为自动终止,优先加载普通甚至停止加载图片或音乐视频; 在网络不通畅下:默认加载低质量甚至停止加载图片或音乐视频;
6、缓存加载
针对无网络的情况下,让用户仍能查看之前已缓存在本地的信息,使页面不至于空白,这不仅能够有效减少用户流量成本,同时增加了访问速度。
加载样式
- 状态栏加载:一般系统默认配置加载样式。
- 导航栏加载:将导航栏标题临时变成加载信息文字提示。
- 界面中加载:下拉刷新、懒加载和吐司加载。
加载设计的原则
- 让加载时间变得更有价值——减少等待时间。 (上述提到的加载策略都有案例分析,不再做描述。)
- 让加载变得更加有趣——忘记等待。
让加载有趣,情感化加载,即将情感化的设计元素融入到界面中,不仅增加了产品生趣,还缓解用户等待的焦虑感。情感化的加载不仅能够适当降低用户的焦虑感,同时能够突显品牌或其他信息。 - 保证用户对加载的可控性——及时退出加载。
由于网络或系统的原因,加载有时会时间过长,用户并没有足够的耐心停留在当前页等待你慢慢加载。此时用户有选择退出加载的权利,同时也可以设置默认时间内加载无法进行提示用户重新加载。
少等待感的具体手法
1. 用非模态的加载方式
尽量使用非模态的加载方式,就是加载的过程是不打算用户,不需要等待加载完就可以做别的事情的,如下示意:
2. 情趣化的加载动画
加载的过程如此的枯燥乏味,为什么我们不能做点什么让用户觉得好受一点呢?有创意的设计师们设计了各种呆萌可爱的加载动画。 这些加载动画让等待的过程变成了一种享受,用户能感受到设计师的情怀,体会新鲜有趣的等待过程。提升了产品情趣化的设计语言,让等待的焦躁感一扫而空。
3. 漫长加载告知进度
如果是时间较长的加载过程,最好能清晰的告知过程进度,这时候就需要采用有进度的加载设计了。
但即便是小小的进度条,也有很多的设计技巧在里面。一个非常经典的体验设问,同样是3s的加载时间,匀速的进度条、先慢后快的进度条、先快后慢的进度条,哪个让用户感觉上最快?经过科学的实验证实,先慢后快的进度条是让用户心理感受上最快的设计。这是因为用户最容易记住最后一瞬间的感觉,如果最后一瞬间,感知到了快,就觉得顺畅了。
4. 尽量提前加载
尽可能的利用预加载或有WiFi的情况下离线缓存的方式,把内容提前加载下来,这样能做到最大限度的降低加载给用户带来的卡顿感。如果能判断出来用户下一步要做的事情,提前帮用户加载相应的内容,肯定是最符合需求场景的事情。当我开始读第一页的时候,第二页第三页就开始陆续缓存下来了