如果我們需要在 XR 場景中進行快速 3D 交互原型設計，可以借助哪款工具？這篇文章里，作者介紹了一款在線設計工具：Bezel，一起來看看作者的介紹和分享。

Figma基本已經成為 2D UI 和交互設計的首選工具，如果你需要在 XR 場景中進行快速 3D 交互原型設計，推薦一款和Figma設計理念非常類似的在線設計工具：Bezel（https://bazel.it）。

作為一款類似 Figma 的 Web 端設計工具， Bezel 主要特點和優勢包括以下幾點：

• 快速 3D 場景搭建 & 屬性編輯
• 與 Figma 素材無縫銜接
• 基于 State Machine（狀態機）的動態交互
• 支持Web/XR/手機跨設備 AR/VR 預覽及交互
• 支持多人協作

Introducing Bezel

一、快速 3D 場景搭建 & 屬性編輯

編輯窗口的界面和 Figma 非常類似，基本上可以直接上手：

• 頂部菜單欄包括添加 3D 模型、繪制曲線、模型庫等；
• 左側展示對象預覽、各模型（圖層），包括添加的相機組件；
• 右側屬性編輯器，包括空間位置、尺寸、材質等；
• 底部是狀態機（可視化）編輯器，通過事件觸發 3D 對象在不同狀態（空間位置、尺寸等狀態）之間動態切換。

Bezel 編輯器

二、與 Figma 素材無縫銜接

通過設置 Figma Token （在 Figma 賬號中生成）可以授予 Bezel 通過素材鏈接直接讀取的權限，例如在對象的材質屬性中選擇圖像材質，直接從 Figma 導入。

Figma Token

Apple 團隊在 Figma 分享了 visionOS 設計資源， 因此可以直接在 Bezel 中導入官方素材：

在材質屬性中直接導入 Figma 素材

三、基于 State Machine（狀態機）的動態交互

狀態機的概念非常簡單，模型對象的所有屬性（空間位置、尺寸縮放等）代表一個狀態，改變屬性后可以創建新的狀態，通過可視化編輯狀態之間的切換順序，并選擇對應的觸發事件。如下圖所示，通過點擊（Pointer Down）Btn-Phy對象，觸發當前對象在Base State和See Through狀態之間切換：

State Machine

如果你使用過 Apple 提供的 Reality Composer，Bezel 的狀態機和 RC 的行為編輯器設計思路類似。

Reality Composer

四、支持Web/XR/手機跨設備 AR/VR 預覽及交互

作為一款 Web 端的設計工具，借助 WebXR 的跨平臺優勢，Bezel 設計的原型和交互效果可以直接在各個平臺預覽、交互：

分享預覽

通過 AR Mode 選項可以選擇 VR 或 AR 模式演示（由于 iOS/Safari 不支持 WebXR，需要下載 WebXR Viewer），例如下面這個案例，可以通過鏈接訪問 https://www.bezel.it/pe1ktk ：

交互示例：https://www.bezel.it/pe1ktk

五、案例演示

接下來我們將使用Bezel完成類似 visionOS 旋鈕在現實和虛擬場景切換的交互，以演示其各項功能。

Vision Pro

創建一個球體對象，并將 Camera 置于中央位置；為球體添加圖像材質，并將 Visibility 設置為 Back-sided 或 Double-sided，這樣從 Camera 視角可以看到一個虛擬 Skybox（生成 Skybox 可以參考前文《AIGC 在 XR 場景中的應用｜Stable Diffusion 生成 Skybox》）：

另外創建一個平面，位置放在 Skybox 半徑之外，材質屬性選為 Occluder Material（遮擋透視），當平面靠近 Camera 時，會遮擋位于其后方的 Skybox 材質，如果在 AR 模式下，將會呈現部分虛擬、部分現實的效果：

最后添加兩個對象，綁定點擊事件，觸發遮擋平面在遠、近狀態之間切換。

類似交互效果如下：

https://www.bilibili.com/video/BV1f14y1k7zB/

總結來看，Bezel 作為一個 3D 交互原型設計工具，基本能夠滿足敏捷、快速上手的需求。

一些學習資源

官方文檔：https://bezel.it/hq/docs

Bezel 產品設計師親自演示了一些設計教程：https://www.youtube.com/@marqusee /Daniel Marqusee

Apple visionOS 官方設計資源 ｜ Figmahttps://www.figma.com/community/file/1253443272911187215/Apple-Design-Resources—visionOS