Vision Pro 交互原型設計工具 | Bezel

0 評論 3889 瀏覽 14 收藏 8 分鐘

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

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

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

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

Vision Pro 交互原型設計工具 | Bezel

Introducing Bezel

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

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

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

Vision Pro 交互原型設計工具 | Bezel

Bezel 編輯器

二、與 Figma 素材無縫銜接

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

Vision Pro 交互原型設計工具 | Bezel

Figma Token

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

Vision Pro 交互原型設計工具 | Bezel

Vision Pro 交互原型設計工具 | Bezel

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

三、基于 State Machine(狀態機)的動態交互

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

Vision Pro 交互原型設計工具 | Bezel

State Machine

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

Vision Pro 交互原型設計工具 | Bezel

Reality Composer

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

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

Vision Pro 交互原型設計工具 | Bezel

分享預覽

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

Vision Pro 交互原型設計工具 | Bezel

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

五、案例演示

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

Vision Pro 交互原型設計工具 | Bezel

Vision Pro

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

Vision Pro 交互原型設計工具 | Bezel

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

Vision Pro 交互原型設計工具 | Bezel

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

Vision Pro 交互原型設計工具 | Bezel

類似交互效果如下:

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

作者:V2XR; 微信公眾號:V2XR

本文由 @V2XR 原創發布于人人都是產品經理。未經許可,禁止轉載。

題圖來自 Unsplash,基于 CC0 協議

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!