旋转

  • 项目

本文介绍用于旋转的全新 Windows UI，并提供在 Windows 应用中使用这个新交互机制时应该考虑的用户体验指南。

重要 API：Windows.UI.Input、Windows.UI.Xaml.Input

准则

  • 使用旋转可帮助用户直接旋转 UI 元素。

其他使用指南

旋转概述

旋转是 Windows 应用使用的一种触摸优化技术，允许用户以环形方向（顺时针或逆时针）旋转对象。

根据输入设备，采用以下方式执行旋转交互：

  • 使用鼠标或主动笔/触笔移动所选对象的旋转控制手柄。
  • 直接触摸或者使用被动笔/触笔通过旋转手势沿所需方向旋转对象。

何时使用旋转

使用旋转可帮助用户直接旋转 UI 元素。 下图显示了支持旋转交互的某些手指位置。

演示旋转支持的各种手指姿势的图表。

注意 从直观上来说，多数情况下，旋转点是两个触摸点之一，除非用户指定与接触点无关的旋转点（例如在绘图或布局应用程序中）。 以下图像演示了不采用这种方式限制旋转点时如何降级用户体验。

首张图片显示第一个（拇指）和第二个（食指）接触点：食指接触树，拇指接触树枝。

显示旋转手势的两个初始触摸点的图像。 在此第二张图片中，围绕初始 (拇指) 触摸点进行旋转。 旋转之后，食指仍然接触树干，并且拇指仍然接触树枝（旋转点）。

显示旋转图片的图像，其旋转点限制为两个初始触摸点之一。 在第三张图片中，旋转中心由应用程序 (定义，或者由用户) 设置为图片的中心点。 旋转之后，由于图片并未围绕其中一个手指旋转，因此不能直接操作（除非用户已选择该设置）。

显示旋转图片的图像，其旋转点限制在图片中心，而不是两个初始触摸点之一。 在最后一张图片中，旋转中心由应用程序 (定义，或者由用户) 设置为图片左边缘中间的一个点。 而且，除非用户已选择该设置，否则在这种情况下不能直接操作。

显示已旋转图片的图像，其中旋转点被限制为图片最左侧的中心，而不是两个初始接触点中的任何一个。

 

Windows 10 支持三种类型的旋转：自由、受限以及组合。

类型 说明
自由旋转

自由旋转允许用户将内容 360 度自由旋转到任意位置。当用户释放该对象时，对象仍然处于所选的位置。 自由旋转对于绘图和布局应用程序非常有用，如 Microsoft PowerPoint、Word、Visio 和 Paint 以及 Adobe Photoshop、Illustrator 和 Flash。
受限旋转

受限旋转支持在操作期间自由旋转，但释放时强制对齐点以 90 度（0、90、180 和 270）递增。 当用户释放对象时，对象自动旋转到最近的对齐点。

受限旋转是最常用的旋转方法，并且它的工作方式与滚动内容类似。 用户通过对齐点虽然不够精确，但仍能实现其目标。 受限旋转对于诸如 Web 浏览器和相册之类的应用程序非常有用。
组合旋转

组合旋转支持包含区域（类似于平移指南中的围栏）的自由旋转，这些区域位于受限旋转强制的每个 90 度对齐点上。 如果用户在其中一个 90 度区域之外释放对象，则对象仍然在该位置；否则，对象会自动旋转到一个对齐点。

注意 用户界面围栏是目标周围的某个区域限制向特定值或位置的移动，从而影响其选择的一项功能。
 

示例

存档示例