工作期间,我负责过多款AR项目的设计。AR产品和其他产品的最大区别,就是引入了"空间"这个概念,这一点对于用惯二维APP的用户而言可能是略显陌生的。那我们要如何通过设计,为用户构建空间的概念呢? 我认为可以从以下四个方面入手: 表现设计元素的空间特性; 赋予虚拟物品空间特性; 引导用户在空间内的行为; 保持界面简洁,专注于空间内的操作。 一、表现设计元素的空间特性 1. 区分基础设计元素和空间设计元素 AR APP的交互内容分为两部分,基础界面交互和空间元素交互。 为了使用户能更好地理解并掌握如何使用产品,我们需要在设计空间元素交互时,表现出Z轴的概念,让设计元素根据空间的特征进行变换。 例如下图这个定位点,会始终和它锁定的平面保持平行贴合的关系。移动手机时,它的大小、角度变化,都在暗示用户这个定位点在空间内是于电脑这个平面相贴合的。 就像上图所示,虽然空间交互元素可能还是最平凡的点线面组合,但也可以通过精心设计的交互效果来表现出空间上的特征。 2. 加入3D的表现形式 以苹果的测量工具为例,下图截取自初始的SLAM扫描提示动画。细看的话可以发现这个动画做得非常细腻,通过以下几点来表现产品的空间特性。: 手机角度的变化 屏幕反光区域的变化 平面的透视 AR设计并不是要把所有内容3D化,但对于引导类的信息而言,相对立体的设计能帮助用户更好地理解。 二、赋予虚拟物品空间特性 1. 基础物理特征 如果AR APP要达到的目的是效果真实(例如IKEA Place),那么赋予虚拟物品一些基础物理特性就非常重要。 举一个最简单的例子:阴影。 再举个例子:环境光线反射。 不同的空间环境,也会对AR 虚拟物体的物理特性有许多影响。例如在昏暗的光线环境下,放一把日常光线渲染出的椅子就会很突兀。 除了这两点外,还有材质、贴合程度等多种影响AR真实性的物理特征。找到这些物理特征后,我们应该向算法大哥提出各种优化需求,从不同的层面为虚拟物体增加真实性,提升用户的整体感受。 2. 动态关系 以快手发布的新年特效为例,就通过向远方空间发射的设计元素,为虚拟空间增加了代入感。 除了虚拟物体自身和空间内的关系外,还要考虑虚拟物体与空间内其他真实物体互动时是什么关系,是遮挡、叠加、容纳,还是动态的躲避、穿越。 3. 定义物体在空间内的大小与位置 我在一款AR 家具类APP内随便打开了一件商品,就遇到了下图这样的情况。物体又大又近,完全超出了我的可视范围,还非常有压迫感。如果是仿真的虚拟物体,那就最好能赋予它真实尺寸。如果尺寸大到在当前环境内不适合展示,可以予以说明。 除了尺寸外,还应注意物体显示的位置。Google在设计指南中也指出,要为虚拟物体设置一个最近和最远的移动区间: 三、引导用户在空间内的行为 首先,能在设计中做到前两点的话,就已经能够在一定程度上,通过设计语言,帮助用户理解这个产品的空间性。 但是根据日常使用APP形成的心智模型,用户很可能并没有意识到,自己在使用AR APP时可能需要在空间内移动。例如在寻找平面时,用户可能需要四处旋转以确定平面位置;在测量大型物体时,用户需要举着手机移动,直到把大型物体的两个顶点全部扫入。因此,需要通过设计提示信息,引导用户在空间内的行为。 以我设计过一款3D扫描APP为例,受限于我们握着手机的视角,用户在空间内更多只有左右的概念,并不容易想到上面和下面。在扫描过程中,用户容易在操作中忽略了头顶面和地面的存在。为了解决这个问题,当用户进行相关操作时,我使用了多个层级的提示,对用户行为进行引导。 四、界面简洁,专注于空间内的操作 借用About Face中的这句"不论你的界面多酷,越少越好。" 在进行AR产品设计时,更应该让界面内的元素尽量简洁。因为AR是一种融合式的设计场景,将现实空间和虚拟物体相融合。而现实空间内可能有许多干扰物,本身就比较杂乱。这种情况下再放上密密麻麻的操作按钮和入口,容易让本来就不熟悉AR交互的用户,更加不知所措。 在宜家、苹果和谷歌推出的这些先导性的AR产品中,简洁的AR界面与突出的核心操作是共通特征。其中,宜家的IKEA PLACE产品逻辑相对复杂一些,但也在AR交互的模块中,保持了最大的克制,让用户专注于当前和现实空间交互的操作。 截图分别来自Google AR Doodle、IKEA Place和iPhone自带的测量工具 此外,苹果的测量工具有识别正方形的功能。但是这个功能并没有展示在页面中,而是在用户对准特定形状后,才会自动显示。在次要功能的可发现性和AR界面的简洁性中,大多数公司选择了后者。用户本身就对这些新工具的操作不够了解,支线功能太多容易使人困惑。此外,在界面上开放太多的功能入口,可能会打断用户在AR环境中的沉浸式体验。 参考: 苹果AR设计指南: https://developer.apple.com/design/human-interface-guidelines/ios/system-capabilities/augmented-reality/ 谷歌AR设计指南: https://designguidelines.withgoogle.com/ar-design/environment/definition.html#definition-physical-environments