打牢基礎(chǔ)！VR和AR應(yīng)用的3個(gè)關(guān)鍵概念科普

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

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

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

更多VR干貨：

以下是譯文。

揭示未來(lái) UI 的面紗

如果你已經(jīng)是一名 UI/UX 設(shè)計(jì)師，你會(huì)更快地掌握這些概念。如果不是，建議你對(duì) UI 設(shè)計(jì)基礎(chǔ)和風(fēng)格先有一個(gè)基本的了解后，再來(lái)看這篇文章，會(huì)有更好的理解。

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

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

我將舉例說(shuō)明每個(gè)概念，并指導(dǎo)你如何在 Figma 中創(chuàng)建 VR UI。另外，我會(huì)展示如何使用 ShapesXR（XR 原型工具），直接在 VR 中測(cè)試。

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

一、尺寸

Figma 中的畫布

設(shè)計(jì)任何 UI 的第一步，是設(shè)置一個(gè)與設(shè)備屏幕大小相匹配的畫布或框架。但是，當(dāng)我們的“設(shè)備”是一個(gè) 360°的環(huán)境時(shí)，我們應(yīng)該使用什么畫布或框架呢？快速回答是 1920x1080 或 2304x1296，但這些只是設(shè)計(jì)過(guò)程中的參考，與設(shè)備本身沒(méi)有直接關(guān)系。需要考慮的關(guān)鍵方面是我們可以利用多少畫布來(lái)確保 UI 的可用性。

在 3D 領(lǐng)域，我們使用米或毫米，而不是像素。但是，如果你更習(xí)慣用像素，那也沒(méi)問(wèn)題。在 1 米的距離下，1 個(gè)像素相當(dāng)于 1 毫米。以這個(gè)概念為基準(zhǔn)你可以繼續(xù)使用像素做單位來(lái)設(shè)計(jì)。我們會(huì)在“距離”部分更深入地探討這個(gè)概念。

為了更好地了解我們?cè)谟^察不同區(qū)域時(shí)需要移動(dòng)眼睛或脖子的度數(shù)，我們加入一個(gè)角度網(wǎng)格。

在 Figma 畫布中添加角度網(wǎng)格（關(guān)鍵概念！）

①舒適區(qū) comfort zones

現(xiàn)在，讓我們深入研究一下，究竟移動(dòng)多少度會(huì)引起眼睛或脖子的不適。

舒適區(qū)的概念

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

頸部舒適度極限

頸部舒適度極限指的是脖子轉(zhuǎn)動(dòng)到不舒服的角度。這個(gè)區(qū)域位于用戶視野的最外圍，超出此區(qū)域的任何內(nèi)容都會(huì)超出用戶的視野。

我強(qiáng)烈建議您利用 ShapesXR 來(lái)親自測(cè)試和體驗(yàn)不同角度的舒適程度。這種親身探索會(huì)讓你對(duì) VR 環(huán)境中用戶舒適度有更好的理解。

UI 區(qū)域

根據(jù)眼部舒適度制定的 VR 登錄界面

尺寸的界定已完成！

好的，現(xiàn)在我們已經(jīng)對(duì)空間 UI 的原理、Figma 的畫布大小，以及用戶在看到 UI 時(shí)可能面臨的問(wèn)題有了深刻的理解。有了這些理解，你現(xiàn)在可以設(shè)計(jì)布局并探索 UI 組件的大小了。附錄中的 Figma 文件提供了一些參考來(lái)幫你完成這個(gè)過(guò)程。

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

二、高度

好的，讓我們簡(jiǎn)化一下。

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

居中的 UI 可能會(huì)感覺(jué)不舒服，因?yàn)槿祟愖匀粌A向于稍微向下看。

盡管 Figma 在直接解決這個(gè)問(wèn)題上可能選擇有限，但它對(duì)于確保積極的用戶體驗(yàn)至關(guān)重要。一定要在移交給開(kāi)發(fā)人員時(shí)傳達(dá)這一原則。

三、距離

針對(duì)不同距離進(jìn)行設(shè)計(jì)

我們?nèi)绾螢椴煌木嚯x設(shè)計(jì)呢？不同距離下，界面尺寸會(huì)改變嗎？答案是否定的。在 Figma 中，你只需要假設(shè)你現(xiàn)在設(shè)計(jì)的界面是距離用戶 1m 遠(yuǎn)的大小，正如我們?cè)谏厦娴摹俺叽纭辈糠炙v到的：在 1 米距離下，1 像素等于 1 毫米。然后，如果我們要在 2 米遠(yuǎn)的地方放置我們的 UI，開(kāi)發(fā)人員將其縮放 2 倍。同樣，對(duì)于 0.5 米處的 UI，需要縮放 0.5 倍。但是，你在 Figma 中的設(shè)計(jì)保持不變，無(wú)論是針對(duì) 0.5 米、1 米還是 2 米。

我鼓勵(lì)你利用 ShapesXR，親身體驗(yàn) VR 中不同距離的感覺(jué)。盡管它們占據(jù)相同的視覺(jué)空間，但會(huì)引發(fā)不同的感受。空間鏈接：link. 空間代碼: 9r d9 d4 w6

（譯者注：根據(jù)近大遠(yuǎn)小的原則，1m 處 1 倍大的 UI 和 2m 處 2 倍大的 UI，視覺(jué)上看起來(lái)是一樣的，但仍會(huì)有一些距離感上的差異）

總結(jié)一下

總之，這些在 AR 和 VR 中的幾個(gè)關(guān)鍵概念，將使您能夠產(chǎn)生想法、建立設(shè)計(jì)模式并深入開(kāi)發(fā)，以增強(qiáng) XR 應(yīng)用和游戲 UI 設(shè)計(jì)的一致性和可用性。最棒的是，你甚至不需要深入了解 Unity 等開(kāi)發(fā)知識(shí)，即可開(kāi)始嘗試這些概念。這拉低了 VR 設(shè)計(jì)的門檻。但是，對(duì) Unity 如何管理 UI 有一個(gè)基本的了解會(huì)是有利的，因?yàn)樗梢耘c開(kāi)發(fā)人員進(jìn)行更好的溝通。

相關(guān)資源

①原型工具 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

歡迎關(guān)注作者的微信公眾號(hào)：