超越触控的手势交互

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

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

相关推荐

  • 听说,昨天网上打了这么一场营销+公关大战~

    你喜欢我们这些文字的话就推荐给更多的人吧。姐姐先行谢过了!我们公众号是:Aioued,记得分享哦,么么哒! ----------------------------我是一条分割线,你看不见我!-------------------- 正文: 这件事的起因,…

    2014-10-30
  • App界面交互设计规范

    APP设计规范指对APP界面进行风格统一,对界面元素的样式、颜色和大小设定统一的规范和使用原则。与设计、前端约定好统一的设计规范很重要,约定设计规范可以减少产品、设计、前端的沟通成本;可以使界面设计整洁、…

    2015-11-08
  • 设计中的交互设计——什么是交互设计

    上一篇我们探讨了设计的本质,结论是设计的本质是解决问题,满足人们的需要。有的朋友可能会问:工程学也是解决问题,比如造一座桥,就解决了一条河两岸的交通问题。那么设计和工程学有什么区别呢?这里我想补充一点:设计是漂亮得解决问题,即设计除了需要考虑如何为人们服务,还需要考虑以一种美观的、令人赏心悦目的方式来服务。因此,“漂亮”这个因素,也很必要。既然交互设计是设计学科里的一个分类,那么交互设计一定首先满足设计的本质:漂亮得解决问题。下面我们来...

    2018-03-13
  • 交互设计 ▏当谈论『隐形设计』时,大家会谈些什么?

    设计并不总是耀眼夺目的艺术。它讲究微妙、实用,而且常常是不确定的。很简单,好的设计往往是隐形的。原作者:Carrie Cousins 翻译:IFEC团队译者 十萬個為什麼当你创造网页、移动应用甚至智能手表的交互时,就是…

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

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

    2017-05-21
  • 交互设计师,如何建立自己的知识体系?

    高中毕业,我们完成了基础知识的学习。后续要掌握新技能或新知识,主要途径便是自学。每个人自学能力千差万别,这决定了一个人的成长与发展的天花板。

    2017-05-16
  • 美的苏宁智能+计划解读:供给侧改革用户体验升级

    丁道师ID:dingdaoshi123资深互联网观察家,长期致力于中国互联网产业和企业研究。苏宁与美的空调宣布联合共建用户研究实验室,通过云服务、大数据等技术基础,让用户全方位的参与到美的产品研发、交互、营销等环节中来,未来美的、用户、渠道商共同携手,构建一个可循环的新消费升级商业体系。随着一股实力派冷空气登场,2016年的初冬比以往更冷一些。这几日,北方多地现初雪,大风吹、降温猛。伴随着天气的转凉,围绕“智能空调”为核心的“寒冬保卫战...

    2018-03-10
  • 设计思考:如何传达APP中的隐藏手势?

    手势本是能够帮助用户更好的使用产品,但手势交互常被隐藏起来,因此用户如果没有发现隐藏手势,便失去了设计这些隐藏手势的功能作用。那么到底该如何向用户传达APP中的隐藏手势呢?看看这篇文章,或许你就知晓。

    2017-05-10
  • 回答这3个问题,完善你的交互设计(文末有彩蛋)

    “我躺在沙滩上,感觉到细碎的沙子在后背陷入;我踩在小溪里,感觉到脚底的乱石和流过脚面的溪水。我和沙子,我和溪水,产生了交互。”如果是静态的画面,我们恐怕不能确定画面中人是先吼叫被抓住,还是先被抓住再吼叫:
    “疯狂罪犯终于落网!”
    “魔法界警察暴力执法!”
    ——这两者之间的差别可大了。“大页面的设计是焦点的设计,小页面的设计是空间的设计”“扁平化其实为了让你觉得地方足够大。你信吗?反正我信。”——“李白”“使用APP,你不需要别人告知左箭头是什么意思。”你应该熟读Android和ios的官方设计规范、人机交互指南文档,只要遵循这些规范,用户不会因此犯错。
    Ps:规范可以帮我们“不出错”,但要达成“绝妙的设计”还需更多创造力。突然!你被人打晕了!
    醒来的时候你发现自己到了一个陌生的地方。
    现在你在想啥?——
    “我在哪?”
    “我是谁?”
    “我该怎么办?”“我在18层1806,我要去3层0303。出门左拐坐电梯,出了电梯再右拐“

    2017-05-23
  • 如何使交互稿的体验更好

    上周偶然的机会,看到老大在帮别的团队筛选简历,看到了一个同学的简单交互稿,只有界面信息的排版和页面跳转流程,缺省了很多交互稿应有的内容。后来,想起之前和同事聊起交互稿到底该如何表现的问题,就想着可以…

    2016-09-02