編輯導(dǎo)讀：本文是一次VR產(chǎn)品用戶界面設(shè)計(jì)過(guò)程的復(fù)盤(pán)，作者從項(xiàng)目背景出發(fā)，對(duì)VR產(chǎn)品用戶界面的設(shè)計(jì)步驟進(jìn)行了詳細(xì)梳理并對(duì)過(guò)程中遇到的問(wèn)題進(jìn)行了總結(jié)，與大家分享，希望通過(guò)此文能夠加深你對(duì)VR 產(chǎn)品設(shè)計(jì)的認(rèn)識(shí)。

最近跟小伙伴一起做了一點(diǎn)新鮮玩意兒，VR 產(chǎn)品的用戶界面設(shè)計(jì)。VR 本身已經(jīng)不新鮮，但這是我們首次接觸，且因?yàn)?VR 環(huán)境與傳統(tǒng)的手機(jī)、電腦、電視存在很大的區(qū)別，已有的設(shè)計(jì)經(jīng)驗(yàn)并不能完全套用在這里。因此，設(shè)計(jì)過(guò)程中的學(xué)習(xí)、思考、試錯(cuò)對(duì)我們來(lái)講十分寶貴。

01 項(xiàng)目背景

我們負(fù)責(zé)的 VR 產(chǎn)品為用戶提供的是 360o 全景視頻。由于產(chǎn)品本身的業(yè)務(wù)模式，其主要的功能仍在手機(jī)端中，VR 端是手機(jī)端擴(kuò)展出的功能模塊。用戶在手機(jī)端觀看視頻的過(guò)程中，可以將手機(jī)與 VR 頭顯連接，然后戴上頭顯繼續(xù)觀看。

功能點(diǎn)簡(jiǎn)單概括如下：

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

視頻播放器是最主要的部分，用來(lái)滿足用戶觀看全景視頻的需求；其次我們需要一個(gè)菜單承載上述的視頻列表、視頻設(shè)置等。這是一個(gè)業(yè)務(wù)邏輯和功能架構(gòu)都很簡(jiǎn)單的 VR 模塊，界面也很簡(jiǎn)單。

目前我們的 VR 產(chǎn)品與國(guó)內(nèi)某廠商合作，需要針對(duì)他們的 VR 頭顯做設(shè)計(jì)和專(zhuān)門(mén)的適配，這讓我們暫時(shí)無(wú)需考慮界面在不同分辨率 VR 設(shè)備上的適配問(wèn)題。這款 VR 頭顯以手機(jī)作為驅(qū)動(dòng)，必須與同品牌的手機(jī)連接后才能使用。VR 頭顯配備了手柄，但也支持直接將已連接的手機(jī)激活為手柄使用。

02 VR 基礎(chǔ)

在設(shè)計(jì) VR 端的產(chǎn)品時(shí)，最需要牢記的一點(diǎn)原則是：VR 構(gòu)建的是一個(gè)三維虛擬空間，是對(duì)真實(shí)世界的模擬。在這個(gè)原則的基礎(chǔ)上，我們要思考的問(wèn)題就變成了對(duì)「真實(shí)世界」和「人體工學(xué)」的理解。

但是我們并沒(méi)有那么多的時(shí)間和條件去從頭開(kāi)始研究，因此我們先從收集已有的資料開(kāi)始，從中學(xué)習(xí)一些最基本的知識(shí)。

VR 頭顯內(nèi)的環(huán)境相當(dāng)于一個(gè)球體：

在 C 端用戶使用 VR 設(shè)備時(shí)，常見(jiàn)的使用場(chǎng)景和姿勢(shì)是「用戶以十分舒適的姿勢(shì)坐在沙發(fā)上」，用戶的身體會(huì)保持不動(dòng)，也并不想頻繁地晃動(dòng)頸部。

根據(jù)人體工程學(xué)原理，大多數(shù)情況下，使用戶感到舒適的視線中心不是水平 0o，而是偏下約 6o，略低于水平線。在用戶無(wú)需轉(zhuǎn)動(dòng)脖子的前提下，可將用戶視線范圍內(nèi)的區(qū)域分成「眼部舒適區(qū)」和「頸部舒適區(qū)」。

• 眼部舒適區(qū)：用戶視線內(nèi)約 60o～70o 的范圍內(nèi)，即眼鏡向任何方向輕松移動(dòng) 30o～35o，這是用戶視線的焦點(diǎn)區(qū)域；
• 頸部舒適區(qū)：用戶視線內(nèi)約 120o 的范圍內(nèi)，用戶微微轉(zhuǎn)動(dòng)頭部即可獲取。

圖片來(lái)自 Google I/O 2017

03 在 2D 工具中設(shè)計(jì)

充分了解上述三點(diǎn)內(nèi)容后我們可以開(kāi)始著手界面布局和設(shè)計(jì)，這個(gè)階段可通過(guò) PS、Sketch 等 2D 設(shè)計(jì)工具完成。我們團(tuán)隊(duì)使用 Figma 以便于實(shí)時(shí)溝通和協(xié)作。

首先，我們需要?jiǎng)?chuàng)建一個(gè)合適的畫(huà)布。界面要在球體中顯示，沒(méi)有明確的邊界，并且視野是隨時(shí)變化的，該創(chuàng)建什么樣的畫(huà)布對(duì)新手來(lái)講看起來(lái)是個(gè)比較迷惑的問(wèn)題。

但是基于對(duì)上述三點(diǎn)的認(rèn)識(shí)，可以看出用戶視線的「度數(shù)」是界面布局中的重要依據(jù)，所以畫(huà)布的尺寸和比例其實(shí)并不重要，夠用即可，重要的是能夠按照度數(shù)標(biāo)記出兩個(gè)區(qū)域和視覺(jué)焦點(diǎn)。

我創(chuàng)建了一個(gè)寬 3600px、高 1800px 的畫(huà)布，以 100px 為單位生成網(wǎng)格，每個(gè)格子則為 10o。然后再使用色塊區(qū)分出「眼部舒適區(qū)」、「頸部舒適區(qū)」，標(biāo)記出焦點(diǎn)的位置，一個(gè)基礎(chǔ)畫(huà)布就完成了。

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

04 預(yù)覽設(shè)計(jì)效果

設(shè)計(jì)師 Volodymyr Kurbatov 也提供了一種方法，使我們可以在 Unity 開(kāi)發(fā)構(gòu)建界面之前，通過(guò) 360o 視頻播放器預(yù)覽 VR 設(shè)計(jì)圖。具體方法如下：

1、將想要預(yù)覽的 UI 界面放入 Volodymyr Kurbatov 提供的畫(huà)布中；

2、按照畫(huà)布的網(wǎng)格，將 UI 元素做變形處理，完成后導(dǎo)出圖片；

圖片來(lái)自 Volodymyr Kurbatov

3、安裝 GoPro VR Player，將設(shè)計(jì)圖拖入即可。

GIF 圖片來(lái)自 Volodymyr Kurbatov

05 尺寸和字號(hào)問(wèn)題

接著我們要去 Unity 中將設(shè)計(jì)實(shí)現(xiàn)，我們面臨的問(wèn)題是該如何確定界面中切圖的尺寸、文字字號(hào)。

在 2017 年的 Google I/O 大會(huì)上，設(shè)計(jì)師 Adam Glazier 建議使用 1x 切圖即可，因?yàn)楫?dāng)時(shí)大部分的 VR 設(shè)備 PPD（Pixel Per Inch，每英寸像素）只有 10 左右。我們項(xiàng)目要使用的 VR 頭顯單眼分辨率 1600*1600 像素，F(xiàn)OV 90o，PPD 約為17.8，較 2017 年沒(méi)有大幅度的提升，使用 1x 也可以滿足。

關(guān)于字號(hào)，Google I/O 2016 上展示了一個(gè)文字可讀性與 PPD 的關(guān)系圖，如下所示：

圖片來(lái)自 Google I/O 2016

Daydream 設(shè)計(jì)團(tuán)隊(duì)也在 Sticker Sheet 中給出了現(xiàn)階段 VR 設(shè)備分辨率水平下的推薦字號(hào)，可供參考。

圖片來(lái)自 Google Daydream Sticker Sheet v1.0

06 去 Unity 中實(shí)現(xiàn)

接下來(lái)，我們可以進(jìn)入 Unity 開(kāi)始實(shí)際的開(kāi)發(fā)構(gòu)建。我們?cè)谶@里遇到的問(wèn)題是，盡管前面做了很多的工作，但界面呈現(xiàn)在 Unity 里之后，現(xiàn)實(shí)效果都與設(shè)計(jì)圖存在差異，難免要反復(fù)調(diào)整幾次大小、位置等。

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

VR 環(huán)境中的界面會(huì)因?yàn)橛脩粢暯堑淖兓a(chǎn)生形變，因此界面中靠近邊緣的版塊可以放置在不同的 Canvas 中，然后設(shè)置 Canvas 的 Rotation 角度，使用戶在面對(duì)這些組件時(shí)不會(huì)產(chǎn)生組件傾斜的感覺(jué)。

圖片來(lái)自 Google Daydream Sticker Sheet v1.0

07 實(shí)時(shí)的交互反饋

到這里，VR 模塊用戶界面的搭建已經(jīng)基本完成，之后我們開(kāi)始思考如何使界面能夠針對(duì)用戶的各項(xiàng)交互給出實(shí)時(shí)的反饋。這與 PC 網(wǎng)頁(yè)設(shè)計(jì)中針對(duì)鼠標(biāo)指針的反饋設(shè)計(jì)十分相似，我們將各類(lèi)組件的狀態(tài)分為以下幾種：

• Inactive 未激活狀態(tài)：當(dāng)按鈕未被點(diǎn)擊查看其列表，也沒(méi)有指針滑過(guò)時(shí)；
• Active 激活狀態(tài)：當(dāng)選項(xiàng)被點(diǎn)擊查看其列表時(shí)；
• Hover 懸停狀態(tài)：當(dāng)手柄的指針滑過(guò)時(shí)；
• Enabled 可用狀態(tài)：按鈕可用時(shí)；
• Disabled 不可用狀態(tài)：按鈕不可用時(shí)。

除此之外，有些狀態(tài)還設(shè)置了文字提示，例如切換視頻語(yǔ)言的過(guò)程中以及切換完成后。

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

以上是對(duì)本次 VR 產(chǎn)品用戶界面設(shè)計(jì)過(guò)程的復(fù)盤(pán)，感謝閱讀。

作者：Jalyn；微信公眾號(hào)「一代小熊」

本文由@Jalyn 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)允許，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議。