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

2017/07/23

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

目录

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

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

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

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. 信息与环境的融合方式:无中生有、真实物体与虚拟信息叠加、遮挡真实环境

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 的第一个可用原型花了多久做出来的吗?答案是一天。看下图中,这基本就是拿现成的东西拼凑起来的。所以大胆地去尝试各种可能吧。

(图片来自 Youtube,作者 Tom Chi)

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

脑补法

最粗暴的一种设计方法。毕竟脑子是个好东西,大家要经常用啊。当然我并不是说要你完全空想,而是建议结合真实的一些产品体验、视频图文介绍等,结合自身的经验来构想设计方案。(我建议大家在 Youtube 订阅 HoloLens 的视频,然后全部都看一遍,全部看,甚至还要包括它官方文档中的视频。)

最后,向各位推荐我的个人项目 ardesign.club,这是一个 AR 设计知识的网站。

「AR 设计相关文章」

原文地址:zhuanlan.zhihu


【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================明星栏目推荐================

优优教程网 UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao.uisdc.com

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/ar-product-design-experience

sketch UI 界面设计 平面设计 转场动效 交互设计师 设计师 设计师专访 扁平化设计 排版布局 职场 设计流程 用户体验设计 视觉设计 素材下载 配色 web前端开发 海报设计 AI教程 设计规范 设计理论 字体下载 产品设计 设计趋势 神器下载 动效设计 psd下载 图标设计 logo设计 神器推荐 ICON 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 用户体验 优秀网页设计 ps技巧 酷站 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里