category
AI summary
tags
password
summary
date
icon
status
字数统计
type
slug
orgsrc
URL
Figma 基本已经成为 2D UI 和交互设计的首选工具,如果你需要在 XR 场景中进行快速 3D 交互原型设计,推荐一款和 Figma 设计理念非常类似的在线设计工具:Bezel(https://bazel.it)。
作为一款类似 Figma 的 Web 端设计工具, Bezel 主要特点和优势包括以下几点:
- 快速 3D 场景搭建 & 属性编辑
- 与 Figma 素材无缝衔接
- 基于 State Machine(状态机)的动态交互
- 支持Web/XR/手机跨设备 AR/VR 预览及交互
- 支持多人协作
![Introducing Bezel](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F3c35714a-89c3-4d33-ad58-389eb4cfea25%2F01f45fcb-fca2-466b-9f35-891f085a5504%2F3aXdZfXLRdfnTRHG4iDMx0QU28w.gif?table=block&id=b8857dfe-652b-4c59-949c-e888102b625c)
1. 快速 3D 场景搭建 & 属性编辑
编辑窗口的界面和 Figma 非常类似,基本上可以直接上手
- 顶部菜单栏包括添加 3D 模型、绘制曲线、模型库等;
- 左侧展示对象预览、各模型(图层),包括添加的相机组件;
- 右侧属性编辑器,包括空间位置、尺寸、材质等;
- 底部是状态机(可视化)编辑器,通过事件触发 3D 对象在不同状态(空间位置、尺寸等状态)之间动态切换。
![Bezel 编辑器](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F3c35714a-89c3-4d33-ad58-389eb4cfea25%2F9303c65b-1db5-445b-ae00-8e17bef006bf%2FUntitled.png?table=block&id=d88c7164-d18d-4d69-b245-fe6d9edb9e2e)
2. 与 Figma 素材无缝衔接
通过设置 Figma Token (在 Figma 账号中生成)可以授予 Bezel 通过素材链接直接读取的权限,例如在对象的材质属性中选择图像材质,直接从 Figma 导入。
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F3c35714a-89c3-4d33-ad58-389eb4cfea25%2Fcf8db497-87e9-4661-b5ce-0b772ea780bf%2FUntitled.png?table=block&id=89f8e2f2-ca0e-4441-a0c5-14621855ae52)
Apple 团队在 Figma 分享了 visionOS 设计资源, 因此可以直接在 Bezel 中导入官方素材:
![Apple visionOS 设计资源:https://www.figma.com/community/file/1253443272911187215](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F3c35714a-89c3-4d33-ad58-389eb4cfea25%2Fc910ef33-ab37-48f4-8269-d3f2d4e81839%2FUntitled.png?table=block&id=57e8b322-c83b-4e4a-ae4c-a4757a610c10)
![在材质属性中直接导入 Figma 素材](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F3c35714a-89c3-4d33-ad58-389eb4cfea25%2F7b54cae0-d8ad-4025-8aed-2b1c580b9ca5%2FUntitled.png?table=block&id=562284fb-c904-45fc-bfc7-dfa4442cc25b)
3. 基于 State Machine(状态机)的动态交互
状态机的概念非常简单,模型对象的所有属性(空间位置、尺寸缩放等)代表一个状态,改变属性后可以创建新的状态,通过可视化编辑状态之间的切换顺序,并选择对应的触发事件。如下图所示,通过点击(Pointer Down)
Btn-Phy
对象,触发当前对象在 Base State
和 See Through
状态之间切换:![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F3c35714a-89c3-4d33-ad58-389eb4cfea25%2F81e3cddc-7b7e-461b-af6c-ce64f8da9f13%2FUntitled.png?table=block&id=e7985709-1685-4fa5-afa1-5618f418efd2)
如果你使用过 Apple 提供的 Reality Composer,Bezel 的状态机和 RC 的行为编辑器设计思路类似。
![Reality Composer](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F3c35714a-89c3-4d33-ad58-389eb4cfea25%2Fa9addc89-c5ba-4b0d-9ed8-2bcbcd2843bf%2FUntitled.png?table=block&id=cef5925a-4dc2-4522-b175-33d3241313c1)
4. 支持Web/XR/手机跨设备 AR/VR 预览及交互
作为一款 Web 端的设计工具,借助 WebXR 的跨平台优势,Bezel 设计的原型和交互效果可以直接在各个平台预览、交互:
![分享预览](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F3c35714a-89c3-4d33-ad58-389eb4cfea25%2Fe41f3502-2d39-4ff6-ad41-b3d9b7615b23%2FUntitled.png?table=block&id=40bd88bc-24b0-414f-bd07-fdde56c3ba1b)
通过 AR Mode 选项可以选择 VR 或 AR 模式演示(由于 iOS/Safari 不支持 WebXR,需要下载 WebXR Viewer),例如下面这个案例,可以通过链接访问 https://www.bezel.it/pe1ktk :
![交互示例:https://www.bezel.it/pe1ktk](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F3c35714a-89c3-4d33-ad58-389eb4cfea25%2F11338ec2-ce12-4211-9232-c47c73b88ace%2F2023-09-05_15.07.48.gif?table=block&id=ffd25c71-ca8f-4996-9f30-5d8f05ccf0f4)
5. 案例演示
接下来我们将使用 Bezel 完成类似 visionOS 旋钮在现实和虚拟场景切换的交互,以演示其各项功能。
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F3c35714a-89c3-4d33-ad58-389eb4cfea25%2F4a001022-bc53-4d31-b211-b13c2ed18152%2Fout3.gif?table=block&id=1ae1f855-abcb-4d2c-bcec-04b6555e3984)
创建一个球体对象,并将 Camera 置于中央位置;为球体添加图像材质,并将 Visibility 设置为 Back-sided 或 Double-sided,这样从 Camera 视角可以看到一个虚拟 Skybox(生成 Skybox 可以参考前文《Stable Diffusion 生成 Skybox》):
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F3c35714a-89c3-4d33-ad58-389eb4cfea25%2F131347f5-1ac3-4099-a1ce-b1cbb0d2181d%2FUntitled.png?table=block&id=16cf1db1-9b29-4ee5-be2a-48642069a1b2)
另外创建一个平面,位置放在 Skybox 半径之外,材质属性选为 Occluder Material(遮挡透视),当平面靠近 Camera 时,会遮挡位于其后方的 Skybox 材质,如果在 AR 模式下,将会呈现部分虚拟、部分现实的效果:
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F3c35714a-89c3-4d33-ad58-389eb4cfea25%2F3e2e29bc-4c7e-4fb1-a024-fa8b932b1975%2FUntitled.png?table=block&id=08c1f9fe-28ee-49ee-a607-33d617ae86ad)
最后添加两个对象,绑定点击事件,触发遮挡平面在远、近状态之间切换。
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F3c35714a-89c3-4d33-ad58-389eb4cfea25%2F64d3bdb5-c90e-49ec-a808-6a1078e533b5%2FUntitled.png?table=block&id=c5538df8-9bbb-4ad5-bb36-343354ed6d35)
类似交互效果如下:
最后总结一下,Bezel 作为一个 3D 交互原型设计工具,基本能够满足敏捷、快速上手的需求。
一些学习资源:
- 官方文档
- Bezel 产品设计师亲自演示了一些设计教程:https://www.youtube.com/@marqusee / Daniel Marqusee
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F3c35714a-89c3-4d33-ad58-389eb4cfea25%2F9f552666-1eee-494e-b9a7-914f833ea099%2FUntitled.png?table=block&id=1591c248-75fb-4875-afd4-a12e25c75b1a)
- Apple visionOS 官方设计资源 | Figma
- 作者:V2XR
- 链接:https://hackvision.pro/post/vision-pro-xr-prototype-design-tool-bezel
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。