模式 滑动刷新

滑动刷新

滑动刷新功能可以通过用户的操作或手势来手动刷新屏幕内容。

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

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

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

图标

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

位置

  • 滑动刷新手势可在内容集合的顶部或底部使用
  • 刷新指示器相对与被刷新的内容水平居中

阈值

刷新指示器必须超过阈值后才会执行刷新,此阈值由圆形旋转器的不透明度、速度和位移变化来指示。

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

滑动刷新是一个滑动手势,可以用在按最近更新排序的列表、网格列表、以及卡片集的头部(Index 0)。

最好把该手势和动态内容一起使用,动态内容是指那些需要从同一位置频繁更新的内容,用户在使用该手势后看到新内容的几率很高。

刷新指示器

刷新指示器只有在执行刷新手势或操作时才会显示。同步功能不会显示刷新指示器。

效果

如果一个视图刷新时会导致大量内容更新,那么在该视图中使用刷新手势时,更新可能不会立即显示给用户。例如,刷新可能导致乱序删除、重新排序、修改、插入项目或仅改变离开屏幕的项目。

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

滑动刷新的动画显示

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

  • 抽屉式导航
  • 主屏幕小部件
  • 可平移的内容

错误示例

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

错误示例

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

错误示例

可平移的内容,例如地图,没有主要方向或内容的来源方向,用户无法推测出滑动刷新手势的方向。

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

手势定位

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

刷新指示器静止位置

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

正确示例

错误示例

错误示例

刷新指示器活动位置

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

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

正确示例

错误示例

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

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

刷新指示器保持可见,直到刷新动作完成且所有新内容都处于可见状态,或者用户导航离开此刷新中的内容。

正确示例

使刷新指示器停留在视图中,直到刷新动作完成,且提供了刷新动作状态的反馈为止。

错误示例

滚动时,如果刷新指示器离开屏幕,隐藏了刷新动作的状态,这可能意味着刷新动作和视图内的特定组件(例如卡片)相关联,而不是和整个视图相关联。

刷新指示器的转换

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

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

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

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

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

刷新内容在 Z 轴空间上低于另一个表面

通过应用栏的操作刷新内容

阈值要求

为了避免误操作,刷新指示器必须超过阈值才能刷新应用。此阈值由多个线索进行指示:

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

在超过阈值,且完成手势后将执行刷新。

反方向滑动超过阈值后将取消刷新操作。