一份全面实用的隔空手势交互设计规范

发布时间:2017-04-14 11:30 来源:互联网 当前栏目:网页设计教程

   羡慕钢铁侠电影中酷炫的手势操作?其实背后的交互思考远远超出你的想象!未来的交互方式会发生颠覆性的全新改变,隔空手势就是一个完全陌生的领域。今天这篇好文来自专门研究手势交互的Exipple,不仅解释了手势与触控操作的区别,还附上7个实战设计心得,趋势就在这,不进则退,建议UI、交互的同学花十分钟学习一下。

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

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

一份全面实用的隔空手势交互设计规范 电脑高手

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

  设计易于发现的手势

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

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

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

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

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

6jp20160529

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

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

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

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

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

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

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

  • 1、
  • 2、
  • 3、
  • 4、
  • 5、
  • 6、
  • 7、
  • 8、
  • 9、
  • 10、
  • 11、
  • 12、
  • 13、
  • 14、
  • 15、
  • 16、
  • 17、
  • 18、
  • 19、
  • 20、
  • 21、
  • 22、
  • 23、
  • 24、
  • 25、
  • 1、
  • 2、
  • 3、
  • 4、
  • 5、
  • 6、
  • 7、
  • 8、
  • 9、
  • 10、
  • 11、
  • 12、
  • 13、
  • 14、
  • 15、
  • 16、
  • 17、
  • 18、
  • 19、
  • 20、
  • 21、
  • 22、
  • 23、
  • 24、
  • 25、