本主题提供有关在 Windows 应用中生成自定义触摸优化体验的设计准则。
概述
触摸是跨 Windows 和 Windows 应用的主要输入形式,涉及使用一个或多个手指(或触摸联系人)。 这些触点及其移动被解释为支持各种用户交互的触摸手势和操作。
Windows SDK 和 Windows 应用 SDK 都包含全面的触摸优化控件集合,这些控件可在 Windows 应用中提供可靠且一致的体验。
为 Windows 应用创建自定义控件、体验和框架时,请使用这些准则。
设计原则
在设计 Windows 应用中的触摸体验时,请考虑以下事项。
触控优化
Windows 应用体验应具有诱人的触控,允许直接操作,并能适应不太精确的交互。 考虑触摸加速器,包括手势、笔和语音集成。
各种姿势保持一致
无论用户处于哪种输入法或状况,你的应用都应具有一致的体验。 从传统的桌面姿势更改为平板电脑姿势(请参阅 推荐的平板电脑体验设置),以及方向的变化,不应该造成困惑,而是应该尽量保持微妙,仅在必要时进行调整。 应用应该以细微的方式回流 UI,以创造一种熟悉、连贯的体验,从而满足用户的需求。
响应式
应用和交互应在每个阶段(按下、动作、抬起)通过动画为用户提供反馈,这些动画既响应用户的当前状态,又指示可能的操作。 动画还应至少保持 60 fps,以感觉流畅和现代。
遵循触摸约定
响应反馈
在与应用进行交互期间,适当的视觉反馈可帮助用户识别、了解和适应应用和 Windows 平台解释其交互的方式。 提供即时且持续的反馈,以响应用户的触摸,其特点是明显、易于理解,并且不会因为分心而丢失。 此即时反馈是用户如何了解和探索应用的交互式元素。
- 反馈应在触碰到时立即进行,移动的对象应紧贴用户的手指。
- UI 应通过匹配用户速度和移动来响应手势,避免使用关键帧动画。
- 视觉反馈应在用户执行动作前传达可能的后果。
要
不要
在用户向上轻扫时,GIF 动画中的对象似乎附着在用户的手指上。
有关详细信息,请参阅 Windows 11 中的视觉反馈和动作指南
触摸交互模式
遵循这些常见的交互和手势模式,为体验带来一致性和可预测性。
常见交互
用户熟悉一组常见的触摸行为和手势,并期望在所有 Windows 体验中一致地工作。
- 点击 以激活或选择项目
- 短按并拖动 以移动对象
- 长按以访问次要的、上下文相关的命令菜单
- 使用上下文命令时轻扫(或拖动并释放)
- 顺 时针或逆时针旋转以调整方向
相互 作用
点击
轻扫(或拖动和释放)
短按和拖动
旋转
按住并保持
有关详细信息,请参阅 Windows 11 中的视觉反馈和动作指南
手势
手势降低了用户导航和处理常见交互所需的工作量。 如果可能,支持具有触摸手势的 UI,以便用户可以轻松地在应用中导航和作。
在视图之间导航时,请使用连贯的动画,这样现有状态和新状态在拖动过程中都可见。 如果与 UI 交互,项目应遵循用户的移动,提供反馈,并在释放时,根据拖动位置阈值对附加动作作出反应。
手势还应可根据惯性进行笔势和轻扫,并在舒适的动作范围内操作。
- 拖放或轻拂可前后移动
- 拖动以消除
- 下拉刷新
手势
拖动或轻弹以前后移动
下拉刷新
拖动以消除
自定义手势
使用自定义手势将频率较高的键盘快捷键和触控板手势引入触摸交互。 通过具有动画和视觉状态的专用功能帮助发现性和响应(例如,在屏幕上放置三根手指会导致窗口因视觉反馈而缩小)。
- 请勿替代常见手势,因为这可能会导致用户混淆。
- 请考虑使用多指手势进行自定义操作,但请注意,系统保留了一些多指手势,用于在应用程序和桌面之间快速切换。
- 请注意源自屏幕边缘的自定义手势,因为边缘手势是操作系统级别功能所保留的,可能会被意外触发。
避免意外导航
如果你的应用或游戏可能涉及屏幕边缘附近的频繁交互,请考虑在 全屏独占(FSE)模式下 呈现你的体验,以避免意外激活系统浮出控件(用户必须直接在临时选项卡上轻扫才能拉取关联的系统浮出控件)。
注释
除非绝对必要,否则避免使用此功能,因为用户更难离开你的应用或与其他应用一起使用。
触摸键盘体验
触摸键盘为支持触摸的设备启用文本输入。 当用户点击可编辑的输入字段时,Windows 应用文本输入控件默认调用触摸键盘。
点击文本字段时调用
当用户点击文本输入字段时,触摸键盘应弹出 - 这将通过使用系统 API 显示和隐藏键盘自动工作。 请参阅响应触摸键盘的存在。
使用标准文本输入控件
使用常见控件可提供预期的行为,并最大程度地减少用户的意外情况。
支持文本服务框架(TSF)的文本控件提供形状书写(轻扫键盘)功能。
触摸键盘信号
考虑输入、姿势、使触摸键盘成为输入的主要模式的硬件信号(硬件键盘分离、使用触摸调用入口点、明确用户键入意图)。
适当地回流
- 请注意,键盘可以在较小的设备上占用屏幕的 50%。
- 不要用触摸键盘掩盖活动文本字段。
- 如果触摸键盘遮挡活动文本字段,请向上滚动应用内容(动画),直到该字段可见。
- 如果触摸键盘遮挡活动文本字段,但应用内容无法向上滚动,请尝试移动应用容器(带有动画)。
命中目标
确保单击目标让人感觉舒适并吸引人触摸。 如果命中目标太小或过于拥挤,用户需更精确地进行触控操作,这很困难,可能会导致糟糕的体验。
可触摸的
我们将“可触摸”定义为最小 40 x 40 epx(即使视觉对象较小),或 32 epx 高(如果宽度至少为 120 epx)。
我们的常见控件符合此标准(它们针对鼠标和触摸用户进行优化)。
触摸优化
对于触摸优化的 UI,请考虑将触控目标的大小增加到 44 x 44 epx,触控目标之间至少有 4 epx 的可见空间。
建议使用两种默认行为:始终根据设备信号进行触摸优化或转换。
当应用可以针对触摸进行优化而不损害鼠标用户时,尤其是当应用主要用于触摸时,则始终进行触摸优化。
如果根据设备手势的设备信号转换 UI,则应始终在不同手势下提供一致的体验。
将视觉对象与触摸目标匹配
考虑在触摸目标维度更改时更新视觉对象。 例如,如果用户进入平板电脑手势时单击目标增多,则表示单击目标的 UI 也应更新,以帮助用户了解状态变化和更新的可供性。 有关详细信息,请参阅 Windows 应用的内容设计基础知识、 触摸目标指南、 控件大小和密度指南。
人像优化
支持考虑到高和宽的窗口的响应式布局,以确保应用在横屏和纵屏方向上都得到优化。
这还将确保应用窗口在多任务场景(以纵向宽高比并排对齐的应用)中正确显示核心 UI 视觉效果,而不受方向和屏幕尺寸的影响。