對(duì)許多設(shè)計(jì)師來(lái)說(shuō)，VR是一個(gè)未知領(lǐng)域。近年來(lái)，我們目睹了VR相關(guān)硬件和軟件的蓬勃發(fā)展。VR的體驗(yàn)從不盡人意到令人驚奇，他們的復(fù)雜性和功能性都有了很大的變化。

作為UI或UX設(shè)計(jì)師，邁向VR的第一步是艱難的。我知道，因?yàn)槲覀円彩沁@樣過(guò)來(lái)的，所以無(wú)需畏懼！在這篇文章，我將分享VR界面的設(shè)計(jì)流程，希望可以借此為你開(kāi)啟VR設(shè)計(jì)的大門(mén)。你無(wú)需成為專(zhuān)家，只要將自己的設(shè)計(jì)技能運(yùn)用在這片新的領(lǐng)域就好。

目前都有哪些類(lèi)型的虛擬現(xiàn)實(shí)應(yīng)用（VR App）？

一般來(lái)說(shuō)，從設(shè)計(jì)師的角度來(lái)看，VR App由兩類(lèi)控件組成：環(huán)境和界面。

• 環(huán)境：可以理解為你帶上VR頭盔后所進(jìn)入的世界——可能是一個(gè)虛擬的星際世界，也可能是你坐過(guò)山車(chē)看到的風(fēng)景。
• 界面：是用戶(hù)交互元素的集合，通過(guò)它來(lái)在環(huán)境中導(dǎo)航，并控制自己的體驗(yàn)。所有的VR App都可以根據(jù)這兩個(gè)維度的復(fù)雜程度來(lái)定義。

集中在二象限（環(huán)境復(fù)雜、界面簡(jiǎn)單）的app多為模擬器類(lèi)，比如上文提到的過(guò)山車(chē)體驗(yàn)，在滑行時(shí)你會(huì)一直處于這種環(huán)境。

與其相對(duì)的四象限有豐富的界面和簡(jiǎn)單的環(huán)境，三星的Gear VR主屏幕就是一個(gè)很好的例子。

設(shè)計(jì)地面、風(fēng)景等虛擬環(huán)境需要設(shè)計(jì)師熟練運(yùn)用3D模型工具，將元素繪制得生動(dòng)逼真。對(duì)于許多UI和UX設(shè)計(jì)師來(lái)說(shuō)有些困難，而VR界面設(shè)計(jì)則是他們更好的選擇，可以運(yùn)用自身技能。

我們最早的VR界面是為“The Economist”設(shè)計(jì)的，與VR產(chǎn)品工作室Visualise一同合作。我們做設(shè)計(jì)，Visualise進(jìn)行研發(fā)。

在介紹VR界面設(shè)計(jì)的具體細(xì)節(jié)之前，我們先以“The Economist”為例，來(lái)闡述VR app的設(shè)計(jì)方法。你可以通過(guò)Oculus網(wǎng)站先下載一下“The Economist”。

VR UI設(shè)計(jì)過(guò)程

雖然大多數(shù)設(shè)計(jì)師對(duì)移動(dòng)端界面設(shè)計(jì)流程可能已經(jīng)了如指掌了，但是對(duì)VR界面的設(shè)計(jì)流程卻不甚了解。當(dāng)我們接到設(shè)計(jì)VR界面的項(xiàng)目時(shí)，我們做的第一步就是設(shè)計(jì)一套工作流程。

換湯不換藥（新領(lǐng)域，舊流程）

第一次使用三星的Gear VR時(shí)，我們發(fā)現(xiàn)這和傳統(tǒng)的移動(dòng)端app是相似的。他們有相同的工作原理：用戶(hù)通過(guò)與界面交互來(lái)瀏覽頁(yè)面。這點(diǎn)很重要，雖然這里只是簡(jiǎn)單提了一下，但需要牢記在心。

既然VR與傳統(tǒng)app界面相似，那么設(shè)計(jì)師們花費(fèi)數(shù)年時(shí)間學(xué)習(xí)并掌握的傳統(tǒng)UI經(jīng)驗(yàn)不會(huì)浪費(fèi)，同樣可以復(fù)用于VR領(lǐng)域。事實(shí)上，你比你想象的更擅長(zhǎng)VR app設(shè)計(jì)！

在講解VR界面設(shè)計(jì)流程之前，讓我們先回顧一下傳統(tǒng)移動(dòng)界面的設(shè)計(jì)流程。

第一步：線框圖

首先，通過(guò)快速多次迭代來(lái)定義交互方式和總體布局。

第二步：視覺(jué)設(shè)計(jì)

在這個(gè)階段，設(shè)計(jì)風(fēng)格和交互方式已經(jīng)確立。將品牌風(fēng)格與線框圖相結(jié)合，經(jīng)過(guò)精心設(shè)計(jì)得到漂亮的界面。

第三步：流程圖

為了表明頁(yè)面之間的交互流程，我們會(huì)用線把頁(yè)面連接起來(lái)，并將其稱(chēng)之為流程圖。流程圖將作為程序員在開(kāi)發(fā)過(guò)程中的主要參考。

那么，我們?nèi)绾螌鹘y(tǒng)的設(shè)計(jì)流程應(yīng)用于VR設(shè)計(jì)中呢？

初始設(shè)置

畫(huà)布大小

最簡(jiǎn)單的問(wèn)題可能是最具挑戰(zhàn)性的。面對(duì)360度的畫(huà)布，用戶(hù)很難知道從哪里開(kāi)始交互。事實(shí)上，UX和UI設(shè)計(jì)師只需要關(guān)注空間中的某一部分即可。

我們花了幾周時(shí)間來(lái)弄清楚VR設(shè)計(jì)所需的畫(huà)布尺寸。在設(shè)計(jì)移動(dòng)端app時(shí)，畫(huà)布尺寸是由設(shè)備大小決定的：比如iPhone6的尺寸為1334×750像素，Android為1280×720像素。

要想將移動(dòng)端app設(shè)計(jì)流程應(yīng)用于VR，首先必須確定一個(gè)行之有效的畫(huà)布大小。

下圖看起來(lái)像是一個(gè)360度的環(huán)境被展開(kāi)成了平面，這種表現(xiàn)形式被稱(chēng)為等邊投影。在三維虛擬環(huán)境中，這些投影會(huì)包裹在一個(gè)球體周?chē)?，?lái)模擬真實(shí)世界。

水平360度和垂直180度代表了投影的全寬。我們可以以此來(lái)定義畫(huà)布的大?。?600×1800像素。

這么大的畫(huà)布很難顧全，由于我們主要是為了繪制VR界面，我們可以將注意力只集中在畫(huà)布的一部分上?；?Mike Alger早期對(duì)視覺(jué)舒適區(qū)域的研究，我們可以把有用的界面分離出來(lái)。用戶(hù)感興趣的區(qū)域集中在360度環(huán)境面積的九分之一，它位于等矩形圖像的中心，大小為1200×600像素。

得出結(jié)論：

• “360視角”畫(huà)布: 3600 × 1800像素
• “UI視角”畫(huà)布: 1200 × 600像素

測(cè)試

在一塊屏幕上使用兩種視角的畫(huà)布是為了測(cè)試?！癠I視角“的畫(huà)布可以使我們的注意力集中在設(shè)計(jì)本身，制作流程圖也會(huì)更便捷。同時(shí)，“360視角“畫(huà)布用于預(yù)覽VR界面，為了獲得真實(shí)的比例感，使用VR頭盔測(cè)試界面是很有必要的。

工具
在正式演練之前，先了解下所需的工具：

• sketch：我們將使用sketch來(lái)設(shè)計(jì)界面和交互流程。如果沒(méi)有，可以下載試用版。sketch是首選的界面設(shè)計(jì)軟件，不過(guò)如果你更習(xí)慣于使用photoshop或其他任何軟件，也是可以的。
• GoPro VR播放器：它是一個(gè)360度界面查看器，由Gopro提供，免費(fèi)?？梢杂脕?lái)預(yù)覽設(shè)計(jì)并測(cè)試。
• Oculus Rift（譯者按：是一款頭戴VR顯示器，價(jià)格在399美元左右）：將Oculus Rift連接到GoPro播放器來(lái)進(jìn)行測(cè)試。

實(shí)操演練

在本節(jié)，我們將花費(fèi)最多五分鐘時(shí)間，來(lái)練習(xí)下VR界面設(shè)計(jì)流程。

下載素材包（https://www.dropbox.com/s/i73fot0fevv436c/Kickpush_VRDemo_Assets.zip?dl=0），里面有調(diào)整好的UI元素和背景圖。如果你想用自己的素材，也是可以的。

1. 設(shè)置“360視角”畫(huà)布

首先，創(chuàng)建一個(gè)360度視角的畫(huà)布。打開(kāi)sketch，創(chuàng)建新文件，并創(chuàng)建一個(gè)3600×1800像素的畫(huà)布。導(dǎo)入名為background.jpg的文件，并將其放置在畫(huà)布的中間。如果想用自己的素材，請(qǐng)確保背景圖像的比例為2:1，并將其調(diào)整為3600×1800像素。

2. 設(shè)置“UI視角”畫(huà)布

如上文所述，“UI視角”的畫(huà)布只選取“360視角”的一部分，并且只專(zhuān)注于VR界面設(shè)計(jì)。因此，我們?cè)?60旁邊建立新的1200×600像素的畫(huà)布。然后，將360視角的背景復(fù)制到新畫(huà)布，注意，要放置在新畫(huà)布的正中間，并且不要調(diào)整大小。我們要保留背景的裁剪版本。

3. 設(shè)計(jì)界面

我們將在“UI視角“畫(huà)布上設(shè)計(jì)我們的界面。為了使練習(xí)更加清晰直觀，我們添加了一行卡片。如果你想偷懶，也可以從素材包里直接把名為tile.png的文件拖到畫(huà)布中央。在同一行復(fù)制三個(gè)tile文件，然后把kickpush-logo.png文件拖出來(lái)放在tile上方。

4. 合并兩個(gè)畫(huà)布并且導(dǎo)出

將”UI視角”的畫(huà)布置于“360”畫(huà)布的中間，注意“UI”的圖層要在“360”之上。導(dǎo)出“360”畫(huà)布的png格式。

5. 用VR設(shè)備測(cè)試效果

把剛剛導(dǎo)出的png拖進(jìn)GoPro VR播放器的窗口，用鼠標(biāo)拖動(dòng)圖像來(lái)預(yù)覽。做到這一步我們就全部完成了！很簡(jiǎn)單吧！如果你電腦上有設(shè)置Oculus Rift，那么GoPro VR播放器會(huì)監(jiān)測(cè)到它，并且允許你用VR設(shè)備來(lái)預(yù)覽圖像。根據(jù)你電腦的配置，你可以在MacOS中處理顯示設(shè)置。

技術(shù)因素

1. 低分辨率

有人說(shuō)VR頭盔的分辨率很差，這不是完全正確的：它相當(dāng)于你手機(jī)的分辨率。只是由于設(shè)備距離你的眼睛有5厘米遠(yuǎn)，顯示器看起來(lái)就不那么清晰了。

為了獲得清晰的VR體驗(yàn)，我們每只眼睛需要顯示8K分辨率，這相當(dāng)于一個(gè)15360×7680像素的顯示器。目前的技術(shù)還做不到，但是相信最終一定會(huì)實(shí)現(xiàn)的。

2. 文本可讀性

受分辨率所限，所有漂亮、清晰的用戶(hù)界面看起來(lái)都是像素化的。這意味著文本將很難閱讀，并且一條直線上的元素會(huì)出現(xiàn)混疊。設(shè)計(jì)過(guò)程中要盡量避免使用大文本塊和過(guò)分細(xì)節(jié)化的UI元素。

收尾工作

1. 流程圖

在移動(dòng)端界面中常用的流程圖，也可以應(yīng)用于VR界面。將“UI視角”界面連接成流程圖，這對(duì)于開(kāi)發(fā)人員理解我們?cè)O(shè)計(jì)的總體架構(gòu)是非常有用的。

2. 動(dòng)效設(shè)計(jì)

制作漂亮的界面是一回事，展示界面如何操作是另一回事。讓我們?cè)僖淮斡枚S視角來(lái)展示。用sketch設(shè)計(jì)好界面后，用AE或principle來(lái)展示動(dòng)效。雖然得到的并不是3D體驗(yàn)，但它可以用來(lái)作為開(kāi)發(fā)團(tuán)隊(duì)的指導(dǎo)方向，并且可以使客戶(hù)在項(xiàng)目早期理解我們的想法。

你可能會(huì)覺(jué)得：“二維動(dòng)效雖然很酷，但是VR會(huì)比這個(gè)復(fù)雜的多?！笔堑?，確實(shí)是這樣。但問(wèn)題是我們能多大程度上將我們當(dāng)前的UI/UX設(shè)計(jì)應(yīng)用在這個(gè)新的媒介上呢？

VR UI設(shè)計(jì)可以走多遠(yuǎn)呢？

1. 虛擬與現(xiàn)實(shí)的距離

一些VR體驗(yàn)嚴(yán)重依賴(lài)于虛擬環(huán)境，這時(shí)傳統(tǒng)的置于頂部的操作界面并不是用戶(hù)使用VR的最佳方式。在這種情況下，我們希望用戶(hù)直接與環(huán)境本身進(jìn)行交互。

想象一下，你正在為一個(gè)高檔旅行社開(kāi)發(fā)一款應(yīng)用。你希望用最生動(dòng)的方式將用戶(hù)引流至各個(gè)潛在的度假目的地。因此，你邀請(qǐng)用戶(hù)戴上頭盔，在你寬敞的辦公室開(kāi)始體驗(yàn)。要從你的辦公室切換到風(fēng)景區(qū)，用戶(hù)需要先選擇他們想去的地方。他們可能會(huì)拿起一本旅游雜志，快速瀏覽，直到被某一頁(yè)面吸引。也可能在你的辦公桌上有一些有趣的東西，選擇不同的東西可以把用戶(hù)帶到不同的地方。

顯然這種操作很酷炫，但也有一些缺點(diǎn)。要達(dá)到完整的效果，需要一個(gè)更先進(jìn)的VR頭盔和手柄。另外，相比以前移動(dòng)端界面已經(jīng)設(shè)置好了可以選擇的選項(xiàng)，這樣的操作需要耗費(fèi)更多的開(kāi)發(fā)資源。

2. 商業(yè)與創(chuàng)新的平衡

事實(shí)上，對(duì)大多數(shù)公司來(lái)說(shuō)，這些身臨其境的體驗(yàn)在商業(yè)上并不可行，除非擁有像Valve和Google那樣幾乎無(wú)限的資源，否則開(kāi)發(fā)出如上文描述的體驗(yàn)對(duì)他們而言太昂貴、太冒險(xiǎn)，也太耗時(shí)。這種體驗(yàn)可以生動(dòng)的表現(xiàn)出你處于媒體和技術(shù)的前沿，但是要想將你的產(chǎn)品市場(chǎng)化卻并不容易。畢竟，可操作性是很重要的。

通常，當(dāng)一種新的形式出現(xiàn)，先行者們（這個(gè)世界的創(chuàng)造者和創(chuàng)新者）會(huì)將它推向極致。隨著時(shí)間推移，經(jīng)過(guò)更深入的學(xué)習(xí)，以及更多資金投入，才會(huì)被用戶(hù)廣泛接受。隨著VR穿戴設(shè)備的普及，更多的企業(yè)會(huì)發(fā)現(xiàn)商機(jī)，將VR融入他們與消費(fèi)者的互動(dòng)之中。

目前來(lái)看，VR應(yīng)用程序使用的界面都很直觀，與人們習(xí)以為常的可穿戴設(shè)備、手機(jī)、平板和電腦等的應(yīng)用程序基本無(wú)異，這使得VR成為大多數(shù)公司可負(fù)擔(dān)和值得投資的項(xiàng)目。

是時(shí)候搭上VR設(shè)計(jì)的火箭了！

希望這篇文章可以使VR看起來(lái)不那么可怕，并激勵(lì)你開(kāi)始自己的VR設(shè)計(jì)。

常言道：獨(dú)行者步疾，結(jié)伴者行遠(yuǎn)，而我們希望與你一起并肩遠(yuǎn)行。在Kickpush，我們認(rèn)為每個(gè)公司最終都會(huì)有自己的VR app，就像如今每個(gè)公司都有自己的移動(dòng)端網(wǎng)站一樣。所以我們制造了這艘關(guān)于VR的“火箭”，希望世界各地的設(shè)計(jì)師可以共同努力，大膽地去探索未知的領(lǐng)域。VR app越早實(shí)現(xiàn)商業(yè)價(jià)值，當(dāng)下的生態(tài)系統(tǒng)就越早進(jìn)化。

作為電子產(chǎn)品的設(shè)計(jì)師，我們的下一個(gè)挑戰(zhàn)是設(shè)計(jì)更加復(fù)雜的應(yīng)用，以及通過(guò)手柄進(jìn)行更多類(lèi)型的輸入。為了解決這些問(wèn)題，我們需要更高效率的原型工具，來(lái)快速輕松地創(chuàng)建及測(cè)試設(shè)計(jì)。我們團(tuán)隊(duì)會(huì)持續(xù)跟進(jìn)類(lèi)似的早期嘗試及新工具的開(kāi)發(fā)進(jìn)展，并且寫(xiě)在后續(xù)文章里。

原文：https://www.smashingmagazine.com/2017/02/getting-started-with-vr-interface-design

作者：Sam Applebee and Alex Deruette

本文由 @田帥通 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

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