loading加载设计

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

什么是加载？为何须要加载？

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

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

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

常见的加载场景：

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

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

一、启动页加载

说到启动页，你们确定首先想到的是广告位、节日营销或增强品牌意识。能够点击，而且通常均可以选择跳过。实现方式能够为静态页，也能够是动态图。 其实否则，启动app须要一个短暂的过程，启动页的做用是天然地过渡这个过程。除了上述的3中作法，启动页还有一种作法就是，作出和首页同样，给人感受进入首页特别快。

二、界面跳转加载

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

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

  

三、白屏加载

多出如今H5页面中，特色是一次性加载完全部数据，界面单一。若加载失败，页面为空。

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

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

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

  

五、智能加载

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

六、缓存加载

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

加载样式

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

  

加载设计的原则

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

  

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

  

少等待感的具体手法

1. 用非模态的加载方式

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

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

2. 情趣化的加载动画

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

3. 漫长加载告知进度

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

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

4. 尽可能提早加载

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