Windows 8.1 提供一组在整个系统中使用的简单触摸交互功能。一致地应用此触摸语言可让用户对你的应用感觉已经很熟悉。通过让你的应用更容易学习和使用,可提高用户的信心。有关触摸语言实现的信息,请参阅手势、操作和交互。
![用户通过使用触控与平板电脑交互 技术分享](https://i-msdn.sec.s-msft.com/dynimg/IC689375.jpg)
在本文中:
触控设计原则
提供即时反馈
在用户每次触摸屏幕时均立即提供视觉反馈, 可提高用户的信心。可互动的内容都应表现出某种反应 - 改变颜色、改变大小或发生移动。不可互动的内容 只有在用户触摸屏幕时才应显示系统触控可视化 表示。
内容应紧随手指之后
可由用户移动 或拖动的内容(如画布或滑块)应该跟随用户 手指一同移动。在用户滑动按钮和其他不能移动的内容 或手指离开它们时,它们应返回到其 默认状态。
使互动可逆
比如你拿起一本书之后, 可以将书放回原位。触控互动应该具有类似 行为—它们应该是可逆的。提供视觉反馈来表明 当用户抬起手指时会发生什么。这将使你的应用能够安全地 使用触控操作进行浏览。
不限制手指个数
人们通常会不经意地 使用多个手指进行触控。这正是触控互动不应根据 触摸屏幕的手指个数而快速变化的原因。 与真实世界一样,使用一个或三个手指滑动内容应该 没有区别。
触控语言
长按以查看
![技术分享](https://imgs1-video.ssl.catalog.video.msn.com/res/1.0.8409.01/i/lead_with_image_icon3.png)
这种触控互动 会显示详细信息或指导性可视化内容(如工具提示或上下文菜单), 并且不允许执行操作。如果用户开始 滑动手指,任何以这种方式显示的内容都不应阻止用户 进行平移。
要点 在同时启用了水平和垂直平移的情况下,可以通过按下并按住来进行选择。
点击以进行主操作
![技术分享](https://imgs1-video.ssl.catalog.video.msn.com/res/1.0.8409.01/i/lead_with_image_icon3.png)
点击某个元素 可以调用它的主操作,例如,启动某个应用或执行 某个命令。
滑动以平移
![技术分享](https://imgs1-video.ssl.catalog.video.msn.com/res/1.0.8409.01/i/lead_with_image_icon3.png)
滑动主要用于平移交互,但也可用于移动(平移被限制为一个方向)、绘制或书写。 滑动还可用于通过擦拭(在单选按钮等相关对象上滑动手指)来定位紧密排列的小元素。
轻扫以选定、进行命令操作和移动
![技术分享](https://imgs1-video.ssl.catalog.video.msn.com/res/1.0.8409.01/i/lead_with_image_icon3.png)
将手指垂直于平移方向稍稍滑动一段距离(平移被限制为一个方向),可以选定列表或网格中的对象。在选定对象时,使用相关命令显示应用栏。
收缩和拉伸以缩放
![技术分享](https://imgs1-video.ssl.catalog.video.msn.com/res/1.0.8409.01/i/lead_with_image_icon3.png)
![技术分享](https://imgs1-video.ssl.catalog.video.msn.com/res/1.0.8409.01/i/lead_with_image_icon3.png)
尽管收缩和拉伸 手势常常用于调整大小,但它们也可用于跳到支持 语义式缩放的内容中的开头、结尾或任何其他位置。语义式缩放控件提供了一个缩小的视图,用于显示项目分组以及用快速方式返回这些分组。
转动以旋转
![技术分享](https://imgs1-video.ssl.catalog.video.msn.com/res/1.0.8409.01/i/lead_with_image_icon3.png)
使用两个或多个手指 进行旋转会带动相应对象进行旋转。旋转设备本身会导致 整个屏幕旋转。
从边缘处轻扫以使用应用命令
![技术分享](https://imgs1-video.ssl.catalog.video.msn.com/res/1.0.8409.01/i/lead_with_image_icon3.png)
从屏幕底部或页首 边缘处轻扫可显示应用命令。使用应用栏可显示应用命令。
从边缘处轻扫以使用系统命令
![技术分享](https://imgs1-video.ssl.catalog.video.msn.com/res/1.0.8409.01/i/lead_with_image_icon3.png)
从屏幕右边缘 轻扫可显示包含系统命令的 超级按钮。
从左边缘 轻扫可循环切换当前运行的应用。
从屏幕页首边缘 向底部边缘滑动可关闭当前应用。
从页首边缘向下以及向左边缘或向右边缘滑动会将当前应用放在屏幕一侧。
注意 用户可以同时执行一些直接操作,如滑动以平移、 收缩以缩放和转动以旋转互动, 并使用任意个触控点。
触控目标
大小与效率: 目标对象的大小对触控错误率存在影响
没有适合 任何触控目标的完美尺寸。不同的尺寸适合不同的情形。具有 严重后果的操作(如删除和关闭)或常用操作 应使用较大的触控目标。具有较小后果且不常 使用的操作可使用较小的目标。
目标大小指南
![]() |
7x7 mm:建议的最小值 如果对错误目标的触控 可通过一两个手势或在 5 秒内更正, 则 7x7 mm 是合适的最小值。目标之间的间距与目标大小 同样重要。 |
![]() |
当准确性非常重要时 关闭、删除和 其他具有严重后果的操作无法承受意外的点击。如果对错误目标的 触控需要超过 2 个手势、5 秒或主要的上下文更改才能更正, 则可以使用 9x9 mm 的目标。 |
![]() |
当屏幕难以 容纳时 如果你发现很难在屏幕中装下想要的内容,也可以 使用 5x5 mm 的目标,只要对错误目标的触控可通过 一个手势更正。在这种情况下,在目标之间使用 2 mm 的间距 非常重要。 |
辅助功能
当你规划你的应用要支持的 UI 和交互时,请牢记你的用户的广泛的能力、残障和爱好。从一开始就遵循复制功能设计可帮助使你的应用可供尽可能多的受众访问。有关规划辅助功能的详细信息,请参阅辅助功能指南。
手指大小
有些人 经常抱怨自己“手指太粗”。但即使是婴儿的手指 也比大多数触控目标要宽。
左图显示了 平均的成人手指宽度大约为 11 毫米 (mm), 婴儿的手指宽度为 8 mm,而篮球运动员的手指宽度 超过了 19 mm!
![显示手指宽度各种变化的示意图。 技术分享](https://i-msdn.sec.s-msft.com/dynimg/IC687062.jpg)
姿势和握法
针对触控的设计不只是设计 屏幕上显示的内容。它需要针对设备的持握方式(握法) 进行设计。
通常,不同的人在持握平板电脑时喜欢一些 不同的握法。
当前的任务和它的显示方式通常决定了 采用哪种握法。但是,直接的环境和身体舒适性 也会影响使用一种握法的时长和更换握法的频率。
尝试针对不同类型的握法优化你的应用。但是,如果一种 互动自然地适合一种特定握法,可以针对该握法 进行优化。
互动区域
由于人们 通常持握平板电脑的边侧和底部边角,因此,边侧是放置所有可互动内容的理想位置。
阅读区域
屏幕上半部分的内容比下半部分的 内容更容易看到,下半部分的内容常常被手遮住或忽略。
常用的握法
握法 | 握法和 互动 | 设计时的注意事项 |
---|---|---|
![]() |
一只手持握, 另一只手进行少量到中度的 互动 |
|
![]() |
两只手 持握,拇指进行少量到中度的 互动 |
|
![]() |
设备位于桌面或腿上,两只手 进行少量到大量的互动 |
|
![]() |
将设备置于桌面或 搁架上,使用互动或不使用互动 |
|