从加载到刷新，信息载入的交互设计

来自同学的提问：页面下拉刷新、上拉刷新、加载刷新、进度条等等，到底都什么情况下用啊？

加载和刷新，是互联网产品的一个基础通用能力，我们在vivo的产品设计中也经常会处理加载和刷新的交互逻辑及视觉呈现，所以就简单做个小结，和大家分享一下。

我们还是先从定义开始：

加载多用于表示打开应用软件或页面时的信息载入过程。

刷新比如突破旧的而创造出新的。刷新有手动和自动两种，旨在消除因时间间隔造成的内容或状态不一致，一般用于内容或状态变化比较频繁的地方。

从定义上看，刷新可以看作是加载的一个子场景。因为展示新信息的过程也是信息载入的过程。

接下来我将以vivo互联网产品为例为大家进行讲解这几种信息载入方式的使用场景和区别。

一、信息从无到有的呈现

当用户第一次打开一个界面，界面通常并没有任何缓存内容时，这时就需要加载内容，常见的内容加载方式有以下几种：1. 骨架图加载

通常用于有着稳定界面框架结构的页面：比如视频列表页、视频详情页、Up主页、商品详情页等。

当界面没有任何信息展示时，提前以占位图和占位文本的方式将页面框架勾画出来，方便新用户提前了解页面结构，也方便老用户快速定位具体信息的位置。

骨架图通常只用灰色表示，但也可以用加载后元素本来的颜色添加透明度来呈现，这样的骨架图更会接近页面真实的色彩感受（如上图右）。

为了让用户感受到界面正在努力加载（而没有死机），页面骨架图通常会添加页面光晕循环效果来体现页面的加载动态。

2. loading图标加载

这是最基础也最通用的加载方式，如果页面信息加载较快，且界面内容结构不固定，通常就采用这种加载方式，除了常规loading图标外，产品通常会设计特有的品牌loading图标，或者选择使用用品牌图标+名称的暗纹，或者品牌吉祥物展示loading。

3. 进度条loading

特殊设计的loading进度条或者加载图标，通常用于加载H5活动或小游戏等相对较大，加载时间较长的页面，采用趣味化且与活动/游戏相匹配的设计元素呈现loading过程，一方面可以让用户提前感知活动/游戏的风格和内容，另一方面动态的loading图标也有助于吸引用户注意，缓解用户等待的焦虑。

vivo的活动设计多会采用动态loading图标：比如小v手持奥运火炬跑步、柯基快速抖动电臀、小V驾驶火箭飞行、星球转动等等，少部分添加了进度条，如果加载平均时间在2秒以内，直接采用loading图标是OK的，如果平均加载时间在2秒以上，建议同步添加进度条给用户明确的加载时间提示。

4. 网页进度条

这是网页加载最为通用的样式，网页千千万，不同的网页开发者会在页面上采用不同的加载形式，当然，也可能什么都不提供。

所以在加载网页时，浏览器平台通常会给出线性的通用的进度条加载形式，既不过分抢眼，又可以给到用户网页加载进度的统一提示。

二、信息从有到新的呈现

当页面已经有缓存内容后，通常还涉及到两个需求：查看更多内容和查看最新内容。

为了节约用户流量，减少对服务器数据请求的压力，客户端在呈现信息时，通常会采取分批加载的方式，一批加载的信息约在10条左右，当用户浏览完这10条继续往上滑动页面时，就会触发上滑加载（如下图1）。

（部分产品会做预加载处理，当用户正常速度浏览时，上一刷快要完全曝光前就会触发新内容加载，所以用户根本就感知不到上滑加载的过程，但如果用户并不浏览只是快速往上滑动页面，通常还是可以看到上滑加载的状态）