触控交互

本主题提供有关在 Windows 应用中生成自定义触摸优化体验的设计准则。

概述

触摸是跨 Windows 和 Windows 应用的主要输入形式,涉及使用一个或多个手指(或触摸联系人)。 这些触点及其移动被解释为支持各种用户交互的触摸手势和操作。

Windows SDK 和 Windows 应用 SDK 都包含全面的触摸优化控件集合,这些控件可在 Windows 应用中提供可靠且一致的体验。

为 Windows 应用创建自定义控件、体验和框架时,请使用这些准则。

设计原则

在设计 Windows 应用中的触摸体验时,请考虑以下事项。

触控优化

Windows 应用体验应该富有亲和力,让人乐于触摸,支持直接操作,并在交互不够精确时能够适应。 考虑触摸加速器,包括手势、笔和语音集成。

姿势变化中的一致性

无论用户处于哪种输入法或状况,你的应用都应具有一致的体验。 从传统的桌面姿势更改为平板电脑姿势(请参阅 推荐的平板电脑体验设置),以及方向的变化,不应该造成困惑,而是应该尽量保持微妙,仅在必要时进行调整。 你的应用应以微妙的方式重排 UI,创建一种让用户感到熟悉并能自然融入的体验。

快速响应

应用和交互应在每个阶段(按下、动作、抬起)通过动画为用户提供反馈,这些动画既响应用户的当前状态,又指示可能的操作。 动画还应至少保持 60 fps,以感觉流畅和现代。

遵循触摸约定

响应反馈

在与应用进行交互期间,适当的视觉反馈可帮助用户识别、了解和适应应用和 Windows 平台解释其交互的方式。 提供即时且持续的反馈,以响应用户的触摸,其特点是明显、易于理解,并且不会因为分心而丢失。 此即时反馈是用户如何了解和探索应用的交互式元素。

  • 反馈应在触碰到时立即进行,移动的对象应紧贴用户的手指。
  • UI 应通过匹配用户速度和移动来响应手势,避免使用关键帧动画。
  • 视觉反馈应在用户执行动作前传达可能的后果。

务必

不要

在用户向上轻扫时,GIF 动画中的对象似乎附着在用户的手指上。

对象在向上轻扫时不会粘附于用户手指的动画 GIF。

有关详细信息,请参阅 Windows 11 中的视觉反馈和动作指南

触摸交互模式

遵循这些常见的交互和手势模式,为体验带来一致性和可预测性。

常见交互

用户熟悉一组常见的触摸行为和手势,并期望在所有 Windows 体验中一致地工作。

  • 点击 以激活或选择项目
  • 短按并拖动 以移动对象
  • 按住 以访问辅助上下文命令的菜单
  • 使用上下文命令时轻扫(或拖动并释放)
  • 时针或逆时针旋转以调整方向

相互 作用

用户点击对象的动画 GIF 以选择或激活它。 点击

用户拖动对象以显示上下文命令的动画 GIF。 轻扫(或拖动和释放)

用户按下和拖动对象的动画 GIF 以重新排列它。 短按和拖动

用户用两根手指按下并旋转对象的动画 GIF。 旋转

用户按下并按住对象的动画 GIF 以显示上下文次要命令菜单。 按住并保持

有关详细信息,请参阅 Windows 11 中的视觉反馈和动作指南

手势

手势降低了用户导航和处理常见交互所需的工作量。 如果可能,支持具有触摸手势的 UI,以便用户可以轻松地在应用中导航和作。

在视图之间导航时,请使用连贯的动画,这样现有状态和新状态在拖动过程中都可见。 如果与 UI 交互,项目应遵循用户的移动,提供反馈,并在释放时,根据拖动位置阈值对附加动作作出反应。

手势还应使用轻弹和轻扫(基于惯性)可作,并且处于舒适的运动范围内。

  • 拖动或轻扫以前后移动
  • 拖动以关闭
  • 下拉刷新

手势

用户来回拖动对象轮播的动画 GIF。 拖放或轻扫以来回

用户下拉对象集合以刷新 [2] 的动画 GIF。 下拉刷新

用户拖动屏幕外对象以消除的动画 GIF。 拖动以消除

有关详细信息,请参阅 页面切换拉取刷新

自定义手势

使用自定义手势将频率较高的键盘快捷键和触控板手势引入触摸交互。 通过具有动画和视觉状态的专用功能帮助发现性和响应(例如,在屏幕上放置三根手指会导致窗口因视觉反馈而缩小)。

  • 请勿替代常见手势,因为这可能会导致用户混淆。
  • 请考虑使用多指手势进行自定义操作,但请注意,系统保留了一些多指手势,用于在应用程序和桌面之间快速切换。
  • 请注意源自屏幕边缘的自定义手势,因为边缘手势是操作系统级别功能所保留的,可能会被意外触发。

避免意外导航

如果你的应用或游戏可能涉及屏幕边缘附近的频繁交互,请考虑在 全屏独占(FSE)模式下 呈现你的体验,以避免意外激活系统浮出控件(用户必须直接在临时选项卡上轻扫才能拉取关联的系统浮出控件)。

注释

除非绝对必要,否则避免使用此功能,因为用户更难离开你的应用或与其他应用一起使用。

触摸键盘体验

触摸键盘为支持触摸的设备启用文本输入。 当用户点击可编辑的输入字段时,Windows 应用文本输入控件默认调用触摸键盘。

默认布局模式下的触摸键盘。

点击文本字段时调用

当用户点击文本输入字段时,触摸键盘应弹出 - 这将通过使用系统 API 显示和隐藏键盘自动工作。 请参阅 响应触摸键盘的存在

使用标准文本输入控件

使用常见控件可提供预期的行为,并最大程度地减少用户的意外情况。

支持文本服务框架(TSF)的文本控件提供形状书写(轻扫键盘)功能。

触摸键盘信号

考虑输入、姿势、使触摸键盘成为输入的主要模式的硬件信号(硬件键盘分离、使用触摸调用入口点、明确用户键入意图)。

适当地重排

  • 请注意,键盘可以在较小的设备上占用屏幕的 50%。
  • 不要用触摸键盘掩盖活动文本字段。
  • 如果触摸键盘遮挡活动文本字段,请向上滚动应用内容(动画),直到该字段可见。
  • 如果触摸键盘遮挡活动文本字段,但应用内容无法向上滚动,请尝试移动应用容器(带有动画)。

用户从搜索字段调用触摸键盘的动画 GIF。

命中目标

确保触控区域舒适,并且吸引用户触碰。 如果命中目标太小或过于拥挤,用户需更精确地进行触控操作,这很困难,可能会导致糟糕的体验。

可触摸的

我们将可触摸定义为至少 40 x 40 epx,即使视觉效果较小,宽度为至少 120 epx 时,高度应为 32 epx。

我们的常见控件符合此标准(它们针对鼠标和触摸用户进行优化)。

触摸优化

对于触摸优化的 UI,请考虑将触控目标的大小增加到 44 x 44 epx,触控目标之间至少有 4 epx 的可见空间。

建议使用两种默认行为:始终根据设备信号进行触摸优化或转换。

当应用可以针对触摸进行优化而不损害鼠标用户时,尤其是当应用主要用于触摸时,则始终进行触摸优化。

如果您根据设备姿态信号转换 UI,请始终在不同姿态下提供一致的体验。

将视觉对象与触摸目标匹配

考虑在触摸目标维度更改时更新视觉对象。 例如,如果用户进入平板电脑姿势时命中目标数量增加,则表示命中目标的用户界面也应更新,以帮助用户了解状态更改和交互的更新。 有关详细信息,请参阅 Windows 应用的内容设计基础知识触摸目标指南控件大小和密度指南。

人像优化

支持考虑到高和宽的窗口的响应式布局,以确保应用在横屏和纵屏方向上都得到优化。

这还将确保应用窗口在多任务场景中正确显示核心UI视觉效果(应用并排贴靠显示以纵向纵横比),无论方向和屏幕大小如何。