学了 4 年半 AR 后，我总结了 AR 眼镜软件产品的设计经验

2017-07-27 09:59:00

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

在2012年 Google IO 大会上，谢尔盖和一帮跳伞运动员共同揭幕了一款划时代的产品 Google Glass。它时髦的外观和超前的理念让在场所有人都欢呼不已，而这也是我第一次近距离接触到穿戴式 AR 设备。在这之后的2013年，我正式加入亮风台信息科技的设计团队，踏上了交互设计之路。最开始的时候，主要工作都是设计基于手机和 Pad 的 AR 产品（2D界面），跟一般的应用并没有太大区别。而后随着公司推出自己的 AR 眼镜产品，一个前所未有的挑战摆在设计团队面前：基于 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 界面特殊的属性，所以在设计上需要考虑更多，包括但不限于以下内容：

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

（PS：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 这种屏幕的特性就是不需要背光，所以显示黑色的时候像素点是不发光的，故没有光可以折射到镜片上，也就没有任何画面。这种显示方案也导致呈现的界面几乎都会带有一点透明度，且会受到环境光源和现实场景的影响。

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

三种设计方法

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

视频分镜法

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

图片来自网络

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

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

你可以根据自己需求自行设计表格和内容，然后打印出来；也可以直接用 A4 纸折出来，省去打印的麻烦。（我司提倡减少打印，并使用打印错误的 A4 纸来作为草稿纸，比较环保嘛！）

手工模拟法

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

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