做好AR界面设计，什么是关键？

扫一扫
官方手机版

扫一扫
AI创作程序

扫一扫
木子公众号

扫一扫
AI公众号

AR(Augmented Reality)，就是我们常说的增强现实，是将计算机生成的虚拟 信息叠加到用户所在的真实世界的一种新兴技术。做 AR 界面设计，就是做增强的界面设计（Augmented User interface，AUI），界面上更直观的体现就是虚拟和现实的融合，但是，要做好它，光理解到这一层可远远不够。

AR 需要设计师把空间场景这个词语植入到自己设计的每个界面里。

只有把空间场景作为设计对象植入到自己设计的每个界面里，你才会理解所有的设计元素需要在环境中保持识别性，才会理解可以使用手势识别、眼动识别等多交互手段让用户与空间中的元素交互，才会理解如何运用颜色、动效、照明、贴图等一系列设计手段给予用户反馈、营造氛围，最终增强用户体验。

但是，对于设计师来说，什么才是真正地把空间场景这个词植入到了自己设计的每个界面里呢？

更多AR设计干货：

腾讯高手出品！8 个步骤复盘爆款「AR翅膀特效」的设计过程

Hi，我是彩云。

首先，我们来看最简单的一层应用。

我给过一个简单的例子，如下面一张图：

我们看到过很多 AR 界面是这张图的样子，现有的界面被搬进了环境空间中。似乎很简单，好像和其他屏幕界面设计没什么不同，但真的是搬进去就行了吗？

图片来自网络

即使是这简单的一步，在搬的过程中，也需要对这个界面进行色彩的调试，整个界面需要考虑环境背景的影响，如果是以 AR 眼镜为终端的界面，纯黑色是看不见的，应该说偏暗深的色系如果没有一个明亮色系衬托，其识别性都不高。

色彩只是一个方面。

你还需要考虑其相对运动关系、显示内容效果、操作交互方式等等。因为 AR 界面设计最后形成的用户所见内容不单是我们设计的那部分虚拟元素，而是和真实元素进行增强后的所有内容，即真实世界本身存在的、用户看见的画面，它们一起被呈现给用户。

如图一那样，通过考虑环境变量和设备技术，把原有的界面经过处理后“搬”进空间里，只是植入空间场景这个关键词的简单应用。

进一步的，空间场景这个词，不仅仅指用户的场景，还指你设计的画布。

做界面设计和作画类似，都是在一张画布上创作的，有些可惜的是，这张画布暂时还只能是平面的，它常常会不经意间限制我们的想象，但是，当我们将空间场景这个词植入到你设计的每张界面里，你就知道，你的画布，其实不一定是平的，在场景里，它可以是弯的。

就像下面这张图。

蓝色边框的区域是当前 AR 眼镜可以给予的显示区域，我们叫它显示 FOV（Field of View），是以可显示范围的边缘与人 眼的夹角来计算的，又可以分为水平 FOV 和垂直 FOV。

微软 Hololens 2 的显示 FOV 只有 43°×29°，远远小于我们很多手机摄像机能拍摄的范围。要做大显示 FOV，这里面有很多技术难点，暂时没有看见跨越性的突破，于是，为了让 AR 头戴设备的显示 FOV 大一些，市面上一些设备对 FOV 参数的描述已经开始使用对角线来计算了，这样可使得出的数字显得更大一些。

虽然技术的现状还有些不尽人意，但好在的是，当我们在设计每张界面的时候植入空间场景这个认知后，它对我们的影响就会少了很多，因为，在一个空间场景中，用户的位置和姿态是可变的，你的画布也是可延展的，即使某一个时刻只能显示一小部分，但那并不是全部。

就像我们人类的视觉系统，在某一个时间点，实际看到的是下面这张图的鬼样子。但是，我们最终感知到的可不是这样。

做好 AR 界面设计，知道你的设计对象是场景很关键，把空间场景这个认知植入到你设计每一张界面里，它关系到如何让用户产生身临其境的感觉，如何让用户在虚实并存的环境中进行自然的操作。为了实现这一目标，视觉效果、相对关系、操作方式等都是我们需要考虑的内容。

一、视觉效果

空间场景的视觉效果，主要关注三个要点：距离、朝向和色彩。

距离感是深度带给用户的最直接的感知。在设计中，距离体现在两个设计维度 中:第一个是元素间的相对关系，包括虚拟元素和虚拟元素之间，以及虚拟元素和 真实元素之间的关系;第二个是每个元素相对用户的具体距离，也就是每个元素在 以用户为原点的 Z 轴上的位置。

朝向，是指虚拟元素用哪个角度面对用户。在这里，我将朝向具体分为静态朝 向和动态朝向两种。静态朝向是指当用户视角固定时，虚像面对用户的那个角度。动态朝向是指当用户视角发生变化时，虚像面对用户的角度。在手机、计算机等屏幕 UI 的设计中，由于我们大多面对的是二维界面，朝向问 题可以忽略不计，但在 AUI 的场景中，除非你的虚拟元素是一个从各个角度看没有任 何区别的圆球，否则朝向就是一个需要考虑的问题。

色彩，之所以是空间场景设计中需要关注的要点，是因为我们最终感知到的色彩，其实是光的作用。它包含 3 个方面的影响:光源的照射、物体反射的可见光（物体色）、环境与空间通过光线作用后的色彩影响。也就是说，我们感知到的色彩是由光源色、物体色和环境色共同组成的。

二、相对关系

空间场景的相对关系，第一层指它的位置。

在场景里虽然既有实也有虚，但在具体设计的时候，设计师的落脚点还是只有虚实里的虚像，为了更好地理解和设计这个可以落脚的虚像，我们需要引入物理学中的一个很基础的概念:参考系。

参考系是指在物理学中用以测量并记录位置、定位其他物体属性的坐标系; 或指与观测者的运动状态相关的观测参考系；又或同指两者。参考系又称参照系、 基准系、坐标系、参考坐标等，因为 AUI 是虚实结合的画面，它和真实的物理世界息 息相关，所以要设计与之相结合的虚拟内容，就必须引入这个概念，并在设计中时时刻刻考虑到它。

按照参考系，我们将 AUI 的虚像分为两个大类:一类参考系为真实的物理世界， 一类参考系为用户。基于第一类参考系设计的虚像，丰富了物理世界本身的内容， 设计时需要更多地参考物理知识，让它更自然而然地成为原本世界的一部分。基于第二类参考系设计的虚像，多为用户随时调用，从属于用户本身。对这个参考系的设计，我们可以认为它增强了人本身的能力，就像用户的手脚、用户的眼睛、用户 的耳朵等。设计应以用户为尊，设计的成果应成为用户自身的一部分。

空间场景的相对关系，还可以衍生出第二层，第二层更贴近整体感知。

第一层以参考系考量的虚像本身的相对位置关系，还可以进一步从更完整和更表象的感官层面，考虑不同的虚像和实像关系中所呈现的整体效果。按照业内比较通用且易理解的话术， 可以分为 3 类:融合虚拟、孪生虚拟、沉浸虚拟。

融合虚拟需要借助同步定位与地图构建的技术，只有 AR 设备能够认识到真实环境，才能实现与真实世界的融合显示，这是我们期望的虚实叠加方式。

孪生虚拟模式中的虚拟内容一般在真实物体旁边孪生显示。用户在看真实物体时，画面以真实内容为主; 用户在看虚拟物体时，画面以虚拟内容为主。

沉浸虚拟是指基本和现实环境无交互，用户关注的画面以虚拟内容为主的一种内容显示模式。VR 是这种类别最极端的应用。

三、操作方式

最后，操作方式，是互动，也就是如何让用户在虚拟环境中进行自然的操作。

手势、语音、控制器、触屏、按键、键盘、触控板、鼠标、脑电波、凝视，还有数据手套、脚踏控制、操纵杆、手写笔等等等等。所有的输入和输出技术都可以为创建更自然的用户界面提供机会，全看设计师如何运用。

总的来说，设计成功的 AR 界面关键在于融入空间场景的认知，由浅入深，从视觉效果、相对关系和操作方式三个大方面将这个概念深化运用，才能为用户提供更好的 AR 界面体验。

欢迎关注作者微信公众号：「林间有影落」