超越触控的手势交互

手势通常被认为是与屏幕和物体交互的自然方式,我们会谈论在移动设备屏幕上双指缩放地图,还有在电视前挥手切换到下一部电影。但这些手势真的那么自然吗?

1468806041-9040-gestural-hero

未来的交互是多重方式的。但结合触控和隔空手势(还可能有语音输入)的方式,并非典型的UI设计任务。

在Exipple,我们的设计师与工程师协作打造各种环境中的界面,能够响应手势交互和用户移动等物理属性。我们从迭代式的设计、研发和评估过程中受益良多,我愿意在此分享我们在手势交互中的领悟与心得。

1468806033-7361-gest-1

FC Barcelona博物馆中一堵交互式视频墙的照片。

设计易于发现的手势

手势通常被认为是与屏幕和物体交互的自然方式,我们会谈论在移动设备屏幕上双指缩放地图,还有在电视前挥手切换到下一部电影。但这些手势真的那么自然吗?

对于从没体验过某种交互方式的用户而言,手势是陌生的领域。虽然我们都本能地了解在触屏上查看地图细节该如何操作,但是想一想,如果在远处观看一块大屏幕呢?如果有人告诉你,你不用触碰屏幕,可以通过手部运动,以一种很自然直观的方式放大地图,你会首先尝试什么手势?遇到这种问题时,我们每个人对自然的手势都有各自的定义。

“未来的交互是多重方式的”

设计要易于发现,这点非常重要。要确保提供正确的设计符号线索,帮助用户轻松发现手势操作方式。这些可以是视觉提示,表明什么样的手势触发什么样的动作。反复使用后,这些探索性的提示就不必保留了,因为用户已经学会了这种手势。

还可以设计动画,渐进式地揭示某种不同的交互方式。例如,要确保用户了解到他们可以不必触碰屏幕,在远处就能操作,为此我们创造了一个菜单,当手指向屏幕时它就能显示更多信息。起初图片以一种随意的方式悬浮排列(A图)。靠近伸手指向这些图片,能显示出每张图片其实是一个分类,包含更多内容(B图)。

1468806033-4169-gest-7

为什么不能直接把触控操作搬过来

去年我们做了一个小小的非正式研究。我们邀请了一些人到工作室来,向他们展示了一些熟悉的电视界面:菜单和图标、地图、网格、轮播图。让他们想象应该如何在远处通过隔空手势操作这些界面。

这些界面实际上是一系列微型的手势交互原型。我们收集他们的期望,让他们探索一番并给我们反馈。其中显示出一种清晰的模式,他们的期望基本都来源于移动设备上熟悉的手势。所有的参与者,都将手机上的心理模型应用到隔空手势上。有时候,通过对界面操作的期望,我们甚至能从中区分出iOS和Android用户。

“最直观的未必最有效易用。”

但我们很快就遭遇了挑战:最直观的未必最有效易用。例如,鼠标是一种高精度设备,提供一种精确控制。人的肢体在三维空间中隔空移动就没这么精确。我们觉得自己的手在X轴上移动,但实际上我们在另外两个维度上也在微微运动。

我们无法指望达到相同的精确度。专注于精确细致的移动,会不可避免地导致某种紧张——而且“伸直手”肯定不是自然的交互方式。

触碰屏幕时,触点就是起点——一个参照点。想象一下,典型的双指缩放和双手隔空构成类似的操作,两者有什么区别。缩放等级的参考点变得模糊不定。你也不能松开屏幕来停止操作,所以起始点和结束点都变得模棱两可。

1468806036-1600-gest-6

应该避免的例子:等同于双指缩放的隔空手势。

不要尝试把触控手势直接变成隔空手势,尽管它们更熟悉和容易。手势交互需要一种全新的方式——一种起初陌生,但最终能够让用户极尽掌控、并使用户体验设计走得更远的方式。

去掉“乱跳”的指针

如果你在项目中运用计算机视觉技术(例如通过Kinect、Asus、Orbecc等带有深度传感器的相机捕捉动作),你就知道,无法100%实现手和手指的位置追踪。

其他的技术或许能提供更高的精确度,但它们通常需要用户穿戴特殊的设备。随着我们手部运动,计算机并不能持续“看见”我们的手,结果就导致了我们所谓的手抖:看起来像屏幕上的指针或箭头“紧张”颤抖。

“去掉指针这种反馈形式,提供一种替代方案。”

设计另一种指针或箭头起不到多大作用,因为它仍然需要在屏幕上追踪手部运动。你可以要求开发者过滤这些微妙的手部运动来避免这种效果。但是,这种解决方案要付出很高的代价,丧失了某些响应和精确度,并且会导致指针与手有轻微的延迟,降低用户对于界面的操控感。丧失用户的操控感,我们承担不起。

那应该怎么办?

去掉指针。触摸屏上也不需要指针。去掉指针这种反馈形式,提供一种替代方案。让图片和物体“弹出来”,立即响应用户的手部运动,不需要任何指针。

这会从根本上改变你思考用户界面的方式。这不是网页,也不是移动端触摸屏体验。

1468806040-5487-gest-3

敞开思路

要尝试解放思想,从你熟悉的标准网页和移动UI模式中解脱出来。忘了按钮——思考动作。想象一下,不再有屏幕了,你要用手势来控制周围环境中的设备。你要如何让电视机降低音量?如何点亮电灯?

象征性和形象的手势,例如用食指做出“嘘”的手势降低电视音量,这就简单直接、富于表达力。这或许有些依赖特定场景,也需要用户学习,但一旦用户学会了,他们就很容易记住和使用。

我们创造了一些成功的手势来控制媒体播放:

1468806038-6914-gest-2

要在手势和它所触发的动作之间建立联系。这些可以基于容易记忆的含义或者视觉参考。这并不容易——因为你需要考虑例如文化环境这样的方面。比如说,在某个国家或文化中被普遍接受的一种手势表达,在另一个国家中或许有冒犯的意味。在某些环境中非常突出的象征,在其他场合或许就没有帮助。

依靠形象化的手势创造所有类型的交互,可能会导致太多的手势要记忆。要将它们当做快捷、有力的快速触发方式——值得分配给那些需要用户频繁重复的操作。

减少错误识别

对于计算机而言最大的挑战,就是区分真正的意图,和那些人们自然做出的偶然手势,例如与人交谈时手部四处移动。

很容易会意外触发动作,让界面在不该变化时发生改变,导致不稳定的体验。作为UI设计师,你得与开发者密切配合,找出哪些有意义、哪些没有,就能避免哪些错误的识别。

好的起点是:手势设计总是要与特定场景和需要遇到的状况联系起来。是否正在播放音乐?那么手势就可以触发。如果没有,那就什么也不做。

“忘了按钮——思考动作。”

要区分手势和意外手部运动,时间是个重要的因素。例如,如果我指着某个物体超过1秒,就意味着我的确想要操作它。

距离也是另一个因素。如果你在为博物馆或参观中心设计一套互动装置,你可能想让它识别足够靠近的参与者的手势,相对忽略那些站在远处的旁观者。

避免疲劳

就像字面意思,感受手势造成的影响并不容易。你得一遍遍观察用户,理解你所创造的体验给人带来的真实感受。

简单几点需要记住:

  1. 除非你在设计物理游戏或锻炼项目,否则要确保人们不必太频繁或太长时间举起手臂、抬起双手。
  2. 要确保手部轨迹和UI元素间距离的比例足够舒适,尤其对于大屏幕。这意味着用户可以毫不费力指向屏幕的任何部分。
    1468806040-6841-gest-4
    一个例子,小范围动作对应屏幕上更大范围的区域,让触达更加轻松。

  3. 使用双手比单手交互更不容易感到疲劳。可以把某只手作为惯用手,用来触发操作(比如显示出滑块)。然后用另一只手来辅助(调整滑块的数值)。要考虑到你不必用单手来完成所有操作,可以探索更多的组合。
    1468806040-3809-gest-5
    相关阅读:UX设计师应当探索手势交互的6大理由

保持一致,左右手都要触发相同动作

最后,用户通过右手触发的任何操作,也应当能够用左手触发。这不仅是为了方便右撇子和左撇子,这种一致性也帮助人们学习和接受。所以如果你学会了某个手势,你可以用任意一只手触发——不必记住要用哪只手。

一致性要贯穿你整个概念,就像其他所有UX项目一样。成功创造了手势+动作的组合后,可以考虑是否需要在其他用户场景下启用类似动作。一旦熟悉了,用户会期望使用相同的手势。

要创造易于发现和记忆的统一的手势语言。

有了这些手势交互的规范,你就可以开始探索这块相对未知的创意领域了。一旦理解了这些区别,就能结合隔空手势和触控手势,创造独特流畅的用户交互。


原文链接:http://blog.invisionapp.com/effective-gestural-interaction-design/

作者信息:
Yanna Vogiazou
Yanna is UX Director at Exipple, a Barcelona-based startup. She's working with her team on new concepts and user interfaces based on gestural interaction. She brings over 8 years of experience in designing for mobile, tablet, web, TV, automotive, and domestic appliances. Outside work, Yanna can be found searching for orangutans in the jungle or exploring the underwater world.

译文地址:colachan

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/16523/

(0)
iouedioued
上一篇 2016-07-18 09:32
下一篇 2016-07-18 11:05

相关推荐

  • UI风水学:你该知道的9个UI设计门道

    好风水称之“顺”,其中一元叫气,精气/气场在于风水之中:“气遇风则走,遇水则停。”讲究个气顺心畅;
    好交互称之“理”,其中一元叫情,情感/情怀在于场景之中:“情遇杂则乱,遇简则通。”讲究个通情达理。好风水称之“顺”,其中一元叫气,精气/气场在于风水之中:“气遇风则走,遇水则停。”讲究个气顺心畅;
    好交互称之“理”,其中一元叫情,情感/情怀在于场景之中:“情遇杂则乱,遇简则通。”讲究个通情达理。

    2017-05-12
  • 设计干货推荐|四类弹框的四大设计准则

    弹框是交互设计中非常重要的一个点,这类设计不仅考验交互设计师的综合能力,也能从产品看出整个团队的整体水平如何。这就是一个细节,但是细节往往决定成败。

    2017-05-21
  • 用户体验设计师、UI 设计师和交互设计师有什么区别?

    首先,不同的公司对不同职位都有自己的理解和定位,名称相似的职位在不同的公司文化中通常职责不尽相同。比如 Google 会要求用户体验设计师有 “专家级的 XHTML,HTML,CSS 和 Javascript 能力” ,而这样的要求在其他公司并不常见。不过通常来说,这三个职位还是各自有一些大概的职责范围的。用户体验设计师用户使用你产品的每一秒钟,都是这 “体验” 的一部分。先不管 “用户体验” 能否被 “设计”,既然你尝试去改变或者影响...

    2018-03-11
  • 当交互设计遇到用户体验

    【交互设计原则】 *符合用户使用需求 *基于用户的心理模型设计 *一致性 *及时有效的反馈和解释 *形式追随功能 *单一任务、渐次呈现 1.符合用户使用需求 设计一个产品,最基础的原则就是要符合用户的使用需求。确定…

    2015-09-20
  • 央视(传统媒体)与互联网巨头(AB)在新交互形式“脸部识别”上的互怼

    支付宝霸气回应:“被盗我全赔”表明了对于人脸识别这个技术领域有比较大的知识储备与研究,针对人脸识别交互本身并不是支付宝作出这个霸气回应的核心因素

    2017-03-17
  • 优秀的UI/UX设计师需要具备哪些技能?

    互联网时代,企业对设计的要求越来越高,也越来越多样,那么成为一名优秀的设计师应该具备哪些技能呢?

    2017-05-12
  • 交互设计入门–了解交互设计

    之前写过类似的文章,想写的东西太多,结果什么都没讲明白。所以重新写一套入门的教程,分「了解交互设计」、「交互设计的职能范围」、「交互设计的常用方法」……几个章节把我对这门行业的理解和经验做个分享。

    2017-08-04
  • [MUX翻译] Apple TV 人机界面指南

    作者:hexin 新Apple TV重新定义了起居室的体验,你能将非同凡响而身临其境的内容投放到大屏幕上,这是前所未有的体验。 1 概述 1.1 设计原则 无论你是在开发游戏、媒体流应用,还是家庭实用应用,在构想产品的时候…

    交互设计 2015-10-08
  • Axure手机多屏幕滑动原型案例下载

    网络中有价值的Axure原型案例不多,给客户做的原型或者自己公司内部的几乎没有人愿意共享出来,这很正常。建议刚刚学习Axure的小伙伴儿们不要到找人索要原型,换位思考一下,你付出劳动制作好的成品也不会随意送给…

    2015-01-04
  • 用户体验在人工智能下的改变

    用户体验在人工智能下的改变安全性越接近系统底层的技术越影响用户体验,例如手机中毒或者信息被盗都会对用户产生巨大影响;如果关系到国家安全,整个社会的秩序都会被扰乱,所以安全性是产品以及用户体验的基础。效率1.实时性随着计算能力和算法的提升,计算机可以做到实时反馈结果。在以往的重要直播上,视频会显示实时字幕,这是通过给原有直播信号增加5-10分钟的延时,速记员在这短暂的时间内快速整理并输出字幕,但这需要消耗多名速记员的大量体力和脑力。在人工...

    2018-03-24