返回 登录
1

2D 到 3D 的跨越,探索最佳 AR 交互设计之道

阅读9797

作者:兔斯霁,AR 交互设计师。目前就职于亮风台信息科技,主要负责 HiAR Glasses 相关软件的产品设计。
声明:本文为作者原创文章,版权归作者所有,未经允许,请勿转载。

在 2012 年 Google IO 大会上,谢尔盖和一帮跳伞爱好者共同揭幕了一款划时代的产品 Google Glass。它时髦的外观和超前的理念让在场所有人都欢呼不已,而这也是我第一次近距离接触到穿戴式 AR 设备。在这之后的 2013 年,我正式加入亮风台信息科技的设计团队,踏上了交互设计之路。最开始的时候,主要工作都是设计基于手机和 Pad 的 AR 产品(2D界面),跟一般的应用并没有太大区别。而后随着公司推出自己的 AR 眼镜产品,一个前所未有的挑战摆在设计团队面前:基于 3D 空间重新设计相关的软件产品。

随着 AR 的发展和这些年的工作学习,我收获了不少 AR 产品相关的设计知识。在这里,我想跟大家分享关于 AR 眼镜软件产品设计,希望能对大家的工作有所帮助。

本文主要内容:

  • 2D 到 3D 的转变
  • 3D 化思维
  • 相辅相成的人机交互
  • 屏幕与光学显示的差异
  • 三种设计方法

2D 到 3D 的转变

10 年前,乔布斯带来了全触控屏幕的第一代 iPhone,一句“You can touch your music!”生动形象地描述了这一开创性的交互方式——多点触控。我们的生活中也开始被各种电子屏幕包围,比如智能手机、平板电脑以及各种穿戴式设备,它们呈现着丰富多彩的信息。很多设计师的日常,也是跟一块一块屏幕“打交道”,用图像、色彩、文字等构建出各种样式的界面,所有信息都被井井有条地排布在屏幕内。

人与机器存在天生的隔阂,图形用户界面和交互方式的不断革新正让这个隔阂变得越来越小,但始终未能打破这层隔阂,哪怕是 iPhone。而直到 AR 眼镜(头盔)出现之后,这些内容才有了“跨越”屏幕的可能,并跟真实的世界“融为一体”。人机交互界面,也开始从 2D 向 3D 跨越。(这里的“3D”不是指 3D 模型,而是整个三维空间。)

3D 化思维

很多事情往往都是说起来容易做起来难,即使我反复提醒自己是基于 3D 来设计界面,但在日常工作中还是会掉入 2D 的“坑”。也许是深受 2D 界面设计的影响,我在纸上绘制原型时必定先绘制一个方框作为 AR 眼镜的 FOV(Field of View,可视区域),就好像设计手机应用时必须先画一个屏幕一样。而这样的设计方式很容易变得像在设计单纯的手机应用一样,在真机的上验证结果也很不理想。

3D 界面有着区别于 2D 界面特殊的属性,所以在设计上需要考虑更多,包括但不限于以下内容:

  1. 交互空间:空间大小、平面类型、遮挡关系
  2. 输入方式:语音、手势、控制器、外部传感器
  3. 呈现信息类型:3D模型、图片、2D界面
  4. 音效:空间音效、界面反馈音效
  5. 信息与环境的融合方式:无中生有、真实物体与虚拟信息叠加、遮挡真实环境

注:5点要素由 8ninths 团队整理而成

在上述内容中,交互空间无疑是重中之重。我后来又常犯的一个错误就是在电脑上打开 Unity 3D,然后隔着屏幕用现成的 assets 布局所谓的 3D 界面。用“纸上谈兵”这个成语来形容我初期的工作,再合适不过了。这种方式往往让我忽略了对空间的考虑,限制了的思维,造成的结果往往是用户“原地不动”地在看着一个 3D 界面。假若你已经想到要让你的用户“走动”起来了,那至少已经成功了一半,而另一半则是对各种细节的深思熟虑。我想分享一个 HoloLens 的设计案例来加以说明,希望能让大家有所启发。

Holo Studio 是 HoloLens 上一个早期的演示项目,它可以让用户在三维空间中制作各种 3D 模型。在最初的版本中,Holo Studio 的“工作台”被设计为一个悬浮在空中的方形(下图左),就好像我们真实世界中的桌面一样。然而生活的经验告诉用户——“很多人都是在坐在桌面前工作的”。这就导致用户只会停留在“工作台”的前面,而不会围绕着“工作台”走动。吸取经验教训之后,Holo Studio 的设计师将“工作台”改为圆形,才让这一问题得到显著的改善。


图片来自 HoloLens 官网

相辅相成的人机交互

从形态上来说, AR 眼镜(头盔)跟手机、平板电脑等手持设备有着很大区别。但是从基础的人机交互界面来说,它们还是有很大的共性,也比较符合经典的WIMP模式。那什么是WIMP?

WIMP是图形界面电脑所采用的界面典范。在人机互动领域之中最普遍的电脑互动界面,WIMP堪称无人能出其右,举凡微软的Windows、苹果电脑的MacOS,甚至其它以X Window系统为基础的操作系统,均采用WIMP此一界面典范。WIMP是由“视窗”(Window)、“图标”(Icon)、“选单”(Menu)以及“指标”(Pointer)所组成的缩写,其命名方式也指明了它所倚赖的四大互动元件。——Wikipedia

在这里我想说明一点:任何设备的人机交互界面设计,都是有规律可循的,不要惧怕这些变化。下面是我整理的一张表格,列举了部分常见设备的 WIMP 信息 ,供大家参考。

了解了这些共性之后,我们就能将多种交互方案进行有效地进行结合。这也是为了在多种不同的场景下,选用不同的交互方式,最终达到同一个目标。比如在 HiAR Glasses 上,作出“确认”(需要与头部光标配合)的操作可以通过四种方式实现:手势、语音、触控板和蓝牙外设。如果当环境音嘈杂时,就可以使用手势;当不方便使用双手的时候,可以使用语音;当设备处于低电量模式下,可以自动关闭很耗性能的手势和语音,仅使用触控板。

屏幕与光学显示的差异

除了更多元的交互方式外,AR 眼镜带来的最大的改变就是信息呈现方式,即虚实融合的效果。这也是依靠于 AR 眼镜的光学显示方案,将虚像“投射”到用户的环境。这里的“投射”我加了一个引号,因为虚像并不是真的投射在空中,而是根据眼球成像原理而形成的。

人在看近处的物体时,远处的影像响就会虚化;若看远处的物体时,近处的影像就会虚化。就是依靠这种本能,人才会察觉到距离感。而 AR 眼镜则是在两块光学镜片上显示有细微差异的画面,迫使眼球主动对焦以合成清晰的图像,再配合环境实物的参照、AR 虚像的运动与缩放,从而让人感觉到 AR 虚像的距离感和空间感。


光学显示方案举例,图片来自耐德佳官网

说到设计,我们通常关注色彩和视觉上的表现。对于一般的电子屏幕,设计师一般只需考虑屏幕密度和尺寸比例即可。但对于光学镜片显示方案来说,还要考虑设计稿(电脑屏幕)与实机显示的差异、虚实环境融合的效果及不同亮度的现实环境。

举个最简单的例子,Photoshop 中使用 灰白相间的网格图来表示透明,而在 AR 眼镜中则使用黑色来表示透明。因为 AR 眼镜的画面不是直接显示在镜片上,而是将 OLED 微显示屏幕(可理解为手机显示屏)上的画面,并配合相关元器件折射到镜片上的。OLED 这种屏幕的特性就是不需要背光,所以显示黑色的时候像素点是不发光的,故没有光可以折射到镜片上,也就没有任何画面。这种显示方案也导致呈现的界面几乎都会带有一点透明度,且会受到环境光源和现实场景的影响。

注:真机预览尤为重要,我们团队还专门开发了预览界面设计的应用。

三种设计方法

我们如何去产出设计方案?怎么去做 Prototype?产出物又是什么?如何与其他团队成员沟通?围绕这一系列问题,我想与大家分享个人总结的三种设计方法,并按照个人使用的频率依次介绍。

视频分镜法

分镜是各类影视作品制作时,用于描绘视频画面构成的最基本的形式,可以包括画面、台词、声音、动作等等内容。分镜没有绝对统一的格式,每种类型的作品、甚至每个导演的分镜都可能是不一样的。


图片来自网络

对于2D界面的来说,在设计初期我们会快速在纸上绘制界面的线框图,可能还会补上一些简单的说明。而对于 3D 界面的设计来说,则还需考虑用户的使用场景。出于信息的保密考虑,我不能直接把工作中产出的内容直接贴上来,故单独放一个“分镜”的样例表格。

  • 序号:可选项;
  • 场景:用户主要描绘用户、场景和 AR 虚像的关系;
  • FOV 界面:在光学镜片上,视野范围内的 AR 虚像的线框图;
  • 内容:可填写一些补充内容,比如交互方式、声音、动画等。

你可以根据自己需求自行设计表格和内容,然后打印出来。也可以直接用 A4 纸,按照下图中的方式折出来,省去打印的麻烦。

手工模拟法

相信大家小时候都做过手工,那现在就是发挥你动手能力的时候了。我们可以利用手上的任何东西来制作简易的物体,放置在真实的环境中,以此代替 AR 虚像。除了 A4 纸、便签、胶布、直尺等常用办公用品以外,还可以用乐高积木来拼搭一些不规则的物体。戴眼镜的朋友可以在自己的眼镜上用白板笔画上黑色方框,用来表示 FOV 区域。(更推荐去买一个护目镜)会议室用到的激光笔,则可以绑在头上当作人眼的视线,模拟视觉光标。

大家知道 Google Glass 的第一个可用原型花了多久做出来的吗?答案是一天。看下图中,这基本就是拿现成的东西拼凑起来的,所以大胆地去尝试各种可能吧!


图片来自 Youtube,作者 Tom Chi

这种方式是最身临其境的,代入感也比较强。但受限于工作量的问题,我建议在大家已经确定了一些方案之后,再采用此方法来进行方案的模拟、测试与验证。

脑补法

看到这里也许你会扑哧的笑出来,但这确实是最简单粗暴的一种设计方法。当然我并不是说要你完全空想,而是建议结合真实的一些产品体验、视频图文介绍等,并根据自身的经验来构想设计方案。

注:个人建议大家在 Youtube 订阅 HoloLens 的视频,然后全部都看一遍。甚至包括它官方文档中的视频。

评论