下拉刷新的四种状态 - 设计师的小小盒

用最简单的语言了解那些被忽视的设计知识点——下拉刷新的四种状态

### 状态介绍

应用的下拉刷新其实是一个非常复杂的过程，有一些很著名的安卓、iOS下拉刷新框架例如SmartRefreshLayout、MJRefresh等，了解这些框架后发现，下拉刷新远不是一个简简单单的加载动画那样简单。

所以，设计师了解整个下拉刷新流程后，需要做出完整的设计拆解：

- 提示"下拉刷新"：用户下滑页面时（定义下滑高度大于0时出现），提示用户可以执行下拉刷新操作；

- 提示"释放刷新"：当页面下滑超过一定高度时（定义这个高度为a），提示用户"释放刷新"，表明用户想要完成下拉刷新操作的准备行为已经完成。超过临界点a后，用户可以继续下拉，直到达到可下拉的最大高度值b时停止；

- 正在刷新：页面下滑高度在a与b之间时，用户松手，页面上弹至a高度，执行刷新操作（也就是最重要的加载中动画）；

- 刷新结束：数据刷新完成后，无论是否刷新成功，超出限定时间后，都需要将刷新结果（成功或失败）反馈给用户，页面弹回至0高度，整个流程结束。

如下图所示：

### 注意

整个刷新流程中，第四步可以进行这样的简化：

无论数据是否刷新成功，均可以先将页面回弹至0高度，用户可根据页面数据结果是否已经被刷新从而判断是否刷新成功，减少等待时间。

此外，设计师在设计整个流程时，可将整个流程进行无缝衔接设计。例如流程2、3的衔接，用户不松手执行下拉上滑操作时，应该是一个正序与回退的过程（线条的延长与缩回），保证流程的连贯性，避免动画突兀。

>  我的站点：biliui.com

>  设计交流群：464674996