My Secret Rainbow

AR设计的要点：深度关系

AR设计作为界面设计的新方向和新领域，在设计的时候，自然也遵循了很多界面设计的一般准则和要义，除此之外，也有一些额外需要注意的地方，而深度关系，就是其中考虑的一个重点。

AUI（Augmented User Interface，更多可以查看我之前的文章：AUI的构成元素：虚和实）的概念里，有一个重点是深度，不管是视频式的显示方案，还是光学式的显示方案（关于两种显示方案的详细解释：别只看虚实结合，聊聊AR及其设计，都必须要考虑界面元素之间的深度关系。

即：虚拟元素与虚拟元素之间的深度关系，虚拟元素与真实元素之间的深度关系。

为了更好的理解和设计元素之间的深度关系，我们可以了解下人们是如何有深度感知的。

1.双眼视差

双眼视差是由于两只眼睛的水平距离相差5-7cm而接收的不同图像所造成的深度感知。双眼视差所形成的图像能帮助我们判断距离。

在设计AUI时应该了解，当视像完全相同时，视像重合，人们看到单一无深度感知的物体；视像相差不大时，视觉系统会自动产生一个具有深度感知的单一物体；当视像相差过大时，就会看到双象了。

做个小游戏：将一根手指举起来，与远处的墙角形成一条直线。这个时候，聚焦手指，墙角变成2个墙角，聚焦墙角，手指变成2根手指。
如果把手指和墙角变成换成虚拟图像也是一样的。

2.视轴辐合

两只眼睛向内转动的幅度，大脑会利用眼部肌肉的转动来判断深度。由于肌肉的视轴辐合信息对于深度的知觉只在3m内，所以我们会发现近处的立体感更强，远处的立体感更弱。

图片来源：百科知识中文网

比如天上的月亮，看起来不像圆球更像圆形。

原创插图 @2018所以，如果想要AUI里的三维虚拟图像显得更立体，可以放近一点，但不能小于视觉系统的正常调节范围（10CM），就像我们看书不能离太近的原因是一样的，对眼睛不好。

3.运动视差

当你运动时，环境中物体的相对距离决定了它们在视网膜影像上相对运动的大小和方向。

继续第一个游戏，这次增加一根手指：注视远方的墙角，保持两根手指不动的同时移动头部，你会看见两根手指都在移动，但是近处的那根手指移动的更远更快，而注视的物体根本没有移动。
再举一个生活中的例子，车辆行进的时候，我们坐在车里看到近处的景物飞速运动，而远处的景物缓慢运动，根据景物流动的不同速度，我们是可以判断物体远近的。

这项深度感知可以让我们更多的考虑一下如果在虚实增强的世界里合理的设计和安排虚拟图像，在动效的运用上也需要更加谨慎。
运动视差是形成距离深度的一种线索，也是形成运动知觉的一种线索，后面有机会探讨运动知觉的时候我们可以继续深入。

4.相对大小

相对大小包括光线投射的一个基本原则：相同物体在不同距离时投射到视网膜上的成像大小不同。简单的来说，就是近大远小。
在虚实结合的AR世界里，如果没有其他线索，有时候很难分清这个物体是变大了，还是距离变化了。

5.遮挡关系

不透明的物体会阻挡后面的物体呈现，即使是有透明度的遮挡表面也会阻挡后面物体的光线。人们会根据这种遮挡关系来判断物体之间的深度信息。
举一个例子：我们做过一个电力巡检类试点应用，在需要查看的部分以虚拟光点做提示，这些提示是固定在真实的电力设备上的某个具体坐标点的，最初的时候，在没有对遮挡关系做过处理之前，我们看到的就是下图这样。

界面旁边的蓝色和黄色点，实际是在这个电力设备背面的。

6.线条透视

线条透视是当平行线向远处延伸时，它们在视网膜像上汇聚成为一个点。比如下图，我们就会认为同样的虚拟图片，上面的长度大于下面，这也叫做旁氏错觉。

7.质地梯度

随着表面向深处延伸，元素密度会变小。就像下面的这张图，近处的小草之间的距离还是比较大的，远处的小草间距就很密了。这就是质地梯度。

图片来自：dreamstime网站

如果把上面的七点作为我们形成深度感知的线索，在实际的体验中，我们对世界（无论是真实世界还是虚实结合的世界）的深度感知是由多重线索同时决定的，其中的自动逻辑是人类千万年的遗传基因以及每个人从出生就开始累积的经验得来的，合理的利用这些线索，能够帮助用户在虚实结合的世界里建立正确的深度关系。
在这7条线索里，1-3点又被称为双眼线索，4-7点被称为单眼线索。

相信大家更熟悉的应该是后面的单眼线索，作为设计师，不管是在之前的绘画学习中，还是在屏幕UI的设计中，我们就是利用了单眼线索在平面上进行创作的。

图片来自：google material design，在平面上用了隐喻的方法来表达深度

不同的是，在AUI的设计中，我们可以利用的线索又多了三点。
‣‣‣
需要注意的是，深度感知线索实际能够使用的程度和每个应用背后提供的技术支持有关，比如是否有深度摄像头，是否搭载环境检测等，但这一次，我们的确可以同时运用双眼线索和单眼线索，创作具有深度的AR新世界。

 

原文：https://mp.weixin.qq.com/s/lBaJp-MsZ_LIO3Rs1T81tg