视觉反馈指南

  • 项目

当检测、解释和处理用户的交互时，使用视觉反馈显示给用户。 视觉反馈可以通过鼓励交互来帮助用户。 它表示交互的成功，这可改善用户的控制感。 它还传递系统状态并减少错误。

重要 API：Windows.Devices.Input、Windows.UI.Input、Windows.UI.Core

建议

  • 尝试仅对控件模板进行与设计意向直接相关的修改，因为广泛的更改可能会影响控件和应用程序的性能和可访问性。
    • 有关自定义控件属性（包括视觉状态属性）的详细信息，请参阅 XAML 样式。
    • 有关更改控件模板的详细信息，请参阅 UserControl 类
    • 如果需要对控件模板进行重大更改，请考虑创建自己的自定义模板化控件。 有关自定义模板化控件的示例，请参阅自定义编辑控件示例。
  • 在可能会干扰应用使用的情况下，请勿使用触摸可视化效果。 有关详细信息，请参阅 ShowGestureFeedback。
  • 除非绝对必要，否则不要显示反馈。 除非你在添加其他位置不可用的值，否则不要显示视觉反馈，使 UI 保持干净和整洁。
  • 尝试不要大幅度自定义内置 Windows 手势的视觉反馈行为，因为这样会产生不一致且令人困惑的用户体验。

其他使用指南

接触可视化效果对于需要准确性和精度的触碰交互尤其重要。 例如，你的应用应该清楚地指示点击的位置，让用户知道他们是否错过了目标、错过了多少，以及他们必须做出多少调整。

使用可用的默认 XAML 平台控件可确保应用在所有设备和所有输入情况下都正常工作。 如果你的应用具有需要自定义反馈的自定义交互，则应确保反馈合适，可跨输入设备，并且不会分散用户对其任务的注意力。 这可能是游戏或绘图应用中的一个特定问题，其中视觉反馈可能与关键 UI 冲突或导致其模糊。

重要

不建议更改内置手势的交互行为。

跨设备的反馈

视觉反馈通常依赖于输入设备（触碰、触控板、鼠标、笔/触笔、键盘等）。 例如，鼠标的内置反馈通常涉及移动和更改光标，而触碰和笔需要接触可视化效果，键盘输入和导航使用焦点矩形和突出显示。

使用 ShowGestureFeedback 设置平台手势的反馈行为。

如果自定义反馈 UI，请确保提供支持且适合所有输入模式的反馈。

下面是 Windows 中内置接触可视化效果的一些示例。

Touch Feedback Mouse Feedback Pen Feedback Keyboard Feedback
触摸可视化 鼠标/触控板可视化效果 笔可视化效果 键盘可视化效果

高可见性焦点视觉对象

所有 Windows 应用都围绕应用程序中的可交互控件展示更明确的焦点视觉对象。 这些新的焦点视觉对象可完全自定义，并在需要时可禁用。

对于 Xbox 和电视使用的典型 10 英尺体验，Windows 支持“显示焦点”（一种光照效果，用于在通过游戏手柄或键盘输入获得焦点时对可聚焦元素（如按钮）的边框进行动画处理）。

颜色品牌打造和自定义

边框属性

高可见性焦点视觉对象有两个部分：主边框和辅助边框。 主边框为 2px 粗，在辅助边框的“外部”周围运行。 辅助边框为 1px 粗，在主边框的“内部”周围运行。 High visibility focus visual redlines

若要更改任一边框类型（主要或次要）的粗细，请分别使用 FocusVisualPrimaryThickness 或 FocusVisualSecondaryThickness：

<Slider Width="200" FocusVisualPrimaryThickness="5" FocusVisualSecondaryThickness="2"/>

High visibility focus visual margin thicknesses

边距是 Thickness 类型的属性，因此可以自定义边距以仅在控件的某些侧显示。 请参阅下文：High visibility focus visual margin thickness bottom only

边距是控件的视觉边界与焦点视觉“辅助边框”的开始部分之间的间距。 默认边距与控件边界的距离为 1px。 可以通过更改 FocusVisualMargin 属性来基于每个控件编辑此边距：

<Slider Width="200" FocusVisualMargin="-5"/>

High visibility focus visual margin differences

负边距会将边框推离控件的中心，而正边距会将边框移向控件的中心。

若要完全关闭控件上的焦点视觉对象，只需禁用 UseSystemFocusVisuals：

<Slider Width="200" UseSystemFocusVisuals="False"/>

粗细、边距，或者应用开发人员是否希望拥有焦点视觉对象，均需逐个控件确定。

颜色属性

焦点视觉对象只有两种颜色属性：主边框颜色和辅助边框颜色。 这些焦点视觉边框颜色可以在页面级别上按控件更改，或在应用范围内的全局级别上更改：

若要在应用范围内将焦点视觉对象品牌化，请覆盖系统画笔：

<SolidColorBrush x:Key="SystemControlFocusVisualPrimaryBrush" Color="DarkRed"/>
<SolidColorBrush x:Key="SystemControlFocusVisualSecondaryBrush" Color="Pink"/>

High visibility focus visual color changes

若要基于每个控件更改颜色，只需编辑所需控件上的焦点视觉属性：

<Slider Width="200" FocusVisualPrimaryBrush="DarkRed" FocusVisualSecondaryBrush="Pink"/>

面向设计人员

面向开发人员

示例

存档示例