本文介绍如何选择和操作文本、图像和控件,并提供在应用中使用这些机制时应考虑的用户体验指南。
注意事项与禁忌
实现自己的控制手柄 UI 时,请使用字体字形。 手柄是由两种 Segoe UI 字体组成的组合,这些字体可在整个系统中使用。 使用字体资源可简化不同 dpi 的呈现问题,并且与各种 UI 缩放台阶良好兼容。 实现自己的控制手柄时,它们应共享以下 UI 特征:
- 圆形
- 在任何背景下都可见
- 尺寸一致
提供可选择内容周围的边距以容纳控制手柄 UI。 如果你的应用在不进行平移/滚动的区域中启用文本选择,则允许文本区域的左侧和右侧各留出 1/2 控制点的边距,并在文本区域的顶部和底部各留出 1 个控制点的高度(如下图所示)。 这可确保整个控制手柄 UI 向用户公开,并最大程度地减少与其他基于边缘的 UI 的意外交互。
在交互期间隐藏控制手柄 UI。 消除交互过程中夹持器的遮挡。 当手柄没有完全被手指遮盖或存在多个文本选择手柄时,这将非常有用。 这消除了显示子窗口时的视觉伪影。
不允许选择 UI 元素,如控件、标签、图像、专有内容等。 通常,Windows 应用程序仅允许在特定控件中进行选择。 按钮、标签和徽标等控件不可选择。 评估选择是否是应用的问题,如果是,请确定应禁止选择的 UI 区域。
其他使用指南
文本选择和操作尤其容易受到触摸交互引入的用户体验挑战。 鼠标、笔/触笔和键盘输入具有高度的精细度:鼠标单击或笔/触笔接触通常映射到单个像素,键则有按下或未按下之分。 触摸输入没有细致度;很难将指尖的整个表面映射到屏幕上的特定 x-y 位置,以准确放置文本光标。
注意事项和建议
使用通过 Windows 中的语言框架公开的内置控件来生成提供完整平台用户交互体验的应用,包括选择和操作行为。 你会发现内置控件的交互功能足以满足大多数 Windows 应用的需求。
使用标准 Windows 文本控件时,无法自定义本主题中所述的选择行为和视觉对象。
文本选择
如果你的应用需要支持文本选择的自定义 UI,我们建议你遵循此处所述的 Windows 选择行为。
可编辑和不可编辑的内容
通过触摸,选择交互主要通过手势来执行,例如点击以设置插入光标或选择单词,以及滑动修改选区。 与其他 Windows 触摸交互一样,时间限制的交互仅限于通过按住手势来显示信息性 UI。 有关详细信息,请参阅 视觉反馈指南。
Windows 可识别选择交互、可编辑和非可编辑的两种可能状态,并相应地调整选择 UI、反馈和功能。
可编辑内容
在单词的左半部分点击会将光标置于单词左侧,而点击右半部分会将光标置于单词右侧。
下图演示了如何通过在单词的开头或结尾附近点击来放置带有控制手柄的初始插入光标。
下图演示了如何通过拖动抓手来调整所选内容。
下图演示了如何通过点击选定区域或控制点(按下和按住也可以使用)来调用上下文菜单。
注意 这些交互在遇到拼写错误的单词时稍有不同。 点击标记为拼写错误的单词将突出显示整个单词并调用建议的拼写上下文菜单。
不可编辑的内容
下图演示了如何通过点击单词(初始选定内容中不包含空格)来选择单词。
按照与可编辑文本相同的过程调整所选内容并显示上下文菜单。
对象操作
在 Windows 应用中实现自定义对象操作时,尽可能使用与文本选择相同的(或类似)控制手柄资源。 这有助于跨平台提供一致的交互体验。
例如,控制手柄还可用于支持调整大小和裁剪的图像处理应用或提供可调整进度栏的媒体播放器应用,如下图所示。
具有可调整进度栏的媒体播放器。
带有裁剪手柄的
使用裁剪手柄 图像编辑器。