触摸目标准则

  • 项目

Windows 应用程序中的所有交互 UI 元素都必须足够大，以便用户能够准确地访问和使用（不考虑设备类型或输入方法）。

支持触摸输入（和触摸触点区域相对不精确的特性）需要进一步优化目标大小和控件布局，因为使用了触控数字化器报告的更大、更复杂的输入数据集来确定用户的预期的（或最可能的）目标。

所有 UWP 控件都已使用默认的触摸目标大小和布局进行设计，使你能够构建视觉上平衡且具有吸引力的应用，既舒适易用又能增强用户的使用信心。

在本主题中，我们将介绍这些默认行为，以便你可以使用平台控件和自定义控件（如果应用需要它们）设计应用以实现最高可用性。

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

Fluent Standard 大小

创建 Fluent Standard 大小是为了在信息密度与用户舒适之间提供平衡。 实际上，屏幕上的所有项都对齐到 40x40 有效像素 (epx) 目标，这使 UI 元素可与网格对齐并基于系统级别缩放进行相应缩放。

注意

有关有效像素和缩放的更多信息，请参阅屏幕尺寸和断点

有关系统级别缩放的更多信息，请参阅对齐、边距和填充。

Fluent Compact 大小

应用程序可以通过 Fluent Compact 大小显示更高级别的信息密度。 Compact 大小将 UI 元素与 32x32 epx 目标对齐，这使 UI 元素可与更紧密的网格对齐并基于系统级别缩放进行相应缩放。

示例

可以在页面或网格级别应用 Compact 大小。

页面级别

<Page.Resources>
    <ResourceDictionary Source="ms-appx:///Microsoft.UI.Xaml/DensityStyles/Compact.xaml" />
</Page.Resources>

网格级别

<Grid>
    <Grid.Resources>
        <ResourceDictionary Source="ms-appx:///Microsoft.UI.Xaml/DensityStyles/Compact.xaml" />
    </Grid.Resources>
</Grid>

目标大小

通常，请将触摸目标大小设置为 7.5 mm 正方形范围（1.0x 缩放倍数的 135 PPI 屏幕上为 40x40 像素）。 通常，UWP 控件与 7.5 mm 触摸目标保持一致（因控件和常见使用模式而异）。 有关更多详细信息，请参阅控件大小和密度。

可以根据你的特定方案的需要调整这些目标大小的建议。 以下是一些需要考虑的事项：

  • 触摸频率 - 考虑使重复按或经常按的目标大于最小大小。
  • 错误后果 - 由于触摸错误而产生严重后果的目标应该具有较大的填充，并且应该放置在距离内容区域边缘较远的位置。 尤其是经常触摸的目标更是如此。
  • 在内容区域中的位置。
  • 外形规格和屏幕大小。
  • 手指姿势。
  • 触摸可视化。

示例

存档示例