編輯導讀：本文是一次VR產品用戶界面設計過程的復盤，作者從項目背景出發，對VR產品用戶界面的設計步驟進行了詳細梳理并對過程中遇到的問題進行了總結，與大家分享，希望通過此文能夠加深你對VR 產品設計的認識。

最近跟小伙伴一起做了一點新鮮玩意兒，VR 產品的用戶界面設計。VR 本身已經不新鮮，但這是我們首次接觸，且因為 VR 環境與傳統的手機、電腦、電視存在很大的區別，已有的設計經驗并不能完全套用在這里。因此，設計過程中的學習、思考、試錯對我們來講十分寶貴。

01 項目背景

我們負責的 VR 產品為用戶提供的是 360o 全景視頻。由于產品本身的業務模式，其主要的功能仍在手機端中，VR 端是手機端擴展出的功能模塊。用戶在手機端觀看視頻的過程中，可以將手機與 VR 頭顯連接，然后戴上頭顯繼續觀看。

功能點簡單概括如下：

• 播放 360o 全景視頻
• 查看完整的視頻列表，從列表中選取視頻播放
• 切換視頻的語言
• 設置視頻的視角高度和視野廣度

視頻播放器是最主要的部分，用來滿足用戶觀看全景視頻的需求；其次我們需要一個菜單承載上述的視頻列表、視頻設置等。這是一個業務邏輯和功能架構都很簡單的 VR 模塊，界面也很簡單。

目前我們的 VR 產品與國內某廠商合作，需要針對他們的 VR 頭顯做設計和專門的適配，這讓我們暫時無需考慮界面在不同分辨率 VR 設備上的適配問題。這款 VR 頭顯以手機作為驅動，必須與同品牌的手機連接后才能使用。VR 頭顯配備了手柄，但也支持直接將已連接的手機激活為手柄使用。

02 VR 基礎

在設計 VR 端的產品時，最需要牢記的一點原則是：VR 構建的是一個三維虛擬空間，是對真實世界的模擬。在這個原則的基礎上，我們要思考的問題就變成了對「真實世界」和「人體工學」的理解。

但是我們并沒有那么多的時間和條件去從頭開始研究，因此我們先從收集已有的資料開始，從中學習一些最基本的知識。

VR 頭顯內的環境相當于一個球體：

在 C 端用戶使用 VR 設備時，常見的使用場景和姿勢是「用戶以十分舒適的姿勢坐在沙發上」，用戶的身體會保持不動，也并不想頻繁地晃動頸部。

根據人體工程學原理，大多數情況下，使用戶感到舒適的視線中心不是水平 0o，而是偏下約 6o，略低于水平線。在用戶無需轉動脖子的前提下，可將用戶視線范圍內的區域分成「眼部舒適區」和「頸部舒適區」。

• 眼部舒適區：用戶視線內約 60o～70o 的范圍內，即眼鏡向任何方向輕松移動 30o～35o，這是用戶視線的焦點區域；
• 頸部舒適區：用戶視線內約 120o 的范圍內，用戶微微轉動頭部即可獲取。

圖片來自 Google I/O 2017

03 在 2D 工具中設計

充分了解上述三點內容后我們可以開始著手界面布局和設計，這個階段可通過 PS、Sketch 等 2D 設計工具完成。我們團隊使用 Figma 以便于實時溝通和協作。

首先，我們需要創建一個合適的畫布。界面要在球體中顯示，沒有明確的邊界，并且視野是隨時變化的，該創建什么樣的畫布對新手來講看起來是個比較迷惑的問題。

但是基于對上述三點的認識，可以看出用戶視線的「度數」是界面布局中的重要依據，所以畫布的尺寸和比例其實并不重要，夠用即可，重要的是能夠按照度數標記出兩個區域和視覺焦點。

我創建了一個寬 3600px、高 1800px 的畫布，以 100px 為單位生成網格，每個格子則為 10o。然后再使用色塊區分出「眼部舒適區」、「頸部舒適區」，標記出焦點的位置，一個基礎畫布就完成了。

接下來我們可以在畫布上完成界面設計與布局，確定哪些重要的常用元素要在眼部舒適區展示，哪些相對次要的元素可以放置在頸部舒適區等。你可以借助這張畫布想象一下界面呈現在 VR 頭顯內時的效果，以及用戶要完成的交互操作。

04 預覽設計效果

設計師 Volodymyr Kurbatov 也提供了一種方法，使我們可以在 Unity 開發構建界面之前，通過 360o 視頻播放器預覽 VR 設計圖。具體方法如下：

1、將想要預覽的 UI 界面放入 Volodymyr Kurbatov 提供的畫布中；

2、按照畫布的網格，將 UI 元素做變形處理，完成后導出圖片；

圖片來自 Volodymyr Kurbatov

3、安裝 GoPro VR Player，將設計圖拖入即可。

GIF 圖片來自 Volodymyr Kurbatov

05 尺寸和字號問題

接著我們要去 Unity 中將設計實現，我們面臨的問題是該如何確定界面中切圖的尺寸、文字字號。

在 2017 年的 Google I/O 大會上，設計師 Adam Glazier 建議使用 1x 切圖即可，因為當時大部分的 VR 設備 PPD（Pixel Per Inch，每英寸像素）只有 10 左右。我們項目要使用的 VR 頭顯單眼分辨率 1600*1600 像素，FOV 90o，PPD 約為17.8，較 2017 年沒有大幅度的提升，使用 1x 也可以滿足。

關于字號，Google I/O 2016 上展示了一個文字可讀性與 PPD 的關系圖，如下所示：

圖片來自 Google I/O 2016

Daydream 設計團隊也在 Sticker Sheet 中給出了現階段 VR 設備分辨率水平下的推薦字號，可供參考。

圖片來自 Google Daydream Sticker Sheet v1.0

06 去 Unity 中實現

接下來，我們可以進入 Unity 開始實際的開發構建。我們在這里遇到的問題是，盡管前面做了很多的工作，但界面呈現在 Unity 里之后，現實效果都與設計圖存在差異，難免要反復調整幾次大小、位置等。

我們可以先將完整設計圖導入 Unity 中作為參照背景，然后在其上完成各個組件、元素的布局。布局確定后，再要調整時只需調整 Canvas 的 Scale 整體縮放比例即可。

VR 環境中的界面會因為用戶視角的變化而產生形變，因此界面中靠近邊緣的版塊可以放置在不同的 Canvas 中，然后設置 Canvas 的 Rotation 角度，使用戶在面對這些組件時不會產生組件傾斜的感覺。

圖片來自 Google Daydream Sticker Sheet v1.0

07 實時的交互反饋

到這里，VR 模塊用戶界面的搭建已經基本完成，之后我們開始思考如何使界面能夠針對用戶的各項交互給出實時的反饋。這與 PC 網頁設計中針對鼠標指針的反饋設計十分相似，我們將各類組件的狀態分為以下幾種：

• Inactive 未激活狀態：當按鈕未被點擊查看其列表，也沒有指針滑過時；
• Active 激活狀態：當選項被點擊查看其列表時；
• Hover 懸停狀態：當手柄的指針滑過時；
• Enabled 可用狀態：按鈕可用時；
• Disabled 不可用狀態：按鈕不可用時。

除此之外，有些狀態還設置了文字提示，例如切換視頻語言的過程中以及切換完成后。

設計過程中還有對原文字幕顯示位置的取舍。通常我們認為字幕是對用戶觀看過程的輔助，應在不打擾用戶的前提下始終位于用戶視線內。但考慮到 VR 是對現實世界的模仿，而現實世界中不存在可以一直浮現在眼前的東西（三體星球向地球發射的智子除外，嘻嘻），所以我們最終還是決定將字幕放在視頻畫面中的固定位置。

以上是對本次 VR 產品用戶界面設計過程的復盤，感謝閱讀。

作者：Jalyn；微信公眾號「一代小熊」

本文由@Jalyn 原創發布于人人都是產品經理，未經允許，禁止轉載

題圖來自Unsplash，基于CC0協議。