Win8 触摸交互设计 -- 手势大全

38 篇文章 1 订阅

本主题介绍 Windows 8 的触控互动,并提供设计良好的触控互动的指南。 有关本主题的可下载便捷版本,请访问此处

触控准则

  1. 使用 Windows 8 触控语言。

    Windows 8 Consumer Preview 中的触控互动

    Windows 8 提供一组在整个系统中通用的简单触控互动功能。一致地应用此语言可让用户对你的应用感觉已经很熟悉。通过让你的应用更容易学习和使用,可提高用户的信心。

  2. 发挥手指的专长。

    针对手指而不是鼠标的 UI

    鼠标和手写笔非常精确,而手指不同,并且较小的目标需要精确操作。使用支持直接操作的大目标,提供丰富的触控互动数据。轻扫一个较大项目既快速又容易,因为整个项目就是选择的目标。

  3. 使用触控功能浏览内容。

    通过语义缩放和平移导航。

    语义缩放和平移可以快速、流畅地实现导航。不要将内容分布在多个标签或网页中,使用较大的画布,在画布上可以实现平移和语义缩放。

  4. 提供反馈。

    各种类型的互动反馈

    在用户每次触摸屏幕时均立即提供视觉反馈,可提高用户的信心。可互动的内容都应表现出某种反应 - 改变颜色、改变大小或发生移动。不可互动的内容只有在用户触摸屏幕时才应显示系统触控可视化表示。

  5. 内容应紧随手指之后。

    紧随手指移动的对象

    可由用户移动或拖动的内容(如画布或滑块)应该跟随用户手指一同移动。在用户滑动按钮和其他不能移动的内容或手指离开它们时,它们应返回到其默认状态。

  6. 使互动可逆。

    一种可逆的互动

    比如你拿起某本书之后,可以将书放回原位。触控互动应该具有类似行为—它们应该是可逆的。提供视觉反馈来表明当用户抬起手指时会发生什么。这将使你的应用能够安全地使用触控操作进行浏览。

  7. 不限制手指个数。

    单点触控和多点触控

    人们通常会不经意地使用多个手指进行触控。这正是触控互动不应根据触摸屏幕的手指个数而快速变化的原因。与真实世界一样,使用一个或三个手指滑动内容应该没有区别。

  8. 使互动无时限。

    不要使用有时限的互动。

    需要组合手势(如双击或长按)的互动需要在一定时限内完成。避免使用这样的有时限互动,因为它们常常被意外触发并且难以正确计时。

Windows 8 触控语言

此列表介绍了 Windows 8 中使用的与触控相关的标准术语。

要点  为了避免让客户感到困惑,请勿创建任何重现或重新定义现有标准互动的自定义互动。

长按手势的示例。长按以查看这种触控互动会显示详细信息或指导性可视化内容(如工具提示或上下文菜单),并且不允许执行操作。如果用户开始滑动手指,任何以这种方式显示的内容都不应阻止用户进行平移。
点击手势的示例。点击以进行主操作点击某个元素可以调用它的主操作,例如,启动某个应用程序或执行某个命令。
滑动手势的示例。滑动以平移滑动主要用于平移互动,但也可用于移动、绘制或书写。滑动还可用于通过擦拭(在单选按钮等相关对象上滑动手指)来定位紧密排列的小元素。
轻扫手势的示例。轻扫以选定、进行命令操作和移动将手指垂直于平移方向稍稍滑动一段距离,可以选定列表或网格(ListViewGridLayout 控件)中的对象。在选定对象时,使用相关命令显示 AppBar
收缩手势的示例。收缩和拉伸以缩放尽管收缩和拉伸手势常常用于调整大小,但它们也可用于跳到支持语义缩放的内容中的开头、结尾或任何其他位置。SemanticZoom 控件提供了一个缩小的视图,用于显示项目分组以及用快速方式返回这些分组。
旋转手势的示例。转动以旋转使用两个或多个手指进行旋转会带动相应对象进行旋转。旋转设备本身会旋转整个屏幕。
应用命令中轻扫手势的示例。从边缘处轻扫以使用应用命令从屏幕底部或顶部边缘处轻扫可显示应用命令。使用 AppBar 显示应用命令。
系统命令中轻扫手势的示例。从边缘处轻扫以使用系统命令

从屏幕右边缘轻扫可显示包含系统命令的超级按钮

从左边缘轻扫可循环切换当前运行的应用。

从屏幕顶部边缘向底部 边缘滑动可关闭当前应用。

从顶部边缘向下以及向左边缘或向右边缘滑动会将当前应用贴靠到屏幕一侧。

 

注意  用户可以同时执行一些直接操作,如滑动以平移、收缩以缩放和转动以旋转互动,并使用任意个触控点。

Windows 8 触摸手势

针对触控的设计不只是设计屏幕上显示的内容。它需要针对设备的持握方式(握法)进行设计。

通常,不同的人在持握平板电脑时喜欢一些不同的握法。

当前的任务和它的显示方式通常决定了采用哪种握法。但是,直接的环境和身体舒适性也会影响使用一种握法的时长和更换握法的频率。

尝试针对不同类型的握法优化你的应用。但是,如果一种互动自然地适合一种特定握法,可以针对该握法进行优化。

互动区域: 由于人们通常持握平板电脑的边侧和底部边角,因此,边侧是放置所有可互动内容的理想位置。

互动区域

阅读区域: 屏幕上半部分的内容比下半部分的内容更容易看到,下半部分的内容常常被手遮住或忽略。

阅读区域

四种常用的握法: 持握平板电脑的方式有多种,但以下四种握法是最常用的。

握法握法和互动设计时的注意事项
用一只手持握,用另一只手互动一只手持握,另一只手进行少量到中度的互动
  • 在右边缘和底边缘处实现快速互动。
  • 右下角可能被手腕挡住。
  • 限制有效触控范围可提高触控的准确性。
  • 阅读、浏览、发送电子邮件和简单键入。
用两只手持握,用拇指互动。两只手持握,拇指进行少量到中度的互动
  • 在左下角和右下角处实现快速互动。
  • 固定的大拇指可提高触控的准确性。
  • 屏幕中央的项目难以触及。
  • 对屏幕中央进行触控时需要更换姿势。
  • 阅读、浏览、简单键入、游戏。
双手互动设备位于桌面或腿上,两只手进行少量到大量互动
  • 在屏幕底部实现快速互动。
  • 下边角可能被手腕挡住。
  • 缩小有效触控范围可提高触控的准确性。
  • 阅读、浏览、发送电子邮件和复杂键入。
被动互动,没有握法。将设备置于桌面或搁架上,使用互动或不使用互动
  • 在屏幕底部实现快速互动。
  • 在屏幕顶部进行触控操作会遮挡住内容。
  • 在屏幕顶部进行触控操作时可能会使处于连接的设备失去物理平衡。
  • 隔一定距离处进行互动会降低可读性和准确性。
  • 加大目标对象的大小可以提高可读性和准确性。
  • 观看影片、听音乐。

 

Windows 8 触摸目标

大小与效率:目标对象的大小对触控错误率存在影响

没有适合任何触控目标的完美尺寸。不同的尺寸适合不同的情形。具有严重后果的操作(如删除和关闭)或常用操作应使用较大的触控目标。具有较小后果且不常使用的操作可使用较小的目标。

显示较大目标触控错误减少状况的示意图。

手指太粗怎么办?

显示手指宽度各种变化的示意图。

有些人经常抱怨自己“手指太粗”。但即使是婴儿的手指也比大多数触控目标要宽。

左图显示平均的成人手指宽度大约为 11 毫米 (mm),婴儿的手指为 8 mm,而篮球运动员的手指超过了 19 mm!

 

有关目标大小的准则: 以下是一些帮助确定触控目标大小的准则。

7x7 建议的最小值

7x7 mm:建议的最小值

如果对错误目标的触控可通过一两个手势或在 5 秒内更正,则 7x7 mm 是合适的最小值。目标之间的间距与目标大小同样重要。

9x9 是保证准确性的建议值

当准确性非常重要时

关闭、删除和其他具有严重后果的操作无法承受意外的点击。 如果对错误目标的触控需要超过 2 个手势、5 秒或主要的上下文更改才能更正,则可以使用 9x9 mm 的目标。

5x5 最小值

当屏幕难以容纳下时

如果你发现很难在屏幕中装下想要的内容,也可以使用 5x5 mm 的目标,只要对错误目标的触控可通过一个手势更正。在这种情况下,在目标之间使用 2 mm 的间距非常重要。

 

大部分人都是右撇子

大多数人使用左手持握平板电脑,并使用右手进行触控操作。一般而言,放在右侧的内容更容易触控,将它们放在右侧可避免被屏幕的主要区域挡住。

右手挡住

触摸交互和辅助功能

当你规划你的应用要支持的 UI 和交互时,请始终牢记你的用户的广泛的能力、残障和爱好。从一开始就遵循复制功能设计可帮助使你的应用可供尽可能最广泛的受众访问。有关规划辅助功能的详细信息,请参阅辅助功能设计

相关主题

UX 设计模式 响应用户交互
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值