用户通过触摸操作与设备屏幕中的各个元素进行交互。
Gestures let users interact with screen elements using touch.
原则
手势操作可以帮助用户快速直观地执行任务。
Gestures help users perform tasks rapidly and intuitively using touch.
- 替代性
手势可以作为执行任务的一种方式。
Gestures use touch as another way of performing a task.
- 易用性（容错性）
用户在使用手势时有一定的容错性。
Users can perform gestures in imprecise ways.
- 触控性
手势允许用户通过触摸直接修改用户界面元素，例如通过双指来缩放地图。
Gestures allow direct changes to UI elements using touch, such as precisely zooming into a map.
属性
实时响应
为了体现用户的触摸控制，界面上的元素需要实时响应用户的手势。
Material responds to gestures in real-time to express direct user control over touch interactions.
> Do
The user’s touch should directly control the movement of elements.
> Don’t
Avoid gestures that trigger an animation. Elements should be directly controlled by the user’s touch.
> Do
When animating an element to a destination, the speed of the user’s gesture should be matched by the speed of the element being moved across the screen.
> Don’t
Don’t misrepresent the velocity of a gesture in the resulting animation. The animation should match the speed of the user’s touch.
若手势完成后，需要使用动效作为结尾，那么结尾的速度应该与用户操作的速度相同。
视觉提示
元素的视觉设计和行为应该提示用户是否可以对其执行手势操作。例如，在卡片的边缘进行视觉设计，可以暗示用户能够对卡片进行拖拽操作。
How elements look and behave should indicate if gestures can be performed on them. Visual cues indicate that a gesture can be performed, such as showing the edge of a card to suggest it may be pulled into view
The edge of a sheet invites the user to pull it into view.
In the absence of other affordances, icons provide a clear indication that a gesture can be performed.
Animate elements before the user interacts with them to suggest a gesture.
Elevated surfaces, like cards, suggest that they can be moved independently.
明确目的
当用户执行一个手势时，元素的移动方式应该能够证明该手势的目的。
As a user performs a gesture, elements should move in a way that demonstrates the gesture’s purpose.
Element transitions should continuously animate as a gesture progresses.
The size of the photo and visibility of the scrim suggest that this drag gesture will close the photo.
执行动作的手势可以使用图形来传达手势将要做什么。
Gestures that execute actions should use graphics that communicate what the gesture will do.
> 在左右拖动卡片时，会出现一个图标，提示该手势的用途。径向填充表示手势操作已通过阈值，并将在手势完成时提交操作。
Upon swiping, an icon appears to suggest the purpose of the gesture. The radial fill indicates that a threshold has been passed and the action will be committed when the gesture is completed.
手势类型
手势类型包括：
- 导航手势
- 动作手势
- 变换手势
Gestures help users to navigate between views, take actions, and manipulate content.
Types of gestures include:
- Navigational gestures
- Action gestures
- Transform gestures
导航类手势
导航类手势可以帮助用户更加轻松的浏览产品内容。在功能上，手势补充了其他显示输入法的空白，如按钮和导航组件。
导航手势的类型包括：
- 单击
- 滚动和平移
- 拖拽
- 滑动
- 多指操作
Navigational gestures help users to move through a product easily. They supplement other explicit input methods, like buttons and navigation components.
Types of navigation gestures include:
- Tap
- Scroll and pan
- Drag
- Swipe
- Pinch
单击
用户可以通过触摸元素导航到目的地。
Users can navigate to destinations by touching elements.
> 例：用户可以通过直接点击元素或控件（如按钮）进行导航。
Users can navigate by directly tapping elements or controls, like buttons.
滚动和平移
用户可以垂直、水平或全向滑动表面，让内容能够连续展示。
Users can slide surfaces vertically, horizontally, or omnidirectionally to move continuously through content.
> 例：用户用手指在触摸屏上的垂直方向移动，让列表中的内容根据移动方向进行展示。
Users scroll vertically through content in a list.
> 例：用户在地图中进行平移操作，让用户能够查看任意方向上的内容。
Panning allows users to move expansive surfaces in any direction.
拖拽
用户可以拖拽元素，使其进入和退出视图。
Users can slide surfaces to bring them into and out of view.
> 例：用户可以将底页中未展示完全的内容拖到视图中。
Users can drag surfaces like bottom sheets into view.
> 例：用户可以将视图中的内容向下拖拽对齐进行隐藏。
Users can close scrolling surfaces by dragging them past a distance threshold.
滑动
用户可以在水平方向上，左右进行滑动来切换当前页面的内容，例如选项卡。
Users can move surfaces horizontally to navigate between peers, like tabs.
> 避免单个手势可能产生两种不同结果的情况，左右滑动切换选项卡与左右滑动删除内容中的列表项的操作会误导用户。
Swiping the content of a tab allows the user to move between tabs.
> Don’t
Avoid situations where a single gesture might produce two different results.
多指操作
用户可以通过多指操作，在屏幕中进行导航。
Users can scale surfaces to navigate between screens.
> 例：用户可以捏住表面以打开和关闭它。表面的扩展表明可以使用捏合手势。
Users can pinch a surface to open and close it. The expansion of the surface suggests that the pinch gesture is available.
动作类手势
手势可以执行操作或作为完成某些复杂任务的快捷方式。
动作类手势一般会设置阈值来表示手势停止时会提交对应的操作。
Action gestures can perform actions or provide shortcuts for completing actions.
动作手势的类型包括：
- 单击
- 长按
- 滑动
Types of action gestures include:
- Tap
- Long press
- Swipe
单击或长按
单击手势和长按手势均允许用户与元素进行交互并访问其他的功能。
The tap gesture and long press gesture each allow users to interact with elements and access additional functionality.
> 例：单击FAB，展开功能列表；点击空白区域，收起功能列表。
A tap allows users to perform actions and interact with elements.
> 例：在列表中长按某个列表项可以显示其他模式和功能。
Long presses can reveal additional modes and features, but are not easily discoverable.
滑动
用户可以在滑动元素传递出阈值信息时完成用户所需的操作。
Users can slide elements to complete actions upon passing a threshold.
> 例：用户可以通过左右滑动邮箱中的邮件来进行归档或收藏操作。
Users may quickly commit actions to list items by swiping them.
转换类手势
用户可以使用手势来转换元素的大小，位置和旋转。
Users can transform an element’s size, position, and rotation with gestures.
转换手势的类型包括：
- 双击
- 多指操作
- 复合手势
- 长按并移动
Types of transform gestures include:
- Double tap
- Pinch
- Compound gestures
- Pick up and move
双击或多指操作
用户可以通过双指收放或快速双击来放大和缩小内容。
A pinch, or two quick taps, allows users to zoom into and out of content.
> 例：双击可让用户放大或缩小内容的操作之间进行切换。
Pinches allow users to zoom into and out of content along a gradient of zoom levels.
> Double taps allow users to zoom into content, or toggle between zoom levels
复合手势
用户可以在各种手势操作之间流畅地转换。
Users can fluidly transition between various gestures.
Do
Enable users to seamlessly transition between gestures such as zooming, rotating, and panning.
Don’t
Don’t prevent users from fluidly transitioning between multiple gestures.
长按并移动
用户可以通过长按并拖动元素来重新对内容进行排序。
A long press and drag allows users to reorder content.
> 例：长按卡片让卡片进入可以拖拽移动的状态。
Cards can be reordered by using a long press to pick them up, and dragging them to a new position.
若有收获，就点个赞吧
0 人点赞
