本文已獲得原作者Albert mauri aragonés 的翻譯轉載授權，根據原作者要求，這里放上他的Linkedin主頁：https://www.linkedin.com/in/albert-mauri

原文地址：https://uxdesign.cc/3-key-concepts-for-vr-apps-bdd3ddc9e6aa

譯者注：在文中，會多次提到一個工具 shapesXR，這是一個安裝在 VR 眼鏡里的設計原型工具，可以將設計稿、模型和場景放進工具里，在 VR 環境中親自搭建一個 XR 原型。此工具已經成為譯者日常設計工具之一，非常推薦 XR 設計者使用。后續，我會持續翻譯該作者在 XR 領域里非常有用的文章，也會詳細介紹這個工具。

更多VR干貨：

以下是譯文。

揭示未來 UI 的面紗

如果你已經是一名 UI/UX 設計師，你會更快地掌握這些概念。如果不是，建議你對 UI 設計基礎和風格先有一個基本的了解后，再來看這篇文章，會有更好的理解。

VR 設計與手機和桌面應用設計大有不同，而這篇文章將討論 VR UI 設計的三個基本概念：尺寸、高度和距離。

1. 尺寸：在 Figma 中，畫布應該是什么尺寸?我的 UI 應該有多大？（其他設計工具都需要考慮這個問題，作者僅以 figma 為例）
2. 高度：應該在什么高度放置 UI？
3. 距離：距離如何影響 UI？

我將舉例說明每個概念，并指導你如何在 Figma 中創建 VR UI。另外，我會展示如何使用 ShapesXR（XR 原型工具），直接在 VR 中測試。

以下面的登錄界面案為例，我們將設計一個與用戶相距 1 米的登錄界面，并介紹相應的原則，相同的原則也適用于其他 VR 應用或游戲中的 2D 界面。

一、尺寸

Figma 中的畫布

設計任何 UI 的第一步，是設置一個與設備屏幕大小相匹配的畫布或框架。但是，當我們的“設備”是一個 360°的環境時，我們應該使用什么畫布或框架呢？快速回答是 1920x1080 或 2304x1296，但這些只是設計過程中的參考，與設備本身沒有直接關系。需要考慮的關鍵方面是我們可以利用多少畫布來確保 UI 的可用性。

在 3D 領域，我們使用米或毫米，而不是像素。但是，如果你更習慣用像素，那也沒問題。在 1 米的距離下，1 個像素相當于 1 毫米。以這個概念為基準你可以繼續使用像素做單位來設計。我們會在“距離”部分更深入地探討這個概念。

為了更好地了解我們在觀察不同區域時需要移動眼睛或脖子的度數，我們加入一個角度網格。

在 Figma 畫布中添加角度網格（關鍵概念！）

①舒適區 comfort zones

現在，讓我們深入研究一下，究竟移動多少度會引起眼睛或脖子的不適。

舒適區的概念

舒適區指的是你可以無需大幅轉動脖子觀看的區域。任何超出此區域(30°)的 UI 界面都需要向用戶彎曲或傾斜。（譯者注：可以理解為市場上的曲面屏顯示器，過寬的屏幕需要適當彎曲來保證觀看舒適）

頸部舒適度極限

頸部舒適度極限指的是脖子轉動到不舒服的角度。這個區域位于用戶視野的最外圍，超出此區域的任何內容都會超出用戶的視野。

我強烈建議您利用 ShapesXR 來親自測試和體驗不同角度的舒適程度。這種親身探索會讓你對 VR 環境中用戶舒適度有更好的理解。

UI 區域

根據眼部舒適度制定的 VR 登錄界面

尺寸的界定已完成！

好的，現在我們已經對空間 UI 的原理、Figma 的畫布大小，以及用戶在看到 UI 時可能面臨的問題有了深刻的理解。有了這些理解，你現在可以設計布局并探索 UI 組件的大小了。附錄中的 Figma 文件提供了一些參考來幫你完成這個過程。

然而還有更多要考慮的，比如高度？是否應該將 UI 的中心放在用戶的視線水平中心？答案是 NO，讓我們深入探討這個概念。

二、高度

好的，讓我們簡化一下。

我們需要將 UI 防止在略低于眼睛中心的位置。

居中的 UI 可能會感覺不舒服，因為人類自然傾向于稍微向下看。

盡管 Figma 在直接解決這個問題上可能選擇有限，但它對于確保積極的用戶體驗至關重要。一定要在移交給開發人員時傳達這一原則。

三、距離

針對不同距離進行設計

我們如何為不同的距離設計呢？不同距離下，界面尺寸會改變嗎？答案是否定的。在 Figma 中，你只需要假設你現在設計的界面是距離用戶 1m 遠的大小，正如我們在上面的“尺寸”部分所講到的：在 1 米距離下，1 像素等于 1 毫米。然后，如果我們要在 2 米遠的地方放置我們的 UI，開發人員將其縮放 2 倍。同樣，對于 0.5 米處的 UI，需要縮放 0.5 倍。但是，你在 Figma 中的設計保持不變，無論是針對 0.5 米、1 米還是 2 米。

我鼓勵你利用 ShapesXR，親身體驗 VR 中不同距離的感覺。盡管它們占據相同的視覺空間，但會引發不同的感受。空間鏈接：link. 空間代碼: 9r d9 d4 w6

（譯者注：根據近大遠小的原則，1m 處 1 倍大的 UI 和 2m 處 2 倍大的 UI，視覺上看起來是一樣的，但仍會有一些距離感上的差異）

總結一下

總之，這些在 AR 和 VR 中的幾個關鍵概念，將使您能夠產生想法、建立設計模式并深入開發，以增強 XR 應用和游戲 UI 設計的一致性和可用性。最棒的是，你甚至不需要深入了解 Unity 等開發知識，即可開始嘗試這些概念。這拉低了 VR 設計的門檻。但是，對 Unity 如何管理 UI 有一個基本的了解會是有利的，因為它可以與開發人員進行更好的溝通。

相關資源

①原型工具 ShapesXR

https://www.oculus.com/experiences/quest/3899112273551602/?store=quest&item_id=3899112273551602&r=1

②ShapesXR 范例鏈接

https://shapes.app/space/view/1701423b-7abc-4724-b97e-301a43dc7857/9rd9d4w6

③Shapes XR 中的 figma 文件

https://www.figma.com/community/file/1242434690291091636

歡迎關注作者的微信公眾號：