模式 下拉刷新

下拉刷新

下拉刷新是一种手势操作,允许用户手动刷新屏幕内容。

有两种方法可以更新应用内的内容:

  • 首选方法是使用同步功能自动更新内容,这将保持应用内容的自动更新
  • 下拉刷新是一种滑动手势,可用于按最新内容排序的列表、网格列表和卡片集的顶部

手动刷新可作为同步功能的补充,例如在 Gmail 中检查新邮件时,它能在刷新同时保持当前的滚动位置。

图标

刷新指示器用圆形旋转器表示,这是一个带有弯曲箭头并以圆形旋转的图标。

位置
  • 下拉刷新手势可在内容集合的顶部或底部使用
  • 刷新指示器相对于被刷新的内容水平居中
阈值

刷新指示器必须被拖拽超过一个阈值才会触发刷新操作。该阈值通过指示器的不透明度、旋转速度和平移动画的变化来向用户暗示。

Material Design 中的下拉刷新功能通过手势手动刷新内容

用法 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

下拉刷新是一种滑动手势,可用于显示最新内容(索引 0)的列表、网格列表和卡片集的顶部。

最好将此手势用于从固定位置频繁更新的动态内容,用户在使用该手势后看到新内容的几率很高。

刷新指示器

刷新指示器仅在执行刷新手势或操作时显示。同步不会显示刷新指示器。

效果

如果视图在刷新时会发生显著变化,用户可能无法立即察觉使用此手势后的更新。例如,刷新可能导致乱序删除、重新排序、修改、插入项目或仅改变屏幕外的项目。

通过垂直滑动手势刷新视图的内容

下拉刷新的动画显示

下拉刷新不应在以下情况下使用:

  • 导航抽屉
  • 主屏幕小部件
  • 可平移的内容
Material Design 中的导航抽屉应包含导航目标

不推荐做法

导航抽屉(如果应用中存在)应包含导航目标,而不是动态内容。

Material Design 主屏幕小部件应自动更新内容

不推荐做法

主屏幕小部件应自动更新内容。

Material Design 中的可平移内容没有主要方向

不推荐做法

可平移的内容(如地图)没有主要方向或内容来源,用户无法推测下拉刷新手势的起始方向。

定位 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

手势定位

通常,此手势可在内容集合的顶部使用,但也可以在底部使用(例如,在聊天应用中)。

刷新指示器静止位置

刷新指示器静止时,相对于被刷新的内容水平居中。

Material Design 中的滑动手势与刷新指示器

推荐做法

Material Design 中的滑动手势与刷新指示器

不推荐做法

Material Design 中的滑动手势与刷新指示器

不推荐做法

刷新指示器活动位置

刷新指示器位于刷新内容的顶部附近。

其精确的垂直静止位置可进行调整,以促进与底层布局的视觉协调。例如,指示器可以落在材质边缘或网格线上,只要它位于刷新内容的顶部附近即可。

Material Design 中的刷新指示器位于内容顶部附近

推荐做法

Material Design 中的刷新指示器位于内容顶部附近

不推荐做法

行为 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

当刷新指示器平移和/或缩放到视图中时,刷新指示器会在旋转时逐渐显示。

刷新指示器保持可见,直到刷新活动完成且所有新内容都可见,或者用户离开正在刷新的内容。

推荐做法

使刷新指示器停留在视图中,直到活动完成,并提供刷新活动状态的反馈。

不推荐做法

滚动时将刷新指示器移出屏幕会隐藏刷新活动的状态,这可能意味着刷新活动与视图内的特定组件(如卡片)相关联,而不是与整个视图相关联。

刷新指示器转换

当另一个表面位于刷新内容的材质前面时,刷新指示器从该表面下方平移并被裁剪,直到完全可见。

刷新指示器在以下情况下平移时会增大尺寸:

  • 刷新内容的海拔高度高于所有其他表面
  • 通过应用栏或溢出菜单操作发起内容刷新

刷新内容的海拔高度高于其他表面

刷新内容与另一个表面处于同一平面

刷新内容在深度空间中低于另一个表面

通过应用栏操作刷新内容

阈值要求

为确保下拉刷新手势的准确使用,刷新指示器必须超过阈值后应用才会刷新。此阈值由多个线索指示:

  • 刷新指示器达到 100% 不透明度
  • 刷新指示器的旋转速度减慢
  • 刷新指示器的平移速度减慢

超过阈值后,完成手势将触发刷新。

将手势反向拖动回到阈值以下会取消刷新操作。