通过

视觉反馈指南

使用视觉反馈向用户展示何时其交互被检测、解析和处理。 视觉反馈可以通过鼓励交互来帮助用户。 它表示交互的成功，这可改善用户的控制感。 它还中继系统状态并减少错误。

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

Recommendations

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

其他使用指南

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

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

重要

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

跨设备的反馈

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

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

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

下面是 Windows 中内置联系人可视化效果的一些示例。

触摸反馈 鼠标反馈 笔反馈 键盘反馈
触摸可视化 鼠标/触摸板可视化效果 笔可视化效果 键盘可视化

高可见性焦点视觉对象

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

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

颜色品牌塑造与定制化

边框属性

高可见性焦点视觉对象有两个部分：主边框和辅助边框。 主边框 2px 厚，并围绕辅助边框 外的 运行。 辅助边框的厚度为1px，围绕在主边框内部运行。 高可见性焦点视觉红线

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

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

高可见性焦点视觉边距粗细

边距是 粗细类型的属性，因此可以自定义边距以仅在控件的某些一侧显示。 请参阅以下内容： 仅底部高可见性焦点视觉边框厚度

边距是控件的视觉边界与焦点视觉对象 辅助边框的开始之间的空间。 默认边距距离控件边界 1px 。 可以按每个控件调整此边距，通过更改 FocusVisualMargin 属性。

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

高可见性焦点视觉边距差异

负边距将边框从控件中心推开，正边距将边框移动到控件的中心。

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

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

控件的粗细、边距，或应用开发人员是否希望有焦点视觉效果，均可基于每个控件来确定。

颜色属性

焦点视觉对象只有两种颜色属性：主边框颜色和辅助边框颜色。 可以在页面级别为每个控件更改这些焦点视觉边框颜色，并在应用程序范围内进行全局更改。

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

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

高可见性焦点可视化颜色变化

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

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

对于设计人员

面向开发人员

Samples

档案样本

 

  • Last updated on