XR交互设计规范

2023-08-0808:23:14交互设计Comments1,040 views字数 3674阅读模式

第一部分我们主要关注空间中ui组件的尺寸和可见性。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

要了解 AR 中的尺寸设定，我们应该了解像素数（分辨率）、空间像素密度（PPI ）和角度像素密度（PPD ）的概念。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

为了便于理解，这里以两台分辨率相同的 1920×1080 设备举例，一台 49 英寸显示器和一台 5 英寸的移动设备。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

一、像素数

像素数或分辨率是屏幕长、宽的像素数。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

像素数=水平像素数*垂直像素数文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

Pixel Count= Horizontal Number of Pixels * Vertical Number of Pixels文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

在我们的例子中，长度为 1920 像素，高度为 1080 像素。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

所以像素数 = 1920*1080 = 2073600 (~2 MP)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

二、空间像素密度

像素密度是指有多少像素被压缩到物理空间中。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

像素密度= √((水平像素数²) + (垂直像素数²))/屏幕尺寸文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

在我们的示例中，1920×1080 像素分布在 5 英寸（移动设备）和 49 英寸（显示器）的屏幕中。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

所以像素密度分别为：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

移动设备 = √((1920*1920)+(1080*1080))/5 = 440.58 PPI文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

显示器 = √((1920*1920)+(1080*1080))/49 = 44.96 PPI文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

三、角像素密度

在远处呈现给眼睛的每度像素数。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

度像素是一种同时包含了用户到显示器的距离和显示器分辨率的方法。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

对于 HMD 显示器来说，这是一种更合适的像素密度表示方式。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

Pixel Density= 2*Distance*PPI*tan(0.5°)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

在之前的案例中：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

角像素密度：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

移动设备 = 2*12*440.58*tan(0.5) = 92.28 PPD文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

显示器 = 2*72*44.96*tan(0.5) = 56.5 PPD文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

也通过用水平/垂直像素数除以角度来计算 PPD。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

像素密度 = 水平分辨率 / 水平 FoV文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

像素密度 = 垂直分辨率 / 垂直 FoV文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

在 34 度水平视野下观看 1920×1080 的屏幕将具有 1920/34 = 56.5 PPD。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

四、视力（20/20 视力）

20/20 视力：表示在 20 英尺 (6.1m) 距离处测量的正常视力。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

20/20 的视力，表示可以正常看清 20 英尺处的东西。20/100 的视力，表示在 20 英尺处才能看到正常人在 100 英尺处就可以看到的东西。在这些情况下，要戴眼镜将视力提高到 20/20。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

20/20 的视力并不一定意味着完美的视力。 20/20 视力仅表示远处视力的清晰度或清晰度。不包括其他视觉能力，侧面视觉、眼睛协调、深度知觉、聚焦能力和色觉等。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

视力为 20/20 的人大约在 1 英尺（0.3m）的距离处可以看到 720 PPI。人类在 2.5 英尺 (0.76m) 的距离内最多可以看到 300 PPI。在距显示器 3 到 4 英尺（0.91m — 1.22m）的距离之外，人眼无法看到单个像素。角像素密度上，人类将能够分辨高达每度 60 像素 (PPD)。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

距离在空间像素封装中起着至关重要的作用，他需要和视力进行匹配。比如，电视的计划使用距离是其尺寸的 1.5-2.5 倍，在我们的 49 英寸示例中，观看距离大致为 6-10 英尺。而手机的观看距离约为 1 到 2 英尺。所以，在 3 英尺以下的距离内看到的屏幕应该有更高的像素密度。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

五、XR空间

如何在XR空间中代入上面的基本元素？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

HMD设备的最佳区域在4.1 英尺 (1.25m) 至 16.4 英尺 (5m)之间。建议将用作观看和交互的扩展平面放在 6.56 英尺 (2m) 处。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

相较之下，直接用手进行触控的区域应该放置在 2.13 英尺左右，小于 3.28 英尺 (1m)，因为人类的平均手臂长度为 2.08 英尺。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

和电视、手机屏幕不同，xr中的界面是变化和移动的，所以对象的大小不能用像素进行定义。XR空间中的对象应当随着距离的变化而变化。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

虽然屏幕尺寸会随着距离的增加而增加，但人们对物体的感知尺寸还是会随着距离的增加而减小。这种范式是XR体验中最重要的视觉线索之一，它可以给用户提供物体的定位线索。以真实比例查看对象，是XR体验与屏幕体验的关键区别。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

六、空间中UI的计算

要了解 XR 空间的像素密度，我们应该知道 HMD 设备的像素数（分辨率）、长宽比和视野。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

计算水平和垂直视野：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

FoV 是指通过眼睛或光学设备看到的可观察区域。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

让我们用之前的设备（1920*1080单眼）举例，比例为 16:9，Diagonal（对角） FoV 为 40°。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

从DFov计算HFoV和VFoV，我们需要计算对角线纵横比（Da）。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

使用勾股定理：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

Da = sqrt(Ha²+Va²)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

Da = sqrt((16*16)+(9*9)) = 18.36文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

利用对角线纵横比，我们可以计算水平视野为：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

HFoV = atan( tan(Df/2) * (Ha/Da) ) * 2文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

HFoV = atan(tan(40/2)*(16/18.36))*2 = 35.49°文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

垂直视野为：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

VFoV = atan( tan(Df/2) * (Va/Da) ) * 2文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

VFoV = atan(tan(40/2)*(9/18.36))*2 = 20.41°文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

计算 XR 空间的像素密度：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

Pixel Density = Horizontal Resolution / Horizontal FoV文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

Pixel Density = 1920/35.49 = 54.1 PPD文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

Pixel Density = Vertical Resolution / Vertical FoV文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

Pixel Density = 1080/20.41 = 52.92 PPD文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

约53 PPD，低于人类“正常”视力每度 60 个像素（60ppd）。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

七、计算 XR 空间中的实际尺寸

使用角直径计算：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

(Real Size = 2*distance*tan(angle/2))文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

Length = 2*distance*tan(horizontal angle/2)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

Breadth = 2*distance*tan(vertical angle/2)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

在我们的示例中，水平角 = 35.49°，垂直角 = 20.41°，因此 2m 距离处的屏幕尺寸如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

Length = 2*2*tan(35.49/2) = 1.28m文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

Breadth = 2*2*tan(20.41/2) = 0.72m文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

这个公式也可以来计算交互的目标大小。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

空间元素的最小目标大小约为 1 到 1.5 度，当我们需要更快的交互时，可以达到 3 度。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

到目前为止，2m 处的可交互元素最小尺寸应当是：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

Size = 2*2*tan(1.5/2) = 0.05 m文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

Size = 2*2*tan(3/2) = 0.1 m文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

5 – 10 cm 是 2m 处交互元素的最小目标尺寸。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

八、计算设计PPI

Pixel Density= √((Horizontal Number of Pixel²) + (Vertical Number of Pixel²))/Screen Size文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

Pixel Desnity = √((1920*1920)+(1080*1080))/28.74 = 76.65 PPI文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

第二部分我们来看看空间中的几种元素类型—Diegesis理论。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

界面设计在沉浸式空间中起着至关重要的作用。一般我们提起交互设计中的界面，大家想到的都是前端平面上的视觉表达。但在空间世界中，沉浸式设计并不只停留在视觉表达上。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

要为这种空间媒体创造内容，我们可以利用“Diegesis”概念（来自希腊的剧院）。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

为了更好地理解“Diegesis”概念。我们在这里引入一个概念：“第四面墙”。剧院中有三面墙，两边分别有一面，背后有一面。第四面墙是一个假想的边界，将舞台与观众隔开。当演员和观众发生交互的时候，这面墙就会被打破。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

第四面墙是一个存在于想象中的，虚拟内容和观众之间的边界。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

理解了“Diegesis”概念，我们来看看空间中的元素。空间里的元素可以分为两类：Diegesis和非Diegesis。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

Diegesis元素是空间场景中的一部分。非Diegesis元素存在于场景之外。用音乐举例，Diegesis元素是场景中角色演奏的一段音乐（剧情相关），而非Diegesis元素则是画外音（剧情无关）。Diegesis 理论常被用于分析游戏行业中的用户界面。交互元素可以根据他们出现在哪来进行分类：在空间中，或在故事情节中，又或者两个都是。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

九、非Diegesis元素

非Diegesis元素一般是2D的，是故事空间外的元素。沉浸空间中，非Diegesis元素应当谨慎使用，它们不受用户位置和方向的影响，会大幅降低沉浸感。典型例子包括用户注视的视线元素、必须接收的弹出消息或告警。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

十、Diegesis元素

Diegesis元素是环境（空间）中的一部分。他们可以增强沉浸感和真实感。它们是空间设计中最好的形式。不过有一个限制需要注意，如果元素不够直观，反而会降低沉浸感。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html

十一、Space元素

空间元素是漂浮在空间中的交互元素，它们存在于空间中，但又不属于真实场景和情节。他们是虚拟的。这些元素一般是不符合空间物理特性的平面 2D 或 3D 元素，虽然他们降低了体验沉浸感，但清晰度强并且易于识别。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/52916.html