Surface Dial 与 Surface Studio 的图像
Surface Dial 与 Surface Studio 和触控笔（可在 Microsoft Store购买）。
概述
Windows 滚轮设备（如 Surface Dial）是一种新类别的输入设备，可为 Windows 和 Windows 应用提供引人入胜且独特的用户交互体验。
重要
在本主题中，我们特别讨论 Surface Dial 的交互，但这些内容适用于所有 Windows 滚轮设备。
采用基于旋转操作（或手势）的外形设计，Surface Dial旨在作为辅助的多模式输入设备，用于补充和增强主要设备的输入。 在大多数情况下，用户用非主导手操作设备，同时用主导手执行任务（如用笔书写）。 它不适用于精确指针输入（如触摸、笔或鼠标）。
Surface Dial 还支持 长按 功能和 点击 功能。 按住具有单个函数：显示命令菜单。 如果菜单处于活动状态，菜单将处理旋转和单击操作。 否则，输入将传递给应用进行处理。
与所有 Windows 输入设备一样，你可以自定义和定制 Surface Dial 交互体验，以适应应用中的功能。
小窍门
一起使用时，Surface Dial 和新的 Surface Studio 可以提供更独特的用户体验。
除了介绍的默认按下和按住菜单体验之外，Surface Dial 还可以直接放置在 Surface Studio 的屏幕上。 这将启用特殊的“屏幕”菜单。
通过检测 Surface Dial 的联系人位置和边界，系统使用此信息来处理设备的遮挡，并显示环绕在 Dial 外部的更大版本的菜单。 你的应用还可以使用此相同的信息来调整 UI，以便同时适应设备的存在及其预期使用情况，例如用户的手部和手臂的位置。
Surface Dial 屏幕外菜单
Surface Dial 屏幕菜单
系统集成
Surface Dial 与 Windows 紧密集成，支持菜单上的一组内置工具：系统音量、滚动、放大/缩小和撤消/重做。
此内置工具集合适应当前系统上下文，包括：
当用户在 Windows 桌面上时的系统亮度工具
媒体播放时的切换曲目工具
除了此常规平台支持之外，Surface Dial 还与 Windows Ink 平台控件（InkCanvas 和 InkToolbar）紧密集成。
Surface Dial 与 Surface 触控笔
Surface Dial 与 Surface 触控笔
与 Surface Dial 一起使用时，这些控件可以启用其他功能，用于修改墨迹属性并控制墨迹工具栏的标尺。
在墨迹工具栏的墨迹书写应用程序中，打开 Surface Dial 菜单时，菜单现在包括用于调节笔类型和画刷厚度的工具。 启用标尺后，会将相应的工具添加到菜单中，以便设备控制标尺的位置和角度。
Surface Dial 菜单，其中包含 Windows Ink 工具栏 的笔选择工具
的笔划大小工具
Windows Ink 工具栏 带有笔划大小工具的 Surface Dial 菜单
标尺工具
Surface Dial 菜单，其中包含用于 Windows Ink 工具栏的标尺工具
用户自定义
用户可以通过 Windows 设置 -> 设备 -> Wheel 页面，自定义拨号器体验的一些方面，包括默认工具、振动（或触觉反馈），以及书写（或惯用）手。
自定义 Surface Dial 用户体验时，应始终确保特定功能或行为可供用户使用。
自定义工具
在这里，我们将讨论 UX 和开发人员指南，以自定义 Surface Dial 菜单上可用的工具。
自定义工具的 UX 指南
确保工具与当前上下文相对应 当你清晰直观地了解工具的作用以及 Surface Dial 交互的工作原理时，可帮助用户快速学习并专注于其任务。
尽可能少地减少应用工具的数量
Surface Dial 菜单可以容纳七个项目。 如果有八个或更多项，用户需要旋转 Dial 以查看溢出菜单中可用的工具，导致菜单难以导航，工具难以发现和选择。
我们建议为应用或应用上下文提供单个自定义工具。 这样做允许你根据用户的操作来设置该工具，而无需他们激活 Surface Dial 菜单并选择一个工具。
动态更新工具集合
由于 Surface Dial 菜单项不支持禁用状态，因此应基于用户上下文（当前视图或焦点窗口）动态添加和删除工具（包括内置默认工具）。 如果工具与当前活动无关，或者它冗余，请将其删除。
重要
向菜单添加项时，请确保该项尚不存在。
请勿删除内置系统卷设置工具
通常，用户始终需要音量控制。 它们可能会在使用应用时收听音乐，因此应始终可从 Surface Dial 菜单访问音量和下一曲目工具。 （下一个曲目工具在媒体播放时自动添加到菜单中。）
确保菜单的组织方式保持一致
这有助于用户发现和了解使用应用时可用的工具，并帮助提高切换工具的效率。
提供与内置图标一致的高质量图标
图标可以传达专业性和卓越性，并激发用户的信任。
提供高质量的 64 x 64 像素 PNG 图像（44 x 44 是支持最小的）
确保背景透明
图标应填充大部分图像
白色图标应具有在高对比度模式下可见的黑色轮廓
具有 Alpha 背景的图标
带有默认主题 的滚轮菜单上显示的 图标
在高对比度白色主题的滚轮菜单中显示的图标
使用简洁的描述性名称
工具名称随工具图标一起显示在工具菜单中，并且也由屏幕阅读器使用。
名称应足够短，以放入轮盘菜单的中心圆圈内。
名称应清楚地标识主要动作（可以暗示补充动作）：
滚动显示两个旋转方向的效果
撤销是一个主要操作，而重做（作为补充操作）可以由用户推断并轻松发现。
开发人员指南
你可以自定义 Surface Dial 体验，以通过一组全面的 Windows 运行时 API 来补充应用中的功能。
如前所述，默认 Surface Dial 菜单预填充了一组内置工具，涵盖各种基本系统功能（系统音量、系统亮度、滚动、缩放、撤消和媒体控制，当系统检测到正在进行的音频或视频播放时）。 但是，这些默认工具可能无法提供应用所需的功能。
在以下部分中，我们将介绍如何向 Surface Dial 菜单添加自定义工具，并指定公开哪些内置工具。
从 RadialController 自定义下载此示例的更可靠版本。
添加自定义工具
在此示例中，我们添加了一个基本自定义工具，用于将旋转和单击事件中的输入数据传递到某些 XAML UI 控件。
首先，我们在 XAML 中声明 UI（只是滑块和切换按钮）。
示例应用 UI
Orientation="Horizontal" Grid.Row="0"> Text="RadialController customization sample" VerticalAlignment="Center" Style="{ThemeResource HeaderTextBlockStyle}" Margin="10,0,0,0" />
VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="1"> Width="300" HorizontalAlignment="Left"/> HorizontalAlignment="Left"/>
然后，在代码隐藏中，我们将自定义工具添加到 Surface Dial 菜单，并声明 RadialController 输入处理程序。
我们通过调用 CreateForCurrentView，获取对 Surface Dial （myController） 的 RadialController 对象的引用。
然后，我们通过调用 RadialControllerMenuItem.CreateFromIcon来创建一个 RadialControllerMenuItem 的实例（myItem）。
接下来，我们将该项追加到菜单项的集合中。
我们声明 RadialController 对象的输入事件处理程序（ButtonClicked 和 RotationChanged）。
最后，我们定义事件处理程序。
public sealed partial class MainPage : Page
{
RadialController myController;
public MainPage()
{
this.InitializeComponent();
// Create a reference to the RadialController.
myController = RadialController.CreateForCurrentView();
// Create an icon for the custom tool.
RandomAccessStreamReference icon =
RandomAccessStreamReference.CreateFromUri(
new Uri("ms-appx:///Assets/StoreLogo.png"));
// Create a menu item for the custom tool.
RadialControllerMenuItem myItem =
RadialControllerMenuItem.CreateFromIcon("Sample", icon);
// Add the custom tool to the RadialController menu.
myController.Menu.Items.Add(myItem);
// Declare input handlers for the RadialController.
myController.ButtonClicked += MyController_ButtonClicked;
myController.RotationChanged += MyController_RotationChanged;
}
// Handler for rotation input from the RadialController.
private void MyController_RotationChanged(RadialController sender,
RadialControllerRotationChangedEventArgs args)
{
if (RotationSlider.Value + args.RotationDeltaInDegrees > 100)
{
RotationSlider.Value = 100;
return;
}
else if (RotationSlider.Value + args.RotationDeltaInDegrees < 0)
{
RotationSlider.Value = 0;
return;
}
RotationSlider.Value += args.RotationDeltaInDegrees;
}
// Handler for click input from the RadialController.
private void MyController_ButtonClicked(RadialController sender,
RadialControllerButtonClickedEventArgs args)
{
ButtonToggle.IsOn = !ButtonToggle.IsOn;
}
}
运行应用时，我们使用 Surface Dial 与其交互。 首先，按下并按住以打开菜单，选择我们的自定义工具。 激活自定义工具后，可以通过旋转拨盘调节滑块控件，并通过单击拨盘来切换开关。
使用 Surface Dial 自定义工具激活的示例应用界面
指定内置工具
可以使用 RadialControllerConfiguration 类自定义应用的内置菜单项集合。
例如，如果你的应用没有任何滚动或缩放区域，并且不需要撤消/重做功能，则可以从菜单中删除这些工具。 这将打开菜单上的空间，为应用添加自定义工具。
重要
Surface Dial 菜单必须至少有一个菜单项。 如果在添加其中一个自定义工具之前删除了所有默认工具，则会还原默认工具，并将工具追加到默认集合中。
根据设计准则，我们不建议删除媒体控制工具（音量和上一/下一曲目），因为用户在执行其他任务时经常播放背景音乐。
下面介绍如何配置 Surface Dial 菜单，以仅包含音量和下一/上一曲目媒体控件。
public MainPage()
{
...
//Remove a subset of the default system tools
RadialControllerConfiguration myConfiguration =
RadialControllerConfiguration.GetForCurrentView();
myConfiguration.SetDefaultMenuItems(new[]
{
RadialControllerSystemMenuItemKind.Volume,
RadialControllerSystemMenuItemKind.NextPreviousTrack
});
}
自定义交互
如上所述，Surface Dial 支持三种手势（按住、旋转、单击），并具有相应的默认交互。
确保基于这些手势的任何自定义交互对于所选作或工具都有意义。
注释
交互体验取决于 Surface Dial 菜单的状态。 如果菜单处于活动状态，它会处理输入；否则，你的应用会处理输入。
按住
此手势激活并显示 Surface Dial 菜单，没有与此手势关联的应用功能。
默认情况下，菜单显示在用户屏幕的中心。 但是，用户可以抓取它并将其移动到他们选择的任何位置。
注释
当 Surface Dial 放置在 Surface Studio 的屏幕上时，菜单会居中显示在 Surface Dial 所在的屏幕位置。
旋转
Surface Dial 主要用于支持对模拟值或控件进行平滑增量调整的交互的旋转。
设备可以顺时针和逆时针旋转，还可以提供触觉反馈来指示离散距离。
注释
在 Windows 设置 -> 设备 -> Wheel 页中，用户可以禁用触觉反馈。
自定义交互的 UX 指南
具有连续或高旋转敏感度的工具应禁用触觉反馈
触觉反馈与活动工具的旋转敏感度匹配。 建议为具有连续或高旋转敏感度的工具禁用触觉反馈，因为用户体验可能会感到不舒服。
主手不应影响基于旋转的交互
Surface Dial 无法检测正在使用的手，但用户可以在 Windows 设置 - 设备 ->> 触控笔和 Windows 墨迹中设置书写（或占主手）。
对于 的所有轮换交互，应考虑 区域设置
通过调整交互以适应区域设置和从右向左的布局来最大化客户满意度。
Dial 菜单上的内置工具和命令遵循以下基于轮换的交互准则：
左边
向上
出局
Surface Dial 的 图像
正确
向下
在
概念方向
映射到 Surface Dial
顺时针旋转
逆时针旋转
水平
基于 Surface Dial 顶部的左右映射
正确
左边
垂直
基于 Surface Dial 左侧的上下映射功能
向下
向上
Z 轴
映射为上/右方向（或更接近）映射到下/左的 Out （或更远）
在
出局
开发人员指南
当用户旋转设备时，会根据相对于旋转方向的增量（RadialControllerRotationChangedEventArgs.RotationDeltaInDegrees）触发 RadialController.RotationChanged 事件。 可以使用 RadialController.RotationResolutionInDegrees 属性设置数据的敏感度（或分辨率）。
注释
默认情况下，仅当设备旋转至少 10 度时，才会将旋转输入事件传送到 RadialController 对象。 每个输入事件都会导致设备振动。
一般情况下，建议在旋转分辨率设置为小于 5 度时禁用触觉反馈。 这为持续交互提供了更流畅的体验。
可以通过设置 RadialController.UseAutomaticHapticFeedback 属性为自定义工具启用和禁用触觉反馈。
注释
不能替代系统工具（如音量控制）的触觉行为。 对于这些工具，触觉反馈只能由用户从滚轮设置页禁用。
下面是有关如何自定义旋转数据的分辨率以及启用或禁用触觉反馈的示例。
private void MyController_ButtonClicked(RadialController sender,
RadialControllerButtonClickedEventArgs args)
{
ButtonToggle.IsOn = !ButtonToggle.IsOn;
if(ButtonToggle.IsOn)
{
//high resolution mode
RotationSlider.LargeChange = 1;
myController.UseAutomaticHapticFeedback = false;
myController.RotationResolutionInDegrees = 1;
}
else
{
//low resolution mode
RotationSlider.LargeChange = 10;
myController.UseAutomaticHapticFeedback = true;
myController.RotationResolutionInDegrees = 10;
}
}
点击
单击 Surface Dial 类似于单击鼠标左键（设备的旋转状态对此作没有影响）。
UX 指南
如果用户无法轻松从结果中恢复，请不要将动作或命令映射到此手势
基于用户单击 Surface Dial，您的应用程序所执行的任何操作都必须是可逆的。 始终使用户能够轻松遍历应用后退堆栈并还原以前的应用状态。
二进制操作（如静音/取消静音或显示/隐藏）通过单击手势能够提供良好的用户体验。
不应通过单击 Surface Dial 启用或禁用 模式工具。
某些应用/工具模式可能会与依赖于旋转的交互发生冲突或禁用。 Windows Ink 工具栏中的标尺等工具应通过其他 UI 功能打开或关闭（墨迹工具栏提供内置 ToggleButton 控件）。
对于模态工具，请将活动 Surface Dial 菜单项映射到目标工具或以前选择的菜单项。
开发人员指南
单击 Surface Dial 后，将触发 RadialController.ButtonClicked 事件。
RadialControllerButtonClickedEventArgs 包括一个 Contact 属性，该属性包含 Surface Studio 屏幕上 Surface Dial 触点的位置和边界区域。 如果 Surface Dial 未与屏幕联系，则此属性为 null。
屏幕上
如前所述，Surface Dial 可与 Surface Studio 结合使用，以在特殊的屏幕模式下显示 Surface Dial 菜单。
在此模式下，您可以进一步集成和自定义应用中的 Dial 交互体验。 仅 Surface Dial 和 Surface Studio 提供的独特体验示例包括：
根据 Surface Dial 的位置显示上下文工具（如调色板），使其更易于查找和使用。
根据 Surface Dial 所在的 UI 来设置活动工具
根据 Surface Dial 所在位置放大屏幕区域
基于屏幕位置的独特游戏交互
屏幕交互的 UX 指南
应用程序在检测到屏幕上的 Surface Dial 时应做出响应
视觉反馈有助于向用户指示你的应用已检测到 Surface Studio 屏幕上的设备。
根据设备位置调整与 Surface Dial 相关的 UI
设备（和用户的身体）可以遮挡关键 UI，具体取决于用户把它放在哪里。
调整与 Surface Dial 相关的用户界面，基于用户交互
除了硬件遮挡之外，用户使用设备的手和手臂还可以遮挡屏幕的一部分。
遮挡区域取决于当前用于设备的那只手。 由于设备设计主要用于非主导手，因此 Surface Dial 相关的用户界面应针对用户指定的相反手进行调整（Windows 设置 > 设备 > 笔和 Windows 墨迹 > 选择您使用哪只手进行书写的设置）。
交互应响应 Surface Dial 位置，而不是移动
设备的脚设计为紧贴显示屏，而不是滑动，因为它并不是一个精密指向设备。 因此，我们预计用户更有可能习惯于拿起并放置 Surface Dial，而不是在屏幕上拖动它。
使用屏幕位置确定用户意向
基于 UI 上下文（例如靠近控件、画布或窗口）设置活动工具可以通过减少执行任务所需的步骤来提高用户体验。
开发人员指南
当 Surface Dial 放置在 Surface Studio 的数字化器图面上时，将触发 RadialController.ScreenContactStarted 事件，并向应用提供联系信息（RadialControllerScreenContactStartedEventArgs.Contact）。
同样，如果在与 Surface Studio 的数字化器图面接触时单击 Surface Dial，则会触发 RadialController.ButtonClicked 事件，并向应用提供联系信息（RadialControllerButtonClickedEventArgs.Contact）。
联系人信息（RadialControllerScreenContact） 包括应用坐标空间（RadialControllerScreenContact.Position）中 Surface Dial 中心的 X/Y 坐标，以及设备独立像素（DIP）中的边界矩形（RadialControllerScreenContact.Bounds）。 此信息对于为活动工具提供上下文并向用户提供与设备相关的视觉反馈非常有用。
在以下示例中，我们创建了一个基本应用，其中包含四个不同的部分，每个部分包括一个滑块和一个切换。 然后，我们使用 Surface Dial 的屏幕位置来指示 Surface Dial 控制哪些滑块和切换开关集。
首先，我们在 XAML 中声明 UI（四个部分，每个部分都有一个滑块和切换按钮）。
示例应用 UI
Orientation="Horizontal" Grid.Row="0"> Text="RadialController customization sample" VerticalAlignment="Center" Style="{ThemeResource HeaderTextBlockStyle}" Margin="10,0,0,0" />
Grid.Row="0" Grid.Column="0"> VerticalAlignment="Center" HorizontalAlignment="Center"> Width="300" HorizontalAlignment="Left"/> HorizontalAlignment="Left"/>
Grid.Row="0" Grid.Column="1"> VerticalAlignment="Center" HorizontalAlignment="Center"> Width="300" HorizontalAlignment="Left"/> HorizontalAlignment="Left"/>
Grid.Row="1" Grid.Column="0"> VerticalAlignment="Center" HorizontalAlignment="Center"> Width="300" HorizontalAlignment="Left"/> HorizontalAlignment="Left"/>
Grid.Row="1" Grid.Column="1"> VerticalAlignment="Center" HorizontalAlignment="Center"> Width="300" HorizontalAlignment="Left"/> HorizontalAlignment="Left"/>
这是后台代码，里面定义了用于 Surface Dial 屏幕位置的处理程序。
Slider ActiveSlider;
ToggleSwitch ActiveSwitch;
Grid ActiveGrid;
public MainPage()
{
...
myController.ScreenContactStarted +=
MyController_ScreenContactStarted;
myController.ScreenContactContinued +=
MyController_ScreenContactContinued;
myController.ScreenContactEnded +=
MyController_ScreenContactEnded;
myController.ControlLost += MyController_ControlLost;
//Set initial grid for Surface Dial input.
ActiveGrid = Grid0;
ActiveSlider = RotationSlider0;
ActiveSwitch = ButtonToggle0;
}
private void MyController_ScreenContactStarted(RadialController sender,
RadialControllerScreenContactStartedEventArgs args)
{
//find grid at contact location, update visuals, selection
ActivateGridAtLocation(args.Contact.Position);
}
private void MyController_ScreenContactContinued(RadialController sender,
RadialControllerScreenContactContinuedEventArgs args)
{
//if a new grid is under contact location, update visuals, selection
if (!VisualTreeHelper.FindElementsInHostCoordinates(
args.Contact.Position, RootGrid).Contains(ActiveGrid))
{
ActiveGrid.Background = new
SolidColorBrush(Windows.UI.Colors.White);
ActivateGridAtLocation(args.Contact.Position);
}
}
private void MyController_ScreenContactEnded(RadialController sender, object args)
{
//return grid color to normal when contact leaves screen
ActiveGrid.Background = new
SolidColorBrush(Windows.UI.Colors.White);
}
private void MyController_ControlLost(RadialController sender, object args)
{
//return grid color to normal when focus lost
ActiveGrid.Background = new
SolidColorBrush(Windows.UI.Colors.White);
}
private void ActivateGridAtLocation(Point Location)
{
var elementsAtContactLocation =
VisualTreeHelper.FindElementsInHostCoordinates(Location,
RootGrid);
foreach (UIElement element in elementsAtContactLocation)
{
if (element as Grid == Grid0)
{
ActiveSlider = RotationSlider0;
ActiveSwitch = ButtonToggle0;
ActiveGrid = Grid0;
ActiveGrid.Background = new SolidColorBrush(
Windows.UI.Colors.LightGoldenrodYellow);
return;
}
else if (element as Grid == Grid1)
{
ActiveSlider = RotationSlider1;
ActiveSwitch = ButtonToggle1;
ActiveGrid = Grid1;
ActiveGrid.Background = new SolidColorBrush(
Windows.UI.Colors.LightGoldenrodYellow);
return;
}
else if (element as Grid == Grid2)
{
ActiveSlider = RotationSlider2;
ActiveSwitch = ButtonToggle2;
ActiveGrid = Grid2;
ActiveGrid.Background = new SolidColorBrush(
Windows.UI.Colors.LightGoldenrodYellow);
return;
}
else if (element as Grid == Grid3)
{
ActiveSlider = RotationSlider3;
ActiveSwitch = ButtonToggle3;
ActiveGrid = Grid3;
ActiveGrid.Background = new SolidColorBrush(
Windows.UI.Colors.LightGoldenrodYellow);
return;
}
}
}
运行应用时，我们使用 Surface Dial 与其交互。 首先，我们将设备放置在 Surface Studio 屏幕上，应用程序检测到该设备并将其与右下角部分关联（请参阅图像）。 然后，按住 Surface Dial 打开菜单并选择自定义工具。 激活自定义工具后，旋转 Surface Dial 可调整滑块控件，单击 Surface Dial 可切换开关。
使用 Surface Dial 自定义工具激活的示例应用界面
概要
本主题概述了 Surface Dial 输入设备，包括用户体验 (UX) 和开发人员指南，介绍如何在使用 Surface Studio 时自定义屏幕外场景和屏幕内场景的用户体验。
请将你的问题、建议和反馈发送给 radialcontroller@microsoft.com。
相关文章
教程：在 Windows 应用中支持 Surface Dial（和其他滚轮设备）
API 参考
RadialController 类
RadialControllerButtonClickedEventArgs 类
RadialControllerConfiguration 类
RadialControllerControlAcquiredEventArgs 类
RadialControllerMenu 类
RadialControllerMenuItem 类
RadialControllerRotationChangedEventArgs 类
RadialControllerScreenContact 类
RadialControllerScreenContactContinuedEventArgs 类
RadialControllerScreenContactStartedEventArgs 类
RadialControllerMenuKnownIcon 枚举
RadialControllerSystemMenuItemKind 枚举类型
示例
主题示例
调节器的自定义设置
其他示例
涂色本示例
入门教程：在 Windows 应用中支持 Surface Dial（及其他滚轮设备）
通用 Windows 平台示例（C# 和 C++）
Windows 桌面示例