模式 手势

手势

仅限手机

手势包括触控机制(手指在屏幕上做些什么)以及触控反应(特定手势的结果)。

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

触控反应可以通过多个触控机制来实现。例如,用户可以使用双指张开、双击或双击并拖拽等触控机制来放大视图。

拖拽、轻扫和轻甩的类型

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

触控机制 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

触控机制反映了用户的手指在屏幕上做了什么。

轻触

单个手指按下,然后抬起

示例:选择

轻触两下

单个手指按下,然后抬起,然后再按下,再抬起

示例:放大

拖拽、轻扫或者轻甩

单个手指按下,然后移动,之后抬起

示例:忽略、滚动、快速滚动等

长按

单个手指按下,等待片刻后抬起

例如:选择一个元素,比如一个列表项

长按不能用来展示情境菜单。

长按并拖拽

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

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

轻触两下并拖拽

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

示例:放大、缩小

双指张开

两个手指按下,然后将手指分开,之后抬起

示例:放大

双指捏合

两个长按,然后并拢,之后抬起

示例:缩小

双指轻触

两个手指按下,然后抬起

示例:缩小

双指轻扫、拖拽、轻甩

两个手指按下,然后朝相同方向移动,之后抬起

示例:选择多个条目、平移或者倾斜

双指长按

两个手指按下,等待片刻后抬起

示例:无;这个手势不常用

双指长按并拖拽

两个手指按下,等待片刻,然后移动,之后抬起

示例:选取并移动

双指轻触两下

双指按下,然后抬起,然后再按下,再抬起

示例:缩小

旋转

两个手指按下,同时绕中心点旋转,然后抬起

示例:旋转内容,比如地图

触控反应 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

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

操作

说明

触控机制

激活

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

轻触

取消或离开

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

轻触

启用/禁用灯光

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

轻触

拖拽、轻扫或者轻甩

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

拖拽、轻扫或者轻甩

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

选择一个元素

长按、双指轻触

数据选择(有选中项时)

编辑模式下选择更多元素

可以使用任意组合,单指或双指手势

轻触、双指轻触

数据多选拖拽

从手势触控点开始显示选择框
宽高取决于手指的位置
最终的选择项取决于手指抬起时选择框的范围

双指轻扫或拖拽、长按并拖拽(无选中项时)

选取并移动

作用于已选项。可以用来:

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

双指长按、在已选项上长按并拖拽

放大

放大内容

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

智能缩放

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

轻触两下

缩小

缩小内容

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

展开

展开收起的内容

双指张开

收缩

收起展开的内容

双指捏合

旋转

旋转目标内容

旋转

拖拽、轻扫和轻甩细节 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

轻扫手势的反应取决于情境。手指移动速度是拖拽、轻扫和轻甩之间最大的区别。

  • 拖拽:细微的手势、移动缓慢,但能掌控更多,通常有一个目标元素
  • 轻扫:粗略的手势,快速移动,通常没有目标元素
  • 轻甩:粗略的手势,没有目标元素

手势的移动速度会影响操作是否可撤销。

  • 轻扫还是轻甩,取决于手势结束时的速度,以及被影响的元素是否越过临界点(或者超出可撤销的范围)。
  • 拖拽会在移动期间保持与目标元素的联系,所以反转手势方向,会把元素拖拽回临界点。
  • 轻甩的速度更快,并且在元素越过临界点时会与断开与元素的联系,防止操作被撤销。

滚动

滚动是对内容主体在垂直或水平方向上轻扫。

用法

  • 滚动的距离取决于手势的速度:拖拽(慢)vs. 轻扫 vs. 轻甩(快)。
  • 内容的滚动速度应当与手势保持一致。内容的滚动应当有「跟手」的感觉。

滚动方向示例

滚动时显示

滚动时显示的意思是应用内的元素,在内容滚动时从相反的方向出现在内容区。例如在 Chrome 中向上滚动会出现地址栏。

滚动方向示例

平移

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

平移适用于:

  • 无边界的内容(地图)
  • 内容的尺寸超出了屏幕(放大网页或图片)

双指平移从其他的双指手势(例如双指缩放或旋转)过度而来,例如在地图中。如果直接使用双指平移,地图的视图会倾斜

平移示例

忽略

忽略应用于可轻扫的元素,例如列表或卡片,与滚动方向垂直。

手势通常是水平的。

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

忽略手势

轻扫刷新

轻扫刷新通常是垂直向下拖拽。通常在列表的顶部,卡片或其他容器的边缘(新内容出现的地方)起作用。

轻扫刷新手势示例

边缘轻扫

边缘轻扫手势是从屏幕外侧开始,用于展示屏幕之外的内容。边缘轻扫会唤起独立于当前视图的内容。

如果没有定义边缘轻扫手势,默认反应是翻页轻扫

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

边缘轻扫示例

翻页轻扫

翻页轻扫是在屏幕上,内容内部轻扫,用于展示屏幕之外的内容,每次轻扫展示一页,或者切换一个选项卡。

如果页面内容缩放比例 >100%,在内容内部轻扫会将视图平移到内容的边缘,继续轻扫就会翻页

只有越过临界点后翻页轻扫才会被执行。

当元素是可以被轻扫时,不要使用翻页轻扫手势。

参考下文:滚动折叠

翻页轻扫示例

滚动折叠

滚动折叠是在滚动的内容顶部或底部使用翻页轻扫来回到内容的上一级。

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

滚动折叠

菜单打开

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

菜单也会通过轻触打开。

拖拽可以用于菜单打开

菜单打开拖拽示例

倾斜

倾斜会让 3D 内容前倾或后倾。

如果从其他手势(例如双指捏合或旋转)过度而来,例如在地图中,会出现双指平移

拖拽可以用于倾斜

倾斜示例