loading加载设计

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

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

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

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

人们常说好的交互设计就是解决用户时间问题的，其中最重要的就是 “别让我等”“别让我想”

常见的加载场景：

• 应用启动
• 登录注册
• 上传，下载
• 加载大量图片文字的情况，图片列表等
• 下拉刷新
• 上拉加载数据
• 点赞
• 进入新页面
• 手机付款

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

1、启动页加载

说到启动页，大家肯定首先想到的是广告位、节日营销或加强品牌意识。可以点击，并且一般都可以选择跳过。实现方式可以为静态页，也可以是动态图。 其实不然，启动app需要一个短暂的过程，启动页的作用是自然地过渡这个过程。除了上述的3中做法，启动页还有一种做法就是，做出和首页一样，给人感觉进入首页特别快。

2、界面跳转加载

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

• 当前页加载：点击按钮后，在当前页提示正在加载并处理，成功后进入下一页。适用于需要判断及验证处理的页面中。例如表单信息判断和登录验证等。
• 进入下页加载：点击按钮，跳转至下一页面并加载内容。绝大部分app采用这种加载方式，极大的增强了流畅的感觉。

3、白屏加载

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

4、分布加载/懒加载/预加载

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

• 分步加载：优先加载占网络资源较小的元素。如先文字和默认图标后图片，图片加载完成前使用占位符显示；当加载的页面内容有固定的框架时，可以先加载框架，再加载框架内的内容。此方式能够及时展示相应内容，减少用户心理等待时间。
• 懒加载：图片一直是网络资源占用大户，对于一个前端有几百张图片的网站来说，如果首屏即加载所有图片（无论这些图片有没有被用户看到），那无疑是既浪费网络资源，又伤害用户体验的事。目前，淘宝网、知乎等大流量网站都已经使用了图片滚动懒加载的方案——仅当图片滚入视窗，被用户看到的时候，才会去真正加载。
• 预加载：就是提前加载。如在启动页时预加载首页；通常应用在信息流中。比如搜索结果页，也就是我们经常看到的列表视图。当我们“将要滑到”页面底部时，页面自动请求数据，为你加载出下一页。所以一般你在浏览下图这种列表时，感觉非常流畅。因为页面进行了预加载。

5、智能加载

考虑网络流量问题，智能加载不仅需要考虑加载的速度，还需要考虑用户流量成本。因此通常应用于WIFI和4G网络切换条件下，另外还需产品判定网络是否通畅。 在WIFI条件下：优先加载高质量图片、优质音乐和视频； 在4G条件下：下载行为自动终止，优先加载普通甚至停止加载图片或音乐视频； 在网络不通畅下：默认加载低质量甚至停止加载图片或音乐视频；

6、缓存加载

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

加载样式

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

加载设计的原则

• 让加载时间变得更有价值——减少等待时间。 （上述提到的加载策略都有案例分析，不再做描述。）
• 让加载变得更加有趣——忘记等待。
  让加载有趣，情感化加载，即将情感化的设计元素融入到界面中，不仅增加了产品生趣，还缓解用户等待的焦虑感。情感化的加载不仅能够适当降低用户的焦虑感，同时能够突显品牌或其他信息。

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

少等待感的具体手法

1. 用非模态的加载方式

尽量使用非模态的加载方式，就是加载的过程是不打算用户，不需要等待加载完就可以做别的事情的，如下示意：

用非模态的加载方式，用户可以利用做别的事情，打发等待的时间，而不用傻傻等待数据加载完成，大大降低了等待的焦躁感。即便是模态的加载，也要给一个取消的选项，放在不耐烦的情况下还没法取消。

2. 情趣化的加载动画

加载的过程如此的枯燥乏味，为什么我们不能做点什么让用户觉得好受一点呢?有创意的设计师们设计了各种呆萌可爱的加载动画。 这些加载动画让等待的过程变成了一种享受，用户能感受到设计师的情怀，体会新鲜有趣的等待过程。提升了产品情趣化的设计语言，让等待的焦躁感一扫而空。

3. 漫长加载告知进度

如果是时间较长的加载过程，最好能清晰的告知过程进度，这时候就需要采用有进度的加载设计了。

浏览器的进度条是一种较为常见的进度告知设计，通过这个进度告知，让用户有了更加明确的知情权，也能更好的预期到加载完成的时间
但即便是小小的进度条，也有很多的设计技巧在里面。一个非常经典的体验设问，同样是3s的加载时间，匀速的进度条、先慢后快的进度条、先快后慢的进度条，哪个让用户感觉上最快?经过科学的实验证实，先慢后快的进度条是让用户心理感受上最快的设计。这是因为用户最容易记住最后一瞬间的感觉，如果最后一瞬间，感知到了快，就觉得顺畅了。

4. 尽量提前加载

尽可能的利用预加载或有WiFi的情况下离线缓存的方式，把内容提前加载下来，这样能做到最大限度的降低加载给用户带来的卡顿感。如果能判断出来用户下一步要做的事情，提前帮用户加载相应的内容，肯定是最符合需求场景的事情。当我开始读第一页的时候，第二页第三页就开始陆续缓存下来了

转载于:https://juejin.im/post/5c80d9aaf265da2d943f908c