VR界面設計：將傳統設計方法論應用到VR設計中去

實踐指導性的內容對於剛開始了解的人來說很有幫助，作者想要將傳統的UI或UX的設計流程和方法論應用到VR設計這個觀點值得關注，同時作者也發表了一些對於以後的VR從業者、公司和未來領域的發展觀點。

虛擬領域對於許多設計師而言是一個未知領域。在過去的幾年裡，我們見證了VR（虛擬現實，virtual reality）硬體和應用的繁榮。VR體驗從平凡變得令人驚奇，體驗的複雜度和效用都產生了巨大的變化。

對於一個UI或者UX設計師，踏入VR的第一步是令人怯步的。我們知道，因為我們也經歷過這個階段。但是不要害怕！在這篇文章里，我們將分享一個設計VR apps的過程，希望你們能通過這個開始你們自己的VR設計之路。你無需成為VR領域中的專家，你只需要願意將你的技能運用到一個全新的領域。最終當所有群體都一同為之努力時，我們將加速VR的發展，更快的發揮出它所有的潛能。

（這裡是一部分延展閱讀的文章鏈接，懶得翻譯啦。）

有哪些類型的VR Apps

從一個設計師的角度而言，VR app是主要有兩種類型的元素構成：環境（envionments）和界面（interfaces）。

你可以把環境想象成當你帶上VR裝置時進入的世界——可能是你發現自己正處於的某個虛擬星球，或者也可能是當你乘坐過山車時的某個視角。

界面則是一套元素，能讓用戶與之交互駕馭特定的環境或者操控他們的體驗。所有的VR apps都可以根據這兩個因素的複雜程度，沿著兩個軸安置。

在左上方的象限里是一些類似模擬器的產品，好比上面提到的過山車體驗。它們擁有完全成形的環境，但是完全沒有界面。你可以簡單的封鎖在裡面尋開心。

在相反的象限里是形成了界面但是只有一點甚至沒有的環境。三星Gear VR 主頁屏幕就是一個很好的例子。

設計類似的場所和風景畫的環境需要熟練掌握3D建模工具，這些元素對許多設計師來說有些鞭長莫及。

然而，對ux或者ui設計師有一些絕佳的機會去應用它們的專業技能去為了VR（或者簡單的說就是VR UIs）設計用戶界面。

我們做的第一個完整VR UI設計就是為了經濟學人（The Economist）設計了一個app，同VR產品工作室Visualise合作建立的。我們完成了設計的部分，而Visualise工作室創造了具體內容並開發了這個app。

在進入為VR設計界面的本質前，我們在下一個部分將會使用這個作為一個工作案例，展示一種設計VR apps的方法。

你可以從Oculus網站下載經濟學人app（for Gear VR）。

VR UI設計的過程

當大部分的設計師們在思考它們設計移動端apps的工作流程的時，設計VR界面的過程仍有待定義。所以當第一個VR app設計項目敲門時，我們邏輯上的第一個步驟是設計過程。

將傳統的工作流程應用到新的領域

當我們第一次試玩三星Gear VR時，我們留意到了與傳統的移動端apps的相似之處。VR apps產品界面決定於和傳統apps一樣的基本變化：用戶同界面發生交互，幫助用戶瀏覽頁面。我們在這裡先簡要提一下，但是請先將這個觀點保存在你的腦海里。

鑒於和傳統apps的相似性，設計師們花費了數十年提煉的，通過長期廣泛的應用而被證明有效的移動端app工作流程是不會被浪費的，而且可以運用來設計VR UIs。你遠比你想象中的更加接近VR apps設計。

在描述如何設計VR界面前，讓我們先後退一步，並瀏覽一次傳統移動端app的設計流程。

1.線框圖（WIREFRAMES）

首先，我們通過快速迭代，定義交互和基本布局。

2.視覺設計（VISUAL DESIGN）

在這個階段，能夠使用一些特徵和互動。品牌準則被運用在線框圖，一個美觀的界面成功建立。

3.藍圖（BLUEPRINT）

在這裡，我們將所有界面組織成為流程圖，畫出界面之間的聯繫並且描述每一個界面的交互細節。我們可以稱這個為app的藍圖，它將為項目工作的開發者的重要參考。

現在，我們要如何將這個工作流程運用到VR呢？

準備

畫布大小

最簡單的問題可以是最有挑戰的。面對著360度的畫布，設計師可能會發現從哪裡開始是一件非常困難的事情。原來ux和ui設計師只需要專註在所有空間里的一個確定的部分。

我們花費了數十周試圖去思考什麼樣的畫布大小對VR而言是能講得通的。當你為一個移動app工作時，畫布大小是由於設備大小決定的，iPhone6使用1334 x 750 pixels的畫布大小，而安卓大致上使用1280 x 720 pixels的畫布大小。

為了將移動端app工作流程應用到VR UIs，首先你需要去思考多大的畫布大小是有意義的。

下面是一個360度的環境平面狀態看起來的樣子。這種表現被叫做等距柱狀投影圖（Equirectangular Projection）。在3D虛擬環境中，這些投影圖被包裹成一個球體來描述真實世界。

投影的全部寬度水平為360度，垂直水平為180度。我們可以通過這個定義畫布的像素大小：3600 x 1800 pixels。

在一個如此巨大的尺寸上工作可以說是一個挑戰。但是因為我們首要會對VR apps的界面面貌感興趣，我們可以把精力專註在畫布中的某個細節上。

在Mike Alger對舒適的觀賞區早期研究的基礎上，我們可以分離出讓界面有意思的部分。

感興趣的區域位於360度環境的九分之一。它的位置就在等量的圖像的中心，是1200×600像素大小。

讓我們總結一下：

「360視圖「: 3600 × 1800 pixels

「UI視圖「: 1200 × 600 pixels

測試

使用兩個畫布一個屏幕的原因就是測試。「UI視圖」畫布可以幫助我們專註於我們正在製作的界面，並且使設計流程更加容易。

然而，「360視圖」用於在虛擬現實環境中預覽界面。要想獲得真正的比例感，通過VR設置測試介面是必不可少的。

使用Avocode，可以直觀地比較設計的修改。

工具

在我們開始演練之前，這裡有一些我們需要的工具：（每個工具的詳細介紹就不在這裡翻譯了。）

• sketch
• GoPro VR Player
• Oculus Rift

VR界面的設計流程

在本節中，我們通過運行一個關於如何設計一個VR界面的簡短教程。我們將一起設計一個簡單的界面，這最多只需要五分鐘的時間。

預設包，其中包含預先設置好大小的UI元素和背景圖像。如果你想使用你自己的設置，那就試試吧，這不會是個問題的。

1.建立「360視圖」

先做重要的事。創建一個360度視圖的畫布。在sketch中打開一個新的文檔，創建artboard（大小為3600 x 1800 pixels）。

導入名為background.jpg的文件，將它放置在畫布的中心。如果你使用自己的等量背景圖，確保背景圖的比例是2:1，並調整其大小為3600×1800 pixels。

2.建立Artboard

如上所述，「UI視圖」是一個裁剪版本的「360視圖」，只專註於虛擬現實界面。

緊隨前一個創建一個新的Artboard：1200×600像素。然後，複製我們剛加入到「360視圖」的背景圖，並且放置在新的畫板中心。不要調整大小！我們在這裡需要一個背景圖的裁剪版本。

3.設計界面

我們將在「UI視圖」畫布上設計界面。考慮到這個練習，我們將事情簡單化，並添加一排titles。如果你想要偷懶，只需要從預設文件包里把名為tile.png的文件拖到UI視圖的中間。

複製它，並在一行上排列3個title。

將kickpush-logo.png從預設包里拖拉放置到title上合適的位置。

看起來不錯，對嗎？

4.合併Artboards並輸出

現在有趣的工作來了。確保「UI視圖」的Artboard在「360視圖」的Artboard左邊的圖層列表。

將「UI視圖」的Artboard拖到「360視圖」的Artboard的中間。將「360視圖」的Artboard作為PNG輸出，「UI視圖」將會在「360視圖」的上面。

5.在VR中測試

打開GoPro VR Player將你剛才輸出的「360視圖」的PNG文件拖到窗口中。通過滑鼠去拖拉圖像以預覽360度環境。

這就完成了，比你想象中一定程度的更簡單，對嗎？

如果你擁有設置好Oculus Rift（一款為電子遊戲設計的頭戴式顯示器）的機器，然後GoPro VR Player應該能檢測並且讓你能夠使用VR設備去預覽圖像。根據你的配置，你可以用過MacOS系統設置的顯示器隨便「胡鬧玩弄」了。

技術層面的考慮

低解析度

VR頭盔的解析度相當差。嗯，這並不完全正確：它和你手機的解析度差不多。然而，考慮到這個設備離你的眼睛只有5厘米，這個顯示器看起來沒有那麼差。

如果要得到一個清晰的虛擬現實體驗，我們每隻眼睛需要一個8K的顯示器。這會是一個15360×7680 pixel的顯示器。我們目前離這個目標還很遠，但我們終究會實現。

文本的可讀性

因為顯示器的解析度，所有你製作的精美「脆弱」UI元素將會看起來更像素化。這意味著，首先，文本將難以閱讀，其次，將會在直線出現高水平的混疊。請盡量試圖避免使用大塊文本和高精細的UI元素。

最後的修正

藍圖

還記得我們移動應用程序設計過程中的藍圖嗎？我們已經將這種做法應用到VR界面。使用UI視圖，我們把流程映射和組織成為一個可理解的藍圖，對於開發者去了解我們設計的app的整體架構是理想的。

動作設計（MOTION DESIGN）

設計一個美麗的UI是一件事，但是展示如何使它富有生機活力就是另一件事了。曾經有一次，我們決定用一種二維透視的方法去著手處理。

使用Sketch設計，我們通過Adobe After Effects賦予界面生命。雖然結果不是一個3D的經驗，但是被用來作為發展團隊的指導方針，並幫助我們的客戶了解我們在這個過程早期階段的願景。

你剛剛設計了第一個虛擬現實界面。檢查一下！為戰利品開心吧。

我們知道你在想什麼，雖然你可能覺得「這很酷，但VR app遠遠比這個更加複雜」。但問題是，我們可以將我們目前UI和UX的實踐應用到這種新的媒體到什麼程度？

VR UIs能走多遠？

INTER-YOUR-FACES

一些VR經驗很大程度上依賴於虛擬環境，以至於對用戶而言，安置一個傳統方式的界面可能不是最佳的控制app的方式。在這種情況下，您可能希望用戶直接與環境本身進行交互。

想象一下你正在為一個豪華旅行社製作一個app。你想儘可能的用最生動的方式把潛在的度假勝地傳送給用戶。所以你邀請用戶戴上頭盔，並且開始在你的時髦的切爾西辦公室進行體驗。

想要要從辦公室過渡到一些遙遠的地方，用戶需要選擇他們想去的地方。他們可以拿起一本旅行雜誌，翻閱它，直到他們登上某個吸引人的頁面。或者可能在桌子上集合了很多有趣的對象，取決於用戶挑選哪一個對象，將用戶吸引到不同的地方。

這肯定很酷，但也會有一些缺點。為了得到充分的效果，你需要一個更先進的擁有手持控制器的VR頭盔。此外，對比在傳統app界面里一系列被很好展示了的選擇，像這樣的app需要相當多的努力去開發。

革命萬歲

現實是這些身臨其境的體驗對於大多數公司在商業上是不可行的。除非你擁有大量幾乎沒有限制的資源，比如Valve和Google，創造一個像上面描述的體驗可能會太昂貴，太冒險而且太費時。

這種體驗對炫耀在媒體或者技術的前沿是聰明的，但是想要通過這個新的媒介帶領你的產品進入市場就不是那麼明智了。可訪問使用的能力才是重點。

通常情況下，當一個新的格式出現的時候，它會被早期使用者（世界上的創造者和創新者）推到極限。隨著時間的推移，同時伴隨足夠的學習和投資，它逐漸變得能更廣泛被潛在用戶使用。

隨著VR頭盔變得越來越普遍，公司們將開始尋找機會整合VR融入到他們與客戶接觸的方式中。

從我們的角度來看，具備直觀UIs的VR apps意味著，UIs更接近人們已習慣於用他們的服飾、手機、平板電腦和電腦，對於大多數公司這會讓VR成為一個可承受並且值得的投資，並追求這個投資。

是時候上船（開始VR設計）了

我們希望我們通過這篇文章已經使VR空間有點不太可怕了，並且希望能啟發你開始設計自己的VR項目。

有人說，如果你想快速旅行，那麼獨自去。但如果你想旅行得更遠，那麼就和同伴一起出發。而我們想遠行。在Kickpush，我們認為每個公司總有一天會有一個虛擬現實的應用程序，就像現在每個公司都有一個移動網站（或者是應該有，天知道這都是2017了）。

所以，我們正在建設一個飛船，通過世界各地的設計師們共同努力，大膽的進入一個之前沒有設計師到達過的領域。越早為公司有意義的實現VR apps，整個生態系統就會越快繁榮。

數字產品的設計師下一個挑戰是更複雜的應用和處理其他通過控制器輸入的數據類型。要著手解決這個問題，我們需要強大的原型工具，能夠讓我們快速和輕鬆的創建和測試設計。我們將寫一篇後續文章，關注一些早期嘗試這樣做，和一些正在開發中的新工具。

譯者：xElaine

本文由 @xElaine 授權發佈於人人都是產品經理，未經作者許可，禁止轉載。

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