触摸目标指南

无论设备类型或输入方法如何,Windows 应用程序中的所有交互式 UI 元素都必须足够大,用户才能准确访问和使用。

支持触摸输入(以及触摸接触区域的相对不精确性质)需要进一步优化目标大小和控制布局,因为触摸数字化器报告的更大、更复杂的输入数据集用于确定用户的预期(或最有可能)的目标。

所有 UWP 控件都设计了默认触摸目标大小和布局,使你能够生成舒适、易于使用和激发信心的视觉均衡和有吸引力的应用。

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

重要 APIWindows.UI.CoreWindows.UI.InputWindows.UI.Xaml.Input

Fluent Standard 大小

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

注释

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

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

Fluent Compact 大小

应用程序可以使用 Fluent Compact 大小显示更高级别的信息密度。 紧凑尺寸将 UI 元素对齐到 32x32 epx 目标,使 UI 元素可以与更紧密的网格对齐,并根据系统级别进行适当缩放。

例子

压缩尺寸可以被应用于页面或网格级别。

页面级别

<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 毫米的正方形(135 PPI 显示器上 1.0x 缩放时为 40x40 像素)。 通常,UWP 控件与 7.5 毫米触摸目标保持一致(这可能因特定控件和任何常见使用模式而异)。 有关更多详细信息,请参阅 控制大小和密度

可以根据特定方案的要求调整这些目标大小建议。 下面是一些注意事项:

  • 触摸频率 - 考虑将重复或频繁按下的目标设计得比最小尺寸更大。
  • 错误后果 - 具有严重后果的目标,如果因错误接触,应该增加填充,并放置得更远离内容区域的边缘。 这对于经常接触的目标尤其如此。
  • 在内容区域中的位置。
  • 外形规格和屏幕大小。
  • 手指姿势。
  • 触摸可视化效果。

Samples

档案样本