相信很多用户在网页浏览或者移动应用中都见过“加载”或者“刷新”，这两种都属于“信息加载”。那么这两个流程应该如何设计，才能减少用户的等待焦虑，提高用户体验呢？笔者从加载和刷新的角度来解读信息加载的交互设计。让我们看一看。
同学提问:页面下拉刷新、页面上拉刷新、页面加载刷新、进度条等。，在什么情况下？
加载刷新是互联网产品的一个基本通用能力。我们经常会涉及到vivo产品设计的加载和刷新的交互逻辑和可视化呈现，我就简单总结一下，分享给大家。
我们先从定义说起:
▲图1载荷的定义
Loading常用来表示打开应用软件或页面时的信息加载过程。
▲图2刷新的定义
比如突破旧的，创造新的。刷新有手动和自动两种，目的是消除时间间隔造成的内容或状态的不一致，一般用在内容或状态变化频繁的地方。
顾名思义，刷新可以看作是加载的一个子场景。因为显示新信息的过程也是加载信息的过程。
接下来我以vivo互联网产品为例，讲解这些信息加载方式的使用场景和区别。
首先，从零开始呈现信息
当用户第一次打开界面时，界面通常没有任何缓存内容。这时候就需要加载内容了。有以下几种加载内容的常用方法:
▲图3首次加载信息的几种方式
1.骨架图加载
通常用于界面框架稳定的页面:如视频列表页、视频详情页、Up主页、产品详情页等。
▲图4几种风格的骨架图
当界面没有信息显示时，页面框架以位图和占位符文本的形式提前勾勒出来，方便新用户提前了解页面结构，也方便老用户快速定位具体信息。
骨架图通常只以灰色表示，但也可以通过在加载元素的原始颜色上增加透明度来呈现，这样骨架图会更接近页面的真实色彩感受。
为了让用户感觉到界面在尝试加载，页面骨架图通常会加入页面光环循环效果来反映页面的加载动态。
2.要加载的加载图标
这是最基本也是最通用的加载方式。如果页面信息加载快，界面内容结构不固定，通常采用这种加载方式。除了常规的加载图标，产品通常会设计一个独特的品牌加载图标，或者选择使用品牌图标+名称的深色图案，或者品牌吉祥物来显示加载。
▲图5几种典型的5加载方式
3.进度条加载
专门设计的加载进度条或加载图标通常用于加载加载时间相对较长的页面，如H5活动或游戏。加载过程以有趣的设计元素呈现，与活动/游戏相匹配。一方面，用户可以提前感知活动/游戏的风格和内容；另一方面，动态加载图标也有助于吸引用户的注意力，缓解他们等待的焦虑。
▲图5进度条或动态元素加载的情况
vivo的活动设计大多采用动态加载图标:比如小V拿着奥运火炬跑、柯基快速摇臀、小V飞火箭、旋转星球等。，有几个还加了进度条。如果平均加载时间小于2秒，直接使用加载图标就可以了。如果平均加载时间超过2秒，建议同步添加进度条，给用户明确的加载时间提示。
4.网页进度条
这是最常见的网页加载方式。网页有几千万个，不同的网页开发者会在页面上采用不同的加载形式。当然，他们可能什么都不会提供。
所以浏览器平台在加载网页的时候，通常会给出一个线性的、笼统的进度条加载形式，不会太醒目，可以给用户一个网页加载进度的统一提示。
▲图6浏览器产品进度条
第二，从现有信息到新信息的呈现
当一个页面已经有缓存的内容时，通常会涉及到两个需求:查看更多的内容和查看最新的内容。
为了节省用户的流量，减轻服务器的数据请求压力，客户端通常会批量加载信息，一次加载10条左右的信息。当用户浏览这10块并继续向上滑动页面时，就会触发向上滑动加载。
▲图7加载或刷新的方式
当用户想要查看最新信息时，如果页面没有主动刷新，用户通常通过手动刷新来达到目的。
有三种常见的手动刷新方法:
1)下拉刷新
当第一条信息位于页面顶部时，下拉页面以触发下拉刷新。用户刚进入界面时，可以多次触发，找到自己感兴趣的最新内容。但是当用户在页面上滑动时就不方便了，因为需要再次下拉，直到第一条消息出现，才能触发下拉刷新。
2)点击刷新按钮进行刷新。
通常情况下，页面右下角会悬浮一个刷新按钮，这样无论页面滑动到哪个屏幕，用户都可以轻松点击刷新按钮进行刷新。
3)单击顶部选项卡或底部选项卡进行刷新。
这是一个隐式的手势操作，基本上有产品支持，但是由于界面上没有明确的刷新指令，很多用户很难发现。
除了这些典型的刷新方法，还有一种提示刷新方法你可能见过。前段时间在微信朋友圈也用过，今天去转载的时候找不到了。我在网上找了一张其他产品的截图表示:
▲图8页面提示刷新。
这类产品会在用户上次开始浏览的信息前添加提示。当用户浏览完这次所有更新的内容时，会看到这个提示，提醒用户刷新查看最新的内容。
这种提示往往要求产品内容的更新速度要快，数量级要大。否则用户点击刷新后，没有太多新的内容可以看，体验反而会降低。
最后给大家分享一个用户情绪随等待时间变化的实验数据图表。
▲图9用户心情随等待时间的变化
可见2秒是一个转折点。超过2秒后，用户的情绪开始不耐烦，焦虑，放弃。这张图片告诉我们交互设计的什么？以下是给大家的一些建议:
1)在用户操作的0.1s内，甚至要给出反馈，比如点击状态、弹出图层或者页面跳转效果，让用户明显感觉到产品收到了用户的操作，正在积极响应。
2)在新页面出现后的0~0.5秒内，如果要显示信息加载状态，建议显示骨架图或者很弱的暗纹加载提示，甚至什么都不显示。因为如果有明显的加载图标在0.5秒内切换到内容，会导致页面有闪烁感，但是体验比较差。
3)可在0.5s~2s内显示骨架图或醒目有趣的加载图标，让用户有信息可看，加快等待时间。对于用户会频繁打开的页面，比如列表首页或者详情页，需要和RD合作，从性能角度提高客观加载速度，否则看到的永远是同一个加载图标，再有趣用户也会觉得无聊。
4)2s以上，如果是骨架图的形式，建议采用分步加载，让部分内容先呈现出来，让用户有真实的内容可以看到。如果内容无法一步一步呈现，建议增加进度条，给用户明确的等待时间预期，减少用户因为没有时间预期而放弃的场景。
好了，今天信息加载从加载到刷新的交互逻辑到这里就结束了。
参考资料:
方:人机交互等待状态视觉反馈设计研究满山遍野:你应该知道的5种刷新风格专栏作家。
人人都是产品经理专栏作家。10年体验式设计经验，崇尚理论指导实践，践行迭代理论，热衷于交互设计、服务设计、行为设计等设计相关领域知识的学习、解构、建构和传播。
本文由人人作为产品经理原创发布，未经允许禁止转载。
题目来自Unsplash，基于CC0协议。
此观点仅代表作者本人，大家都是产品经理。平台只提供信息存储空服务。
