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

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

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

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

Introducing Bezel

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

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

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

Bezel 編輯器

二、與 Figma 素材無縫銜接

通過設(shè)置 Figma Token （在 Figma 賬號中生成）可以授予 Bezel 通過素材鏈接直接讀取的權(quán)限，例如在對象的材質(zhì)屬性中選擇圖像材質(zhì)，直接從 Figma 導(dǎo)入。

Figma Token

Apple 團(tuán)隊在 Figma 分享了 visionOS 設(shè)計資源， 因此可以直接在 Bezel 中導(dǎo)入官方素材：

在材質(zhì)屬性中直接導(dǎo)入 Figma 素材

三、基于 State Machine（狀態(tài)機(jī)）的動態(tài)交互

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

State Machine

如果你使用過 Apple 提供的 Reality Composer，Bezel 的狀態(tài)機(jī)和 RC 的行為編輯器設(shè)計思路類似。

Reality Composer

四、支持Web/XR/手機(jī)跨設(shè)備 AR/VR 預(yù)覽及交互

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

分享預(yù)覽

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

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

五、案例演示

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

Vision Pro

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

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

最后添加兩個對象，綁定點擊事件，觸發(fā)遮擋平面在遠(yuǎn)、近狀態(tài)之間切換。

類似交互效果如下：

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

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

一些學(xué)習(xí)資源

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

Bezel 產(chǎn)品設(shè)計師親自演示了一些設(shè)計教程：https://www.youtube.com/@marqusee /Daniel Marqusee

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