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

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

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

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

Introducing Bezel

一、快速 3D 場(chǎng)景搭建 & 屬性編輯

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

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

Bezel 編輯器

二、與 Figma 素材無(wú)縫銜接

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

Figma Token

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

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

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

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

State Machine

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

Reality Composer

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

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

分享預(yù)覽

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

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

五、案例演示

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

Vision Pro

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

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

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

類(lèi)似交互效果如下：

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

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

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

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

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

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