注意
请允许显示一个小型加载窗口来说明此页上的所有酷炫 GIF 和嵌入的视频。
了解如何针对混合现实而开发可能比较困难,因为媒介并非始终能很好地转换为 2D 设计过程。 在 Microsoft,我们创建了一款适用于 HoloLens 2 的免费应用,可帮助你直接学习混合现实 UX 设计的基础知识。 Designing Holograms 应用的独特方法深入介绍了混合现实行为、提示和建议,可帮助你创建自己的富有吸引力的、令人惊叹的 HoloLens 应用。 从 Microsoft Store 免费下载应用,并从 Microsoft 的混合现实设计团队那里学习!
Designing Holograms 的演示室(也称为玩偶屋)
专为混合现实而设计
与许多人一样,我过去经常设计移动应用。 从 2D 设计世界完全转向空间计算(目前所有事物都位于这个世界中)是一项重大转变。 在混合现实中,应用不再局限于 2D 屏幕;事实上,它们几乎是自由的,位于现实世界中,并与真实对象进行交互。
对我而言,将 3D 体验与传统的 2D 设计过程联系起来是混合现实开发中最具挑战性的方面。 在与客户的对话中,我会听到这样的话:“我知道要包含哪些功能以及如何启动并运行它们。 这是代码,我可以按照文档和教程操作,但用户体验呢? 如此多的功能、不同的输入选项、不同的场景和物理环境,令人难以拒绝”。
来自旧金山 HoloLens 2 设计研讨会的图像[https://blogs.technet.microsoft.com/askperf/2008/11/18/disabling-unnecessary-services-a-word-to-the-wise/]()
教授机会
这最初并不明显,但后面会出现一个绝佳的机会,可将混合现实用作一种媒介来进行教授。
Designing Holograms 是一个介绍混合现实设计概念和建议的视觉体验。 只有你和一位虚拟教师展示混合现实设计概念。 所有内容都基于第三人称视角,体验均在你自己的空间中提供。
Designing Holograms 预告视频
探索玩偶屋
玩偶屋是我们在整个应用中使用的虚拟环境。 此环境是一个 80 x 60 x 40 cm 的微型空间,其中包含大多数房间共有的基本元素,如墙、灯、家具、桌子和电视。 玩偶屋是应用体验的主要内容,因此我们需要确保它在任何环境中都能正常运作。 将它视为一个小型演示室,用于可视化各种混合现实概念。
玩偶屋调整行为的视频
1:1 与 1:10 原型
我们最初的假设是 1:1 演示会非常棒,几乎像是看到真人教师一样。 用户会看到教师在现实生活中看到的一切。 但是,我们立即意识到存在以下几个问题:
- 大多数开发人员会在办公室或比演示室更小的空间内运行应用,因此不合适。
- 显示是累加的,这意味着整个虚拟环境都会覆盖在用户的空间内。 两张桌子、两张沙发和不整齐的墙面可能会让人感到困惑。
- 并且最糟糕的是,虚拟环境在很大程度上受到视场的限制。
当我们尝试进行微型 1:10 缩放时,结果是一个逼真空间的奇妙的俯视图。 可以同时从任何角度看到正在进行的一切操作。 最令人吃惊的是,大多数测试人员发现观看小型版本具有更身临其境的体验,然后他们不会再切换回 1:1 缩放。 因此,我们决定弃用 1:1 版本,避免造成调整 UI 和应用的其他方面所需的其他工作。
比例为 1:1 的视图字段[https://blogs.technet.microsoft.com/askperf/2008/11/18/disabling-unnecessary-services-a-word-to-the-wise/]()
比例为 1:10 的视图字段[https://blogs.technet.microsoft.com/askperf/2008/11/18/disabling-unnecessary-services-a-word-to-the-wise/]()
使用混合现实捕获
此应用的最具特色的功能之一是使用混合现实捕获来教授和演示混合现实设计概念。
Microsoft 在旧金山有一家混合现实捕获工作室。 Microsoft 还将这项技术授权给其他工作室,包括华盛顿特区的 Avatar Dimension、洛杉矶的 Metastage、伦敦的 Dimension Studios、首尔的 SK Telecom 和柏林的 Volucap。 可在此处找到有关混合现实捕获工作室的详细信息。
Daniel Escudero 的原始镜头,来自旧金山的混合现实捕获工作室中的 106 台摄像机之一。
捕获过程会生成关键帧网格、法线和纹理,可将其作为 OBJ/PNG 文件传送,以便进一步进行后期制作,或准备好作为 H.264 压缩的 MP4 文件播放。 可将这些文件导入到 Unity、Unreal、Native 和 WebXR 项目中。 文件可在 Windows、iOS、Mac、Android、Magic Leap 和 Playstation VR 上运行。
提供的捕获播放器用于分析包含具有音频和嵌入网格的视频的 mp4。
操作捕获和虚拟对象
混合现实捕获会生成人物或动物的虚拟表示形式,但有时你可能需要这些字符以与其他虚拟对象进行交互。 下面两个示例展示了我们操作场景以实现此效果的不同方式。
头部视线调整
通过头部视线调整,你可以在运行时移动已捕获的人物的头部,这意味着你可以将捕获的人脸朝向某位用户。 在我们的示例中,我们使用它来展示视场和感兴趣的区域。 下面显示的是一个移动的 gameobject,作为头部视线的目标进行查看。 当我们将目标从一侧移到另一侧时,捕获的头部也随之移动。
我们使用这一技巧来确保空闲捕获始终面向位于玩具室中不同部分的全息影像。
捕获的头部在运行时跟随 Unity 中的目标 gameobject 移动。
同步动画对象
第二个示例是将对象制成动画以与捕获的移动同步。 在应用的不同部分,我们每隔五帧导入了一次特定捕获的顺序 OBJ。 然后,在场景中对 OBJ 进行动画处理,以确保它们与捕获的相应帧匹配。 这是一个制作动画和关键帧的乏味过程,但结果很棒。 你现在可以看到混合现实捕获与非捕获对象的交互。
混合现实捕获与 UI 面板之间的同步动画
UI 创作过程
开始 UI 设计时,我们想要展示全息影像需要提供的一些魔力和可能性。 在 3D 世界中简单地显示静态 2D 窗口和文本框并不合适。 触手可及的许多可能性还未出现,因此从一开始,我们就决定摆脱此想法,充分利用全息的 3D 空间。
首先,我们增加面板、图标和文本信息的厚度。 不过,作为用户,我看到的是文本框。 但我们还未实现带有图像的文本框。 我们接下来进一步利用混合现实工具包 (MRTK) 着色器。 MRTK 着色器成为了一种功能强大的工具,我们使用其模具功能向面板添加了反向深度。 这意味着,图标现在显示在透明面板后面,而不是在文本框前面添加元素。 作为用户,我现在看到的是我在现实世界中无法复制的东西,这就是全息魔法开始发生的地方。 此外,作为用户,我不太喜欢阅读,我在现实世界中已经完成了太多的阅读。
显然,图标比简单的文本具有更好的效果,为了提供更强大的指导,我开始创建了一组动画对象和虚拟形象,每个对象和虚拟形象都讲述一个小故事,内容是关于在各自场景中所做的事情以及使用方式。
核心概念
头部跟踪和眼动跟踪
手部跟踪
空间感知
全息帧
坐标系统
眼动跟踪
空间扫描可视化效果和空间映射
场景理解
通过手部射线进行指向和提交
“试用”时刻
Designing Holograms 讲授混合现实概念,但你可以在自己的房间内试用它们。 经过这些说明之后,我们先暂停一下,带你走出玩偶屋并开展交互活动。 下面是这些交互活动的一些示例:
在检测到手部以及它们进入视场时显示的手部跟踪帧。
通过远距离交互与碰撞的晶体进行交互
探索近距交互视觉元素
关于团队
![]() |
Daniel Escudero 首席技术设计师 Dan 是设计全息影像的创意总监,目前在旧金山的 Microsoft 混合现实学院担任设计主管,之前在伦敦的一家 Microsoft 混合现实工作室担任设计师。 |
![]() |
Martin Wettig 资深 3D 美术师 Martin 负责 Designing Holograms 的 3D 艺术和 UI 设计,之前在位于柏林的一家 Microsoft 混合现实工作室担任资深 3D 美术师。 |
非常感谢混合现实设计团队分享了如此多的知识,也非常感谢 Object Theory 的出色人员成为项目的每一步发展中必不可少的团队成员。 非常感谢你们出色的才能、热情以及卓越的设计眼光。