最近跟小伙伴一起做了一點(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ì)過程中的學(xué)習(xí)、思考逐样、試錯(cuò)對我們來講十分寶貴蜗字。
項(xiàng)目背景
我們負(fù)責(zé)的 VR 產(chǎn)品為用戶提供的是 360o 全景視頻。由于產(chǎn)品本身的業(yè)務(wù)模式脂新，其主要的功能仍在手機(jī)端中挪捕，VR 端是手機(jī)端擴(kuò)展出的功能模塊。用戶在手機(jī)端觀看視頻的過程中争便，可以將手機(jī)與 VR 頭顯連接级零，然后戴上頭顯繼續(xù)觀看。功能點(diǎn)簡單概括如下：
- 播放 360o 全景視頻
- 查看完整的視頻列表滞乙，從列表中選取視頻播放
- 切換視頻的語言
- 設(shè)置視頻的視角高度和視野廣度
視頻播放器是最主要的部分奏纪，用來滿足用戶觀看全景視頻的需求；其次我們需要一個(gè)菜單承載上述的視頻列表酷宵、視頻設(shè)置等亥贸。這是一個(gè)業(yè)務(wù)邏輯和功能架構(gòu)都很簡單的 VR 模塊，界面也很簡單浇垦。
目前我們的 VR 產(chǎn)品與國內(nèi)某廠商合作，需要針對他們的 VR 頭顯做設(shè)計(jì)和專門的適配荣挨，這讓我們暫時(shí)無需考慮界面在不同分辨率 VR 設(shè)備上的適配問題男韧。這款 VR 頭顯以手機(jī)作為驅(qū)動(dòng)朴摊，必須與同品牌的手機(jī)連接后才能使用。VR 頭顯配備了手柄此虑，但也支持直接將已連接的手機(jī)激活為手柄使用甚纲。
VR 基礎(chǔ)
在設(shè)計(jì) VR 端的產(chǎn)品時(shí)，最需要牢記的一點(diǎn)原則是：VR 構(gòu)建的是一個(gè)三維虛擬空間朦前，是對真實(shí)世界的模擬介杆。在這個(gè)原則的基礎(chǔ)上，我們要思考的問題就變成了對「真實(shí)世界」和「人體工學(xué)」的理解韭寸。
但是我們并沒有那么多的時(shí)間和條件去從頭開始研究春哨，因此我們先從收集已有的資料開始，從中學(xué)習(xí)一些最基本的知識恩伺。
1.VR 頭顯內(nèi)的環(huán)境相當(dāng)于一個(gè)球體赴背。
2.在 C 端用戶使用 VR 設(shè)備時(shí)，常見的使用場景和姿勢是「用戶以十分舒適的姿勢坐在沙發(fā)上」晶渠，用戶的身體會(huì)保持不動(dòng)凰荚，也并不想頻繁地晃動(dòng)頸部。
3.根據(jù)人體工程學(xué)原理褒脯，大多數(shù)情況下便瑟，使用戶感到舒適的視線中心不是水平 0o，而是偏下約 6o番川，略低于水平線到涂。在用戶無需轉(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)頭部即可獲取。
在 2D 工具中設(shè)計(jì)
充分了解上述三點(diǎn)內(nèi)容后我們可以開始著手界面布局和設(shè)計(jì)嚷节，這個(gè)階段可通過 PS聂儒、Sketch 等 2D 設(shè)計(jì)工具完成。我們團(tuán)隊(duì)使用 Figma 以便于實(shí)時(shí)溝通和協(xié)作硫痰。
首先衩婚，我們需要?jiǎng)?chuàng)建一個(gè)合適的畫布。界面要在球體中顯示效斑，沒有明確的邊界非春，并且視野是隨時(shí)變化的，該創(chuàng)建什么樣的畫布對新手來講看起來是個(gè)比較迷惑的問題。
但是基于對上述三點(diǎn)的認(rèn)識奇昙，可以看出用戶視線的「度數(shù)」是界面布局中的重要依據(jù)护侮，所以畫布的尺寸和比例其實(shí)并不重要，夠用即可储耐，重要的是能夠按照度數(shù)標(biāo)記出兩個(gè)區(qū)域和視覺焦點(diǎn)羊初。
我創(chuàng)建了一個(gè)寬 3600px、高 1800px 的畫布什湘，以 100px 為單位生成網(wǎng)格长赞，每個(gè)格子則為 10o。然后再使用色塊區(qū)分出「眼部舒適區(qū)」闽撤、「頸部舒適區(qū)」得哆，標(biāo)記出焦點(diǎn)的位置，一個(gè)基礎(chǔ)畫布就完成了腹尖。
接下來我們可以在畫布上完成界面設(shè)計(jì)與布局柳恐，確定哪些重要的常用元素要在眼部舒適區(qū)展示，哪些相對次要的元素可以放置在頸部舒適區(qū)等热幔。你可以借助這張畫布想象一下界面呈現(xiàn)在 VR 頭顯內(nèi)時(shí)的效果乐设，以及用戶要完成的交互操作。
預(yù)覽設(shè)計(jì)效果
設(shè)計(jì)師 Volodymyr Kurbatov 也提供了一種方法绎巨，使我們可以在 Unity 開發(fā)構(gòu)建界面之前近尚，通過 360o 視頻播放器預(yù)覽 VR 設(shè)計(jì)圖。具體方法如下：
1.將想要預(yù)覽的 UI 界面放入 Volodymyr Kurbatov 提供的畫布中场勤；
2.按照畫布的網(wǎng)格戈锻，將 UI 元素做變形處理，完成后導(dǎo)出圖片和媳；
3.安裝 GoPro VR Player格遭，將設(shè)計(jì)圖拖入即可。
尺寸和字號問題
接著我們要去 Unity 中將設(shè)計(jì)實(shí)現(xiàn)留瞳，我們面臨的問題是該如何確定界面中切圖的尺寸拒迅、文字字號。
在 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 年沒有大幅度的提升屹电，使用 1x 也可以滿足阶剑。
關(guān)于字號，Google I/O 2016 上展示了一個(gè)文字可讀性與 PPD 的關(guān)系圖嗤详，如下所示：
Daydream 設(shè)計(jì)團(tuán)隊(duì)也在 Sticker Sheet 中給出了現(xiàn)階段 VR 設(shè)備分辨率水平下的推薦字號个扰，可供參考瓷炮。
去 Unity 中實(shí)現(xiàn)
接下來葱色，我們可以進(jìn)入 Unity 開始實(shí)際的開發(fā)構(gòu)建。我們在這里遇到的問題是娘香，盡管前面做了很多的工作苍狰，但界面呈現(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 角度材失，使用戶在面對這些組件時(shí)不會(huì)產(chǎn)生組件傾斜的感覺。
實(shí)時(shí)的交互反饋
到這里硫豆，VR 模塊用戶界面的搭建已經(jīng)基本完成龙巨，之后我們開始思考如何使界面能夠針對用戶的各項(xiàng)交互給出實(shí)時(shí)的反饋。這與 PC 網(wǎng)頁設(shè)計(jì)中針對鼠標(biāo)指針的反饋設(shè)計(jì)十分相似熊响，我們將各類組件的狀態(tài)分為以下幾種：
- Inactive 未激活狀態(tài)：當(dāng)按鈕未被點(diǎn)擊查看其列表旨别，也沒有指針滑過時(shí)；
- Active 激活狀態(tài)：當(dāng)選項(xiàng)被點(diǎn)擊查看其列表時(shí)汗茄；
- Hover 懸停狀態(tài)：當(dāng)手柄的指針滑過時(shí)秸弛；
- Enabled 可用狀態(tài)：按鈕可用時(shí)；
- Disabled 不可用狀態(tài)：按鈕不可用時(shí)剔难。
除此之外胆屿，有些狀態(tài)還設(shè)置了文字提示，例如切換視頻語言的過程中以及切換完成后偶宫。
設(shè)計(jì)過程中還有對原文字幕顯示位置的取舍非迹。通常我們認(rèn)為字幕是對用戶觀看過程的輔助，應(yīng)在不打擾用戶的前提下始終位于用戶視線內(nèi)纯趋。但考慮到 VR 是對現(xiàn)實(shí)世界的模仿憎兽，而現(xiàn)實(shí)世界中不存在可以一直浮現(xiàn)在眼前的東西（三體星球向地球發(fā)射的智子除外冷离，嘻嘻），所以我們最終還是決定將字幕放在視頻畫面中的固定位置纯命。
以上是對本次 VR 產(chǎn)品用戶界面設(shè)計(jì)過程的復(fù)盤西剥，感謝閱讀。
關(guān)注微信公眾號「一代小熊」亿汞，回復(fù)「VR」獲取 VR 設(shè)計(jì)資料瞭空。
