许多交互体验在游戏板、遥控器和键盘之间共享
在 Windows 应用程序中构建交互体验,确保你的应用可用,并且可通过传统输入类型的电脑、笔记本电脑和平板电脑(鼠标、键盘、触摸等)以及电视和 Xbox 10 英尺 体验的典型输入类型(例如游戏板和遥控器)进行访问。
有关 10 英尺体验中的 Windows 应用程序的常规设计指南,请参阅 Xbox 和 TV 设计指南。
概述
在本主题中,我们将讨论在交互设计中应考虑的内容(或者平台可能为您处理的部分),并提供有关如何构建无论设备、输入类型或用户能力和偏好如何都能流畅使用的 Windows 应用程序的指导和建议。
总之,您的应用程序在 2 英尺 环境中使用起来应该像在 10 英尺 环境中一样直观和简单(反之亦然)。 支持用户的首选设备,使 UI 焦点清晰明了,组织内容以确保导航的一致性和可预测性,并为用户提供他们想要执行的工作的最短路径。
注释
本主题中的大多数代码片段都在 XAML/C# 中;但是,原则和概念适用于所有 Windows 应用。 如果要开发适用于 Xbox 的 HTML/JavaScript Windows 应用,请查看 GitHub 上的优秀 TVHelpers 库。
针对 2 英尺和 10 英尺体验进行优化
建议至少对您的应用程序进行测试,以确保它们在 2 英尺和 10 英尺的使用场景中都能够正常运行,并且所有功能都可被 Xbox 手柄和远程控制器发现并使用。
以下是一些其他方法,可以优化您的应用程序,使其能够在 2 英尺和 10 英尺的观看体验中使用,并兼容所有输入设备(每个链接都指向本主题的相应部分)。
注释
由于 Xbox 游戏板和远程控件支持许多 Windows 键盘行为和体验,因此这些建议适用于这两种输入类型。 有关更详细的键盘信息 ,请参阅键盘交互 。
| 功能 / 特点 | Description |
|---|---|
| XY 焦点导航和交互 | 通过 XY 焦点导航 ,用户可以在应用的 UI 周围导航。 但是,这会限制用户向上、向下、向左和向右导航。 本部分概述了有关处理此事项和其他注意事项的建议。 |
| 鼠标模式 | 对于某些类型的应用程序(如地图或绘图和绘制应用),XY 焦点导航并不实用,甚至可能。 在这些情况下, 鼠标模式 允许用户使用游戏板或遥控器自由导航,就像电脑上的鼠标一样。 |
| 焦点视觉 | 焦点视觉对象是突出显示当前聚焦的 UI 元素的边框。 这有助于用户快速识别他们正在浏览或与之交互的 UI。 |
| 专注参与 | 焦点参与要求用户在 UI 元素具有焦点时,通过在游戏手柄或远程控制器上按 A/Select 按钮来进行交互。 |
| 硬件按钮 | 游戏板和远程控制提供截然不同的按钮和配置。 |
游戏板和遥控器
就像键盘和鼠标适用于电脑一样,触摸适用于手机和平板电脑,游戏板和遥控器也是 10 英尺体验的主要输入设备。 本部分介绍硬件按钮及其用途。 在 XY 焦点导航和交互以及鼠标模式中,你将学习如何在使用这些输入设备时优化你的应用。
即插即用的游戏手柄和遥控器的表现质量取决于应用程序中对键盘的支持程度。 确保你的应用适用于游戏板/远程的一种好方法是确保它适用于电脑上的键盘,然后使用游戏板/远程进行测试,以在 UI 中查找薄弱点。
硬件按钮
在整个文档中,按钮将由下图中提供的名称引用。
从图中可以看到,一些按钮在游戏手柄上支持但在遥控器上不支持,反之亦然。 虽然可以使用仅在一个输入设备上支持的按钮来更快地导航 UI,但请注意,使用这些按钮进行关键交互可能会造成用户无法与 UI 的某些部分交互的情况。
下表列出了 Windows 应用支持的所有硬件按钮,以及哪些输入设备支持它们。
| Button | 游戏手柄 | 遥控 |
|---|---|---|
| A/Select 按钮 | 是的 | 是的 |
| B/后退按钮 | 是的 | 是的 |
| 方向垫 (D-pad) | 是的 | 是的 |
| 菜单按钮 | 是的 | 是的 |
| “查看”按钮 | 是的 | 是的 |
| X 和 Y 按钮 | 是的 | 否 |
| 左摇杆 | 是的 | 否 |
| 右摇杆 | 是的 | 否 |
| 左右触发器 | 是的 | 否 |
| 左右保险杠 | 是的 | 否 |
| OneGuide 按钮 | 否 | 是的 |
| “音量”按钮 | 否 | 是的 |
| 通道按钮 | 否 | 是的 |
| 媒体控件按钮 | 否 | 是的 |
| “静音”按钮 | 否 | 是的 |
内置按钮支持
UWP 会自动将现有键盘输入行为映射到游戏板和远程控制输入。 下表列出了这些内置映射。
| 键盘 | 游戏手柄/遥控器 |
|---|---|
| 箭头键 | D-pad(又称游戏手柄上的左摇杆) |
| 空格键 | A/Select 按钮 |
| 进入 | A/Select 按钮 |
| 逃跑 | B/后退按钮* |
*当应用未处理 B 按钮的 KeyDown 和 KeyUp 事件时,将触发 SystemNavigationManager.BackRequested 事件,这应会导致应用中的后退导航。 但是,必须自行实现此目的,如以下代码片段所示:
// This code goes in the MainPage class
public MainPage()
{
this.InitializeComponent();
// Handling Page Back navigation behaviors
SystemNavigationManager.GetForCurrentView().BackRequested +=
SystemNavigationManager_BackRequested;
}
private void SystemNavigationManager_BackRequested(
object sender,
BackRequestedEventArgs e)
{
if (!e.Handled)
{
e.Handled = this.BackRequested();
}
}
public Frame AppFrame { get { return this.Frame; } }
private bool BackRequested()
{
// Get a hold of the current frame so that we can inspect the app back stack
if (this.AppFrame == null)
return false;
// Check to see if this is the top-most page on the app back stack
if (this.AppFrame.CanGoBack)
{
// If not, set the event to handled and go back to the previous page in the
// app.
this.AppFrame.GoBack();
return true;
}
return false;
}
注释
如果 B 按钮用于返回,则不要在 UI 中显示后退按钮。 如果使用 导航视图,则后退按钮将自动隐藏。 有关向后导航的详细信息,请参阅 Windows 应用的导航历史记录和向后导航。
Xbox One 上的 Windows 应用还支持按 “菜单” 按钮打开上下文菜单。 有关详细信息,请参阅 CommandBar 和 ContextFlyout。
加速器支持
快捷键是可用于加速通过 UI 导航的按钮。 但是,这些按钮对特定输入设备可能是唯一的,因此请记住,并非所有用户都可以使用这些功能。 事实上,游戏板目前是唯一支持 Xbox One 上 Windows 应用的加速器功能的输入设备。
下表列出了 UWP 中内置的加速器支持,以及可以自行实现的加速器支持。 利用自定义 UI 中的这些行为,提供一致的友好用户体验。
| 交互 | 键盘/鼠标 | 游戏手柄 | 内置用于: | 建议用于: |
|---|---|---|---|---|
| 向上/向下翻页 | 向上/向下翻页 | 左/右触发器 |
CalendarView、 ListBox、 ListViewBase、 ListView、 ScrollViewer、 Selector、 LoopingSelector、 ComboBox、 FlipView |
支持垂直滚动的视图 |
| 页面左/右 | None | 左/右保险杠 |
ListBox、ListViewBase、ListView、ScrollViewer选择器、LoopingSelector、FlipView |
支持水平滚动的视图 |
| 放大缩小字体功能 放大缩小字体功能 | Ctrl + - | 左/右触发器 | None |
ScrollViewer,支持放大和缩小的视图 |
| 打开/关闭导航窗格 | None | 查看 | None | 导航窗格 |
| 搜寻 | None | Y 按钮 | None | 应用中主搜索函数的快捷方式 |
| 打开上下文菜单 | 右键单击 | 菜单按钮 | ContextFlyout | 上下文菜单 |
XY 焦点导航和交互
如果你的应用支持键盘的正确焦点导航,这将很好地适用于游戏手柄和远程控制。 使用箭头键的导航将映射到 D 键 (以及游戏板上的 左摇杆 ),并且与 UI 元素的交互将映射到 Enter/Select 键(请参阅 游戏板和远程控制)。
许多事件和属性都由键盘和游戏板使用,它们同时触发 KeyDown 和 KeyUp 事件,它们只会导航到具有属性 IsTabStop="True" 和的 Visibility="Visible"控件。 关于键盘设计的指南,请参阅 键盘交互。
如果键盘支持正确实施,你的应用将运行得相当不错,但是,可能需要一些额外的工作来支持每个情景。 考虑你的应用的特定需求,以尽可能提供最佳的用户体验。
重要
默认情况下,为 Xbox One 上运行的 Windows 应用启用鼠标模式。 若要禁用鼠标模式并启用 XY 焦点导航,请设置 Application.RequiresPointerMode=WhenRequested。
调试焦点问题
FocusManager.GetFocusedElement 方法将告诉你当前具有焦点的元素。 这对于焦点视觉对象位置可能不明显的情况非常有用。 可以将此信息记录到 Visual Studio 输出窗口,如下所示:
page.GotFocus += (object sender, RoutedEventArgs e) =>
{
FrameworkElement focus = FocusManager.GetFocusedElement() as FrameworkElement;
if (focus != null)
{
Debug.WriteLine("got focus: " + focus.Name + " (" +
focus.GetType().ToString() + ")");
}
};
XY 导航可能无法按预期方式工作有三个常见原因:
- IsTabStop 或 Visibility 属性设置错误。
- 获取焦点的控件实际上比你想象的要大 — XY 导航查看控件(ActualWidth 和 ActualHeight)的总大小,而不仅仅是呈现有趣内容的控件部分。
- 一个可聚焦控件位于另一个控件之上- XY 导航不支持重叠的控件。
如果 XY 导航在修复这些问题后仍无法正常工作,则可以使用 重写默认导航中所述的方法手动指向要获得焦点的元素。
如果 XY 导航按预期工作,但没有显示焦点视觉对象,则以下问题之一可能是原因:
- 你重新模板化了控件,但未包含焦点视觉效果。 手动设置
UseSystemFocusVisuals="True"或添加焦点视觉对象。 - 通过调用
Focus(FocusState.Pointer)移动焦点。 FocusState 参数控制焦点视觉的状态和行为。 一般情况下,应将其FocusState.Programmatic设置为该对象,这将保持焦点视觉对象可见(如果之前可见),如果它以前处于隐藏状态,则将其隐藏。
本部分的其余部分详细介绍了使用 XY 导航时的常见设计挑战,并提供几种方法来解决这些问题。
无法访问的 UI
由于 XY 焦点导航会限制用户向上、向下、向左和向右移动,因此最终可能会出现 UI 部分无法访问的情况。 下图演示了 XY 焦点导航不支持的 UI 布局类型示例。 请注意,中间的元素无法通过使用游戏手柄或遥控器进行访问,因为垂直和水平导航将被优先考虑,中间元素的优先级永远不足以获得焦点。
如果由于某种原因无法重新排列 UI,请使用下一部分中讨论的方法来替代默认焦点行为。
覆盖默认导航
虽然通用 Windows 平台尝试确保 D-pad/左侧摇杆导航对用户有意义,但它无法保证针对应用的意图进行优化的行为。 确保为应用优化导航的最佳方式是使用游戏板对其进行测试,并确认用户能够以对应用场景有意义的方式访问每个 UI 元素。 当应用场景需要一些无法通过所提供的 XY 焦点导航实现的行为时,请考虑遵循以下部分中的建议和/或覆写行为,以便将焦点放置到合逻辑的项目上。
以下代码片段演示如何替代 XY 焦点导航行为:
<StackPanel>
<Button x:Name="MyBtnLeft"
Content="Search" />
<Button x:Name="MyBtnRight"
Content="Delete"/>
<Button x:Name="MyBtnTop"
Content="Update" />
<Button x:Name="MyBtnDown"
Content="Undo" />
<Button Content="Home"
XYFocusLeft="{x:Bind MyBtnLeft}"
XYFocusRight="{x:Bind MyBtnRight}"
XYFocusDown="{x:Bind MyBtnDown}"
XYFocusUp="{x:Bind MyBtnTop}" />
</StackPanel>
在这种情况下,当焦点位于按钮上 Home 并且用户导航到左侧时,焦点将移动到 MyBtnLeft 按钮;如果用户导航到右侧,焦点将移动到 MyBtnRight 按钮,依此类移。
若要防止焦点从控件向某个方向移动,请使用XYFocus* 属性将其指向同一控件:
<Button Name="HomeButton"
Content="Home"
XYFocusLeft ="{x:Bind HomeButton}" />
使用这些XYFocus属性时,控件父级可以在下一个焦点候选项离开其可视化树时强制导航其子级,除非具有焦点的子级使用同XYFocus一属性。
<StackPanel Orientation="Horizontal" Margin="300,300">
<UserControl XYFocusRight="{x:Bind ButtonThree}">
<StackPanel>
<Button Content="One"/>
<Button Content="Two"/>
</StackPanel>
</UserControl>
<StackPanel>
<Button x:Name="ButtonThree" Content="Three"/>
<Button Content="Four"/>
</StackPanel>
</StackPanel>
在上面的示例中,如果焦点位于 Button Two 上,并且用户导航到右侧,则最佳焦点候选项为 Button “四”;但是,焦点将移动到 Button “三”,因为父级 UserControl 强制它在从可视化树中移出时导航到该位置。
最少单击的路径
尝试允许用户在单击次数最少时执行最常见的任务。 在以下示例中, TextBlock 放置在 “播放 ”按钮(最初获得焦点)和常用元素之间,以便将不必要的元素放置在优先级任务之间。
在以下示例中, TextBlock 放置在 “播放 ”按钮上方。 只需重新排列 UI,以便在优先级任务之间不放置不必要的元素将极大地提高应用的可用性。
CommandBar 和 ContextFlyout
使用 CommandBar 时,请记住在 问题:长滚动列表/网格后的 UI 元素中提到的滚动浏览列表的问题。 下图显示的 UI 布局中,CommandBar 处于列表/网格的底部。 用户需要一直向下滚动到列表/网格才能到达 CommandBar。
如果将列表/网格放在 CommandBar上面 ,该怎么办? 虽然向下滚动列表/网格的用户必须向上滚动才能到达CommandBar,但相比之前的配置,这种布置略微减少了导航的工作量。 请注意,假设应用的初始焦点位于列表/网格下方或上方 CommandBar;如果初始焦点位于列表/网格下方,此方法将不起作用。 如果这些 CommandBar 项目是全局操作项,且不需要经常访问(例如 “同步” 按钮),那么可以接受将它们放置在列表/网格的上方。
虽然不能垂直堆叠 CommandBar项,但将它们放置在滚动方向(例如,垂直滚动列表的左侧或右侧,或水平滚动列表的顶部或底部)是另一个选项,你可以考虑它是否适用于 UI 布局。
如果你的应用具有一个 CommandBar,其中的项需要用户能够方便访问,那么可以考虑将这些项放入 ContextFlyout 中,并从 CommandBar 中删除它们。
ContextFlyout 是 UIElement 的属性,是与该元素关联的 上下文菜单 。 在电脑上,右键单击包含ContextFlyout的元素时,将弹出上下文菜单。 在 Xbox One 上,当焦点位于此类元素上时按 菜单 按钮时,将发生这种情况。
UI 布局挑战
由于 XY 焦点导航的性质,某些 UI 布局更具挑战性,应逐个逐个评估。 虽然没有单一的“正确”方法,你选择哪种解决方案符合应用的特定需求,但有一些技术可用于提供出色的电视体验。
为了更好地理解这一点,我们来看一个虚构的应用程序,它展示了一些这些问题以及克服这些问题的技术。
注释
此虚假应用旨在说明 UI 问题和潜在解决方案,并不适合显示特定应用的最佳用户体验。
下面是一个虚构的房地产应用,其中显示了可供销售的房屋列表、地图、房产说明和其他信息。 此应用提出了三种挑战,你可以使用以下技术来克服这些挑战:
问题:位于长滚动列表/网格之后的 UI 元素
下图中显示的属性 的 ListView 是一个非常长的滚动列表。 如果用户导航到列表时不需要ListView,焦点将放在列表中的第一个项目上。 要使用户能够访问 “上一个 ”或 “下一步 ”按钮,他们必须浏览列表中的所有项。 在这种情况下,如果要求用户遍历整个列表是痛苦的,也就是说,当列表不够短,无法接受此体验时,可能需要考虑其他选项。
Solutions
除非初始焦点放置在页面底部,否则放置在长滚动列表上方的 UI 元素通常比放置在下方更容易访问。 如果此新布局适用于其他设备,则更改所有设备系列的布局,而不是仅为 Xbox One 执行特殊的 UI 更改可能是一种成本较低的方法。 此外,将 UI 元素放置在与滚动方向相反的位置(即,对于垂直滚动列表,水平放置;对于水平滚动列表,垂直放置)将改善其辅助功能。
需要参与时,整个ListView都将成为单个焦点目标。 用户将能够绕过列表的内容,以访问下一个可聚焦元素。 详细了解哪些控件支持参与以及如何在 Focus engagement 中使用它们。
问题:无任何可聚焦元素的 ScrollViewer
由于 XY 焦点导航依赖于一次导航到一个可聚焦的 UI 元素,因此不包含任何可聚焦元素的 ScrollViewer (如仅包含文本的一个,如本示例中所示)可能会导致用户无法查看其中 ScrollViewer的所有内容的情况。
有关此方案和其他相关方案的解决方案,请参阅 焦点参与。
问题:自由滚动 UI
当你的应用在此示例中需要自由滚动的 UI 时,例如绘图界面或地图,XY 焦点导航根本不起作用。 在这种情况下,可以打开 鼠标模式 ,以允许用户在 UI 元素内自由导航。
鼠标模式
如 XY 焦点导航和交互中所述,在 Xbox One 上,焦点通过使用 XY 导航系统移动,允许用户通过向上、向下、向左和向右移动将焦点从控件转移到控件。 但是,某些控件(如 WebView 和 MapControl)需要类似鼠标的交互,用户可在控件边界内自由移动指针。 有些应用中,用户能够像用 PC 上的鼠标一样,使用游戏手柄或遥控器在整个页面上移动指针,这样的体验是有意义的。
对于这些场景,您应请求整个页面使用指针(鼠标模式),或在页面内的某个控件上使用指针。
例如,你的应用可以有一个WebView页面,该页面仅在控件内部使用鼠标模式,而在其他地方使用 XY 焦点导航。
若要请求指针,可以在控件或页面激活时或者页面具有焦点时指定它。
注释
当控件获得焦点时,请求指针是不被支持的。
对于在 Xbox One 上运行的 XAML 和托管 Web 应用,默认情况下,整个应用的鼠标模式处于打开状态。 强烈建议关闭此功能,并针对 XY 导航优化应用。 为此,请将 Application.RequiresPointerMode 属性设置为 WhenRequested 仅在控件或页面调用鼠标模式时启用鼠标模式。
若要在 XAML 应用中执行此作,请在类中使用 App 以下代码:
public App()
{
this.InitializeComponent();
this.RequiresPointerMode =
Windows.UI.Xaml.ApplicationRequiresPointerMode.WhenRequested;
this.Suspending += OnSuspending;
}
有关详细信息,包括 HTML/JavaScript 的示例代码,请参阅 如何禁用鼠标模式。
下图显示了鼠标模式下游戏手柄/遥控器的按钮映射。
注释
鼠标模式仅在具有游戏板/远程的 Xbox One 上受支持。 在其他设备系列和输入类型上,它将被无提示忽略。
使用控件或页面上 的 RequiresPointer 属性激活其上的鼠标模式。 此属性有三个可能的值: Never (默认值) WhenEngaged和 WhenFocused。
在控件上激活鼠标模式
当用户使用某个控件 RequiresPointer="WhenEngaged"时,鼠标模式在控件上激活,直到用户取消它。 以下代码片段演示了一个简单的 MapControl 代码片段,用于激活鼠标模式:
<Page>
<Grid>
<MapControl IsEngagementRequired="true"
RequiresPointer="WhenEngaged"/>
</Grid>
</Page>
注释
如果控件在参与时激活鼠标模式,则还必须要求通过IsEngagementRequired="true"进行参与;否则,鼠标模式将不会被激活。
当控件处于鼠标模式时,其嵌套控件也将处于鼠标模式。 将忽略子级所请求的模式——父级在鼠标模式下时,子级不可能不处于鼠标模式。
此外,仅当控件获得焦点时,才会检查控件请求的模式,因此模式在具有焦点时不会动态更改。
在页面上激活鼠标模式
当页面具有属性 RequiresPointer="WhenFocused"时,当获得焦点时,将为整个页面激活鼠标模式。 以下代码片段演示如何为页面提供此属性:
<Page RequiresPointer="WhenFocused">
...
</Page>
注释
该值 WhenFocused 仅在 Page 对象上受支持。 如果尝试在控件上设置此值,将引发异常。
禁用全屏内容的鼠标模式
通常在全屏显示视频或其他类型的内容时,需要隐藏光标,因为它会分散用户的注意力。 当应用的其余部分使用鼠标模式时,会出现这种情况,但希望在显示全屏内容时关闭鼠标模式。 请将全屏内容放置在单独的Page上,并按照以下步骤进行。
- 在
App对象中,设置RequiresPointerMode="WhenRequested"。 - 在除全屏
Page以外的每个Page对象中,设置RequiresPointer="WhenFocused"。 - 对于全屏
Page,请设置RequiresPointer="Never"。
这样,在显示全屏内容时,光标永远不会显示。
焦点视觉对象
焦点视觉对象是当前具有焦点的 UI 元素周围的边框。 这有助于引导用户,以便他们能够轻松地浏览您的 UI,而不致迷失方向。
随着视觉更新和大量自定义选项添加到焦点视觉对象,开发人员可以信任单个焦点视觉对象在电脑和 Xbox One 以及支持键盘和/或游戏板/远程的任何其他 Windows 设备上都能正常工作。
虽然同样的焦点视觉可以用于不同的平台,但在 10 英尺体验中,用户遇到该视觉的上下文略有不同。 应假设用户不会完全注意整个电视屏幕,因此,重要的是确保当前聚焦元素始终对用户清晰可见,以避免用户在寻找画面时感到挫败。
请记住,在使用游戏手柄或远程控件时,默认情况下,焦点视觉会显示,但使用键盘则不会。 因此,即使你未实现它,在 Xbox One 上运行应用时也会显示它。
初始焦点视觉放置
启动应用或导航到页面时,应将焦点放在一个合理的 UI 元素上,使其成为用户进行首个操作的对象。 例如,照片应用可能会将焦点放在库中的第一个项目上,并且导航到歌曲的详细视图的音乐应用可能会将焦点放在播放按钮上,以便轻松播放音乐。
尝试将初始焦点放在应用的左上角区域(或从右到左流的右上角)。 大多数用户倾向于首先关注该角落,因为这是应用内容流通常开始的地方。
使焦点清晰可见
一个焦点视觉对象应始终在屏幕上可见,以便用户可以在不搜索焦点的情况下选取离开的位置。 同样,屏幕上应随时有一个可聚焦的项,例如,不要仅将弹出窗口与文本和无可聚焦元素一起使用。
这个规则的例外情况是全屏体验,例如观看视频或查看图像,在这种情况下,显示焦点视觉效果是不合适的。
显示焦点
显示焦点是一种照明效果,当用户将游戏板或键盘焦点移动到它们时,可对可聚焦元素(如按钮)的边框进行动画处理。 通过为聚焦元素边框添加发光效果动画,显示焦点功能可以让用户更好地理解当前位置和下一个焦点。
默认情况下,“显示焦点”处于关闭状态。 对于 10 英尺的体验,应选择在应用构造函数中设置 Application.FocusVisualKind 属性 来显示焦点。
if(AnalyticsInfo.VersionInfo.DeviceFamily == "Windows.Xbox")
{
this.FocusVisualKind = FocusVisualKind.Reveal;
}
有关详细信息,请参阅 “展示焦点”指南。
自定义焦点视觉效果
如果想自定义控件的焦点视觉,可以通过修改相关属性来实现。 可以使用多种此类属性对应用进行个性化设置。
甚至可以选择不使用系统提供的焦点视觉效果,而是使用视觉状态绘制自己的视觉效果。 若要了解详细信息,请参阅 VisualState。
轻松关闭覆盖层
在 Xbox One 上运行的应用程序中,为了吸引用户注意当前通过游戏控制器或遥控器操作的 UI 元素,UWP 会自动添加一个“烟雾”层,以遮盖弹出式用户界面以外的区域。 这无需额外工作,但在设计 UI 时需要牢记这一点。 可以在任意LightDismissOverlayMode位置设置属性FlyoutBase以启用或禁用冒烟层;默认Auto为该属性,这意味着它在 Xbox 上启用,并在其他位置禁用。 有关详细信息,请参阅 模式与浅色消除。
专注参与
集中交互旨在使使用游戏手柄或遥控器与应用程序的交互更轻松。
注释
设置焦点参与不会影响键盘或其他输入设备。
当 IsFocusEngagementEnabled 对象上的属性设置为True时,它将控件标记为需要焦点参与。 这意味着用户必须按 A/Select 按钮“参与”控件并与之交互。 完成后,可以按下B/Back按钮以退出控制,然后导航离开控件。
注释
IsFocusEngagementEnabled 是一个新的 API,尚未记录。
焦点捕获
焦点陷阱指的是当用户尝试导航应用程序的UI时,会被“困”在一个控件中,造成用户难以甚至无法移出该控件。
以下示例演示创建焦点锁定的 UI。
如果用户想从左侧按钮切换到右侧按钮,合乎逻辑的操作是只需在方向键/左摇杆上向右按两次。
但是,如果 滑块 不需要参与,将发生以下行为:当用户第一次按下右方向键时,焦点将转移到 Slider,当用户再次按下右方向键时,Slider 的句柄将向右移动。 用户会一直向右移动句柄,因此无法点击那个按钮。
可通过多种方法来解决此问题。 一个是设计不同的布局,类似于 XY 焦点导航和交互 中的房地产应用示例,我们将 上一 个按钮和 下一 个按钮重新定位在 ListView上面。 垂直堆叠控件,而不是水平堆叠,如下图所示可以解决问题。
现在,用户可以通过在 D键方向盘/左摇杆上按下上和下键来导航至各个控件,当 Slider 具有焦点时,他们可以通过按左和右键来移动 Slider 手柄,如预期一样。
解决此问题的另一种方法是要求在Slider上进行参与。 如果设置 IsFocusEngagementEnabled="True",这将导致以下行为。
要求滑块聚焦,以便用户可以导航至右侧按钮。
当Slider 需要集中焦点时,用户只需在方向键/左摇杆上按右两次即可到达右侧的按钮。 此解决方案非常出色,因为它不需要 UI 调整并生成预期行为。
项控件
除了 滑块 控件之外,还有其他可能需要参与的控件,例如:
Slider与控件不同,这些控件本身不会捕获焦点;但是,当它们包含大量数据时,它们可能会导致可用性问题。 下面是包含大量数据的 ListView 一个示例。
与示例 Slider 类似,我们尝试使用游戏板/遥控器从顶部的按钮导航到底部的按钮。
从焦点放在顶部按钮开始,按下 D 键/摇杆会将焦点放在第一个项目上 ListView (“项目 1”)。
当用户再次按下时,列表中的下一项将获得焦点,而不是底部的按钮。
为了到达该按钮,用户必须先遍历ListView中的每个项目。
ListView如果包含大量数据,这可能是不方便的,而不是最佳的用户体验。
若要解决此问题,请在ListView上设置IsFocusEngagementEnabled="True" 属性以要求参与。
这样,用户只需按下即可快速跳过ListView。 但是,除非他们在具有焦点时按 A/Select 按钮进行交互,然后按 B/Back 按钮停止交互,否则它们将无法滚动浏览列表或从列表中选择一个项目。
滚动查看器
与这些控件略有不同的是 ScrollViewer,它有自己需要考虑的特点。 如果你有 ScrollViewer 具有可聚焦内容,则默认情况下导航到 ScrollViewer 将允许你浏览其可聚焦元素。 就像在ListView中一样,你必须滚动浏览每一项才能在ScrollViewer外部导航。
如果ScrollViewer中没有可以聚焦的内容(例如仅包含文本),可以通过设置IsFocusEngagementEnabled="True",以便用户可以使用A/Select按钮来操作ScrollViewer。 在开始互动后,他们可以使用D-pad/左摇杆来滚动浏览文本,然后在完成后按B/返回按钮以退出互动。
另一种方法是将IsTabStop="True"设置在ScrollViewer上,这样用户不必手动操作控件,他们只需将焦点放在控件上,然后在ScrollViewer中没有可聚焦元素时,使用方向键/左摇杆进行滚动。
焦点交互默认值
某些控件常常会导致焦点捕获,因此它们的默认设置需要触发焦点参与,而另一些控件则默认禁用焦点参与功能,但如果启用该功能,它们将受益。 下表列出了这些控件及其默认焦点参与行为。
| 控件 | 焦点参与默认值 |
|---|---|
| 日历日期选择器 | 启用 |
| FlipView | 关闭 |
| 网格视图 | 关闭 |
| ListBox | 关闭 |
| 列表视图 | 关闭 |
| 滚动查看器 | 关闭 |
| SemanticZoom | 关闭 |
| 滑 块 | 启用 |
所有其他 Windows 控件在发生任何行为或视觉更改时 IsFocusEngagementEnabled="True"都不会产生任何影响。
概要
你可以生成针对特定设备或体验进行优化的 Windows 应用程序,但通用 Windows 平台还使你能够在 2 英尺和 10 英尺体验中生成可跨设备成功使用的应用,而不管输入设备或用户能力如何。 使用本文中的建议可以确保你的应用在电视和电脑上表现出色。