android中常用的下拉刷新加载更多_如何设计“加载流程”

为什么要处理“加载”状态
在页面拉取数据、或提交某些数据时，需要一定的时间来等待服务端返回结果。如果不处理加载，用户可能会看到一片空白，以为你的软件出错；或者因没有建立心理预期，被突然出现的内容吓到。所以，你可以利用这段时间来降低用户的焦虑情绪、让用户对即将出现的内容有一定的预期。这就是处理“加载”状态的意义。

在交互设计阶段，经常会遇到需要处理“加载”的情况，接下来我从两方面来讲解下如何快速设计“加载”这件事：

---

“加载”的流程是怎样的

要处理加载状态，必须要理解整个加载流程，这4个状态必须要搞懂：

• 【触发】：即自动进行加载，或者点击某个按钮后进行的加载，这个触发行为要明确；
• 【加载中】：这个就是出现一个loading，一般就是执行一个动画。看似简单，但这个不一定每个人都能处理好，一会儿会细说；
• 【加载成功】：成功后的行为，通常会显示具体内容，或者进入某个页面或流程，这在交互设计文档中要明确标注；
• 【加载失败】：有成功就有失败，失败的处理往往考验交互设计师的逻辑完整性。在此状态下应给与“重新加载”的机制。

所以你的交互流程必须涵盖这四点，这样一个基本的设计思路就有了。

---

“加载”应该怎样分类

经常有人分为【全局加载 / 局部加载】，这种分类方式是片面的，在我看来不够好。【全局】本身包含了【局部】这个概念，且到底多大算”局部“，全页面算不算一个“大局部”，用起来容易混淆。

经过实践，应以使用场景来为“加载”进行分类，分别是：

• 内容加载
• 模态加载
• 上拉/下拉加载

内容加载

无论是整页内容的加载，或是局部内容的加载，均属于这类，整体流程如下图：

整页内容的加载示意

局部内容的加载示意

一般进入页面会自动触发，在加载时，允许用户进行其他操作（如返回）；加载成功时，显示对应的内容；加载失败时，可以点击按钮进行重新加载。

现在流行的框架图，是一种加载形式上的演进，好处是让用户对接下来出现的内容有预期，但本质上仍然是内容的加载：

框架图占位-本质上是一种加载形式的演进

模态加载

应用场景一般是点击某个按钮后，此时需要和服务端进行交互，且需等待服务端返回结果，这个过程会消耗一定时间，此时需明确告知用户：

一个典型的表单提交流程

使用模态加载时，典型的触发时机是点击某个按钮；在加载中的时候，一般不允许用户进行操作，会出现蒙层将页面整体遮挡（这个蒙层可以是黑色半透明，也可能是全透明的，视觉效果不同而已）；

也有部分APP在loading时带个关闭操作，如百度地图、高德地图，可以临时关闭loading动画，来让用户重新获取对APP的控制；但只要设置好loading的超时时间，一般不需要此关闭按钮。

加载成功时，会视业务流程而进入其他页面；加载失败时，一般会弹出toast进行提示，用户可以点击按钮再次进行加载。

上拉/下拉加载

这是一种带有交互手势的加载行为，其实和点击某个按钮进行加载没有本质区别。Twitter最先开始使用“下拉加载”，慢慢的变为行业内的标准行为，以至于影响用户的习惯。

这个交互最应关注的是【触发机制】，以“下拉加载”为例，它包含3个过程：

1. 开始下拉，直到一个阈值；
2. 达到阈值后，松手进行加载；
3. 加载成功或失败后，收起此控件。

加载过程中，可以使用一些富有创意的动画，来突显品牌形象；加载成功时，页面内容进行刷新；加载失败时，一般会进行toast提示。

这个例子比较多，大家随便找找常用的APP，都能发现一些使用场景，我这里就不举例了。

---

需要注意的问题

• 加载类型不要混用，有不少APP为了省事，在应该使用全页面的【内容加载】时，反而使用了【下拉加载动画】进行替代，这有时会导致一些莫名其妙的问题。

比如有一个长列表，每次刷新都使用下拉加载动画，用户已将列表滚动了一段距离，在数据刷新后列表可能会被重置在顶部，让用户之前滚动操作失效。

• 涉及到图片的加载流程，会有两次网络请求：第一次会询问服务端“是否有图片”，如果有图片，那么第二次会根据服务端返回的地址，再去拉取图片资源。

这种情况下，一般在第一次请求时不建议出现局部loading，因为图片可能会不存在。在确认图片存在后，会使用占位图（一般是个灰底图片，占位用的）来等待第二次的返回结果。当然，这也要视具体场景而设计。

• 全文只描述了“加载”这一种场景，完善的加载流程也需要考虑到“刷新机制”及“缓存策略”（如X秒自动刷新数据、提前缓存数据以减少加载时间等），这里就不展开讲了，感兴趣的同学可以自行搜索“加载、刷新、缓存”三者的联系。

---

以上，希望能帮助到你。