移动端的三种基本加载提示方案 Loading & Pull to refresh & Progress Bar

Intro

首先我们回顾一下手机端 Loading的提示方案:

1.全局模态Loading

适用于:首次进入 全局模态Loading的场景 不足是:无法重复触发.

移动端的三种基本加载提示方案 Loading & Pull to refresh & Progress Bar_第1张图片
Qunar经典的全局小骆驼 Loading

2.Pull to refresh

适用于:有反复加载需求的场景

特点:不仅可以首次进入 自动触发刷新 而且 可以重复通过自然的下拉手势操作反复触发Loading动作

移动端的三种基本加载提示方案 Loading & Pull to refresh & Progress Bar_第2张图片
Pull to refresh@JD

另外一种场景,先来看一个很标准的案例:

首次进入的Loading(采用全局模态Loading进行提示)....数据爬取(采用进度条进行提示)...页面内的下拉刷新(经典的pull to refresh)

复杂场景--慢查询 Qunar

再看妙计旅行的案例:

复杂场景--慢查询 Moji

这里引出了第三种加载提示:

3.进度条 => 适用场景 慢查询/耗时的加载动作.

再次感叹一下 Twitter发明的 pull to refresh.
真可谓在移动初爆发的时候自然而生,使用自然的手势操作轻松的触发刷新动作.
同时下拉刷新也是全局模态Loading的超集:
首次进入页面时自动触发下拉动作 完成 首次Loading,后面用户可通过下拉手势完成多次的refresh动作.一箭多雕.

对于去哪儿国际机票联程查询的案例和妙计旅行的案例,

看似复杂的加载过程,只要我们静心拆解分析,当复杂问题拆解为基本问题时,问题都会迎刃而解.

评审时产品反对引入过多的加载方式,互联网公司 年轻 开放 扁平 好的方案不怕argue.

去哪儿这种重业务级的App可以看到这三种基本加载提示方案的存在.

简洁的微信也包含了这三种基本的加载提示:

进入微信运动的全局Loading 朋友圈的下拉刷新 进入网页的顶部进度条.

最后我们再来看一个国内厂商安居客的一个案例

下拉浏览历史纪录 使用起来不仅方便用户 还能提高页面的浏览量

One More thing@anjuke

你可能感兴趣的:(移动端的三种基本加载提示方案 Loading & Pull to refresh & Progress Bar)