模式 手势

手势

仅支持移动端

手势包括触摸方法(手指在屏幕上做什么)和触摸动作(特定手势引发的结果)。

触摸方法根据所处情境不同可能导致不同的结果。例如,长按可以选择像列表项之类的元素。

触摸动作可以通过组合多个触摸方法来实现。例如,用户可以使用捏放、双击或双击拖拽等触摸方法,来放大视图。

拖拽、滑动和甩动的类型

滚动
滚动时显示
平移
忽略
滑动刷新
边缘滑动
翻页滑动
滚动折叠
菜单打开
倾斜

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 中的长按并拖拽手势

长按并拖拽

单指按下,等待片刻后移动手指,然后抬起

示例:选取并移动,选择多个项目

Material Design 中的双击并拖拽手势

触摸两下并拖拽

单指按下,然后抬起,然后再单指按下,然后移动,然后抬起

示例:放大、缩小

Material Design 中的双指张开手势

双指张开

双指按下,然后将手指分开,然后抬起

示例:放大

Material Design 中的双指捏合手势

双指捏合

双指按下,然后并拢,然后抬起

示例:缩小

Material Design 中的双指触摸手势

双指触摸

双指按下,然后抬起

示例:缩小

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.

特定情境中的特定手势及其结果。

操作

说明

触摸机制

激活

激活界面中的元素,比如按钮

触摸

取消或离开

取消或离开当前任务,例如对话框或菜单

触摸

启用/禁用灯光

隐藏/显示视图中的操作栏

触摸

拖拽、滑动或甩动

参见下文的拖拽、滑动或甩动细节来了解滚动、滚动显示、平移、忽略、滑动刷新、边缘滑动、翻页滑动、滚动折叠、菜单打开以及倾斜之间的区别。

拖拽、滑动或甩动

数据选择(没有选中项时)

选择一个元素

长按,双指触摸

数据选择(有选中项时)

在编辑模式下选择更多元素

可以和随后的单指或双指手势进行任意组合

触摸,双指触摸

数据多选拖拽

从手势触摸点开始显示选择框
宽度和高度可以根据手指的位置进行调整。
最终的选择项取决于手指抬起时选择框的范围。

双指滑动或拖拽,长按并拖拽(无选中项时)

选取并移动

作用于已选中的项目。可以用来:

  • 重新布局视图内的数据
  • 将项目放到容器或目标上
  • 调整列表或卡片集中的项目顺序

双指长按,在已选中项目上长按并拖拽

放大

放大内容

  • 触摸两下
  • 触摸两下并拖拽(向下)
  • 双指张开

放大到合适大小

对于嵌套的视图,放大可访问的最小视图

触摸两下

缩小

缩小内容

  • 在最大视图时触摸两下
  • 触摸两下并拖拽(向上)
  • 双指捏合
  • 双指触摸
  • 双指触摸两下

展开

展开收起的内容

双指张开

收缩

收起展开的内容

双指捏合

旋转

旋转目标内容

旋转

拖拽、滑动和甩动细节 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

滑动手势的功能因情境而异。手指移动的速度是拖拽、滑动和甩动之间最大的区别。

  • 拖拽:细致的手势、移动缓慢,但更有掌控感,通常有一个屏幕中的目标元素
  • 滑动:粗略的手势、移动快速,通常没有屏幕中的目标元素
  • 甩动:粗略的手势,没有屏幕中的目标元素

手势速度会影响操作是否可立即撤销。

  • 滑动是否变成甩动,取决于结束速度、以及受影响的元素是否已经越过阈值(或超过了可以撤销操作的点)
  • 拖拽操作会在移动期间和目标元素保持联系,所以反转手势方向,会把元素拖拽回临界点
  • 甩动的速度更快,且会在元素越过临界点时与元素断开联系,防止操作被撤销

滚动

滚动是对内容主题在水平或垂直方向上的滑动。

用法

  • 滚动的量取决于手势的速度:拖拽(慢) vs. 甩动(快)。
  • 内容滚动的速度应该和手势速度保持一致。内容应该要有 “黏到” 手指或触摸设备上的感觉。
Material Design 的滚动方向示例

滚动方向示例

滚动时显示

滚动时显示意味着在内容区域内反向滚动会显示应用内的隐藏元素。例如,在 Chrome 中向上滚动会出现地址栏。要隐藏这些元素,恢复原来的滚动方向即可。

Material Design 的滚动方向示例

滚动方向示例

平移

平移是全方向的单指或双指手势,用来扩展视野。拖拽通常和平移同时使用。使用甩动时,内容会沿着甩动的方向以甩动的速度平移。

平移适用于:

  • 没有边界的内容(地图)
  • 内容的尺寸超出了屏幕的宽度或高度(放大网页或图片时)

双指平移是从另一个双指手势过渡过来的(例如:双指缩放或旋转),例如在地图中。如果手势是以双指平移开始的,那么它就会导致倾斜

Material Design 中的平移示例

平移示例

忽略

忽略手势源自可滑动的元素,例如列表项或卡片,忽略方向和滚动方向垂直。

手势通常是水平的。

只有越过临界点后忽略操作才会被执行。

Material Design 中的忽略手势示例

忽略手势示例

滑动刷新

滑动刷新通常发生在一个垂直向下的拖拽中。通常在列表的顶部、卡片或其他容器的边缘(新内容的表面)起作用。

Material Design 中的滑动刷新手势示例

滑动刷新手势示例

边缘滑动

边缘滑动手势从屏幕外侧开始,用于显示屏幕外的内容。边缘滑动会调用独立于当前视图的内容。

如果没有定义边缘滑动手势,边缘滑动默认为翻页滑动

只有越过临界点后边缘滑动才会被执行。

Material Design 中的边缘滑动示例

边缘滑动示例

翻页滑动

翻页滑动是在屏幕上,内容内部的滑动,用于显示屏幕之外的内容。每次翻页滑动都会切换一个页面、或一个选项卡。

如果页面内容缩放比例超过 >100%,在内容内部滑动会平移到内容的边缘,到边缘后继续滑动就会翻页

滑动翻页只有越过临界点后才会执行。

当页面内有个别元素可滑动时,不要使用滑动翻页手势。

参考下文:滚动折叠

Material Design 中的滑动翻页示例

滑动翻页示例

滚动折叠

滚动折叠通过在滚动的内容顶部或底部使用滑动翻页,来回到内容结构的上一级。

滚动折叠手势只有在越过临界点后才会执行。

Material Design 中的滚动折叠示例

滚动折叠示例

菜单打开

在菜单或选择器上拖拽会出现菜单。手指抬起后,高亮的菜单项会被选中。

菜单也可以通过触摸打开。

拖拽也可以用于菜单打开

Material Design 中的菜单拖拽示例

菜单打开拖拽示例

倾斜

倾斜会使 3D 内容向前或向后转动。

如果从另一个双指手势(如捏合或旋转)过渡而来,例如在地图中,会导致出现双指平移

拖拽也可以用于倾斜

Material Design 中的倾斜示例图

倾斜示例