2018-8-20 資深UI設計者
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
對于許多設計師來說，虛擬現實（VR）是一個全新且陌生的領域。過去幾年中，我們目睹了虛擬現實硬件和軟件的爆炸式增長。從體驗性上看，虛擬現實既有小而簡單的也有專業復雜的，整體體驗差異很大。作為 UX 或 UI 設計師，初次接觸 VR 可能會有所畏懼，但不要害怕，在本文中，我們將分享一個設計 VR 應用程序的完整過程，我們希望您可以通過這個案例來開始自己的 VR 設計之旅。你不需要成為 VR 的專家；你只需要將你之前的設計技能應用到一個新領域。最終，經過大家的共同努力，我們定可以加速 VR 的發展以發揮它的全部潛力。
一般來說，從設計者的角度來看，VR 應用程序由兩種類型的組件組成：環境和交互元素。
環境：您可以將環境視為您戴上 VR 頭盔時所進入的整個世界 ， 比如你身處的虛擬星系或者駕駛過山車飛馳的樂園。
交互元素：界面上影響用戶交互和操控體驗的元素合集。
根據這兩個組件的復雜性，所有 VR 應用程序都可以沿兩個軸定位。
在左上象限中的 VR 應用有類似模擬器的東西，例如過山車的 VR 應用，這種應用具有完全成形的環境，但根本沒有交互。你只是被鎖在了車里。
在右下角的象限中，應用程序具有一個更好的界面，但比較少或沒有3D環境。三星的 Gear VR 主屏就是一個很好的例子。
設計場所和景觀等虛擬環境需要熟練使用3D建模工具，許多設計師平時無法接觸到這些元素。但是，UX 和 UI 設計人員有很大的機會將他們已有的技能應用于設計虛擬現實的用戶界面。
我們所做的第一個完整 VR 的 UI 設計是 The Economist 的應用程序，與 VR 制作工作室 Visualize 合作。我們做設計，Visualize 創建內容并開發應用程序。
我們在之后文章中將此應用作為一個工作示例，現在我們將介紹設計 VR 應用程序的方法，然后再介紹設計 VR 界面的細節。您可以從 Oculus 網站下載Gear VR 的 Economist 應用程序。
盡管大多數設計師已經熟悉了設計移動應用程序的工作流程，但還不太清楚設計 VR 界面的流程。當面對第一個VR應用程序設計項目時，我們首先要做的是合乎邏輯。
傳統工作流程到全新領域
當我們第一次使用三星的 Gear VR 時，我們注意到它與傳統移動應用有很多相似之處。VR 應用程序與傳統應用程序有著相同的工作流程：幫助用戶與界面進行交互。
現在請記住。鑒于與傳統應用的相似性，設計師花費數年時間改進的久經考驗的移動應用工作流程不會浪費，這些流程仍然可用于制作 VR UI。這讓你比你想象的更接近 VR！
在如何設計 VR 界面之前，讓我們回過頭來看看傳統移動應用的設計過程。
1. 線框
首先，我們將進行快速迭代，定義交互和總體布局。
2. 視覺設計
在此階段，功能和交互已經完成。我們把視覺規范與設計應用于線框圖，并制作出漂亮的界面。
3. 設計文檔
在這里，我們將屏幕組織成流程，繪制屏幕之間的鏈接并描述每個屏幕的交互。我們將此稱為應用程序的設計文檔，它將被用作開發人員的主要參考。
現在，我們如何將此工作流程應用于虛擬現實的設計當中呢？
1. 畫布的尺寸
最簡單的問題可能也是最具挑戰性的。面對360度的畫布，人們可能很難知道從哪里開始。事實證明，UX 和 UI 設計者只需要關注整個空間的某個部分即可。
我們花了幾周時間試圖弄清楚什么樣的畫布尺寸適用于 VR 設計。當您使用移動應用程序時，畫布大小取決于設備的大小：iPhone 6為1334×750像素，Android大約1280×720像素。
要將移動應用程序工作流應用于 VR UI，首先必須確定合適的畫布大小。
以下是扁平化時360度環境的樣子。這種視圖叫做等角矩形投影。在3D虛擬環境中，這些投影圍繞球體纏繞，以模仿現實世界。
整個投影的水平寬度是360度，垂直180度。我們可以用它來定義畫布的像素大小：3600×1800。
使用這么大的尺寸可能是一個挑戰。但因為我們主要對 VR 應用程序的界面設計感興趣，所以我們可以專注于這個畫布的一部分。
基于邁克·阿爾格（Mike Alger）對舒適觀察區域的早期研究，我們可以找出一個合適的部分來展示界面。
感興趣的區域占360度環境的九分之一。它位于圖像的中心，大小為1200×600像素。
讓我們總結一下：
「 360度視圖 」：3600×1800像素
「 UI視圖 」：1200×600像素
「UI視圖」畫布有助于將我們的注意力集中在我們正在制作的界面上，并使設計流程變得更加容易。
同時也必須使用「360度視圖」在 VR 環境中的預覽界面。此外為了獲得真實的比例感，使用 VR 頭盔測試界面也是必要的。
△ 使用Avocode，您可以輕松直觀地比較設計
在開始之前，我們需要以下工具：
1. sketch
我們將使用 Sketch 來設計我們的界面和用戶流程。如果您沒有，可以下載試用版。Sketch 是我們首選的界面設計軟件，但如果您使用 Photoshop 或其他任何軟件更舒服，也沒問題。
2. GoPro VR Player
GoPro VR Player 是一款360度內容查看器。它由 GoPro 提供，是免費的。我們將使用它來預覽我們的設計。
3. Oculus Rift
Oculus Rift 連接到 GoPro VR 播放器，這將使我們能夠測試我們的設計。
在本節中，我們將介紹如何設計 VR 界面。我們將一起設計一個簡單的界面，最多花費5分鐘時間。
下載源文件：https://pan.baidu.com/s/1WUUwNLlTJkG82Hxdofaqzg 密碼：09vt，其中包含預設的 UI 元素和背景圖像。如果你想使用自己的設計文件，那也是可以的。
1. 設置「360度視圖」
首先要做的事情，讓我們創建360度視圖的畫布。在 Sketch 中打開一個新文檔，并創建一個畫板：3600×1800像素。
導入文件 background.jpg，并將其放在畫布的中間。如果您使用自己的背景文件，請確保其比例為2：1，并將其大小調整為3600×1800像素。
2. 設置畫板
如上所述，「UI view」是「360 view」的裁剪版本，我們僅關注 VR 界面。
我們創建一個新畫板：1200×600像素。然后，復制畫板到「360 view」中，并將其放在畫板的中間。不要刪除「360 view」畫板，我們同時保留著兩個畫板，以后會用到它們。
3. 設計界面
我們將在「UI View」畫布上設計我們的界面。我們會盡量簡單一些，首先在視圖上添加一些圖塊。您可以使用 tile.png 文件將其拖到 UI 視圖的中間。
復制它，并創建一行三個圖塊。
使用 kickpush-logo.png 文件，并將其放在圖塊上方。
4. 合并畫板
現在來看看有趣的東西。確保「UI view」畫板位于左側圖層列表的「360view」畫板上方。
將「UI view」畫板拖動到「360 view」畫板的中間。將「360 View」畫板導出為 PNG；「UI view」將位于其上方。
5. 在VR中測試它
打開 GoPro VR Player，并將剛剛導出的「360 View」PNG 拖到窗口中。使用鼠標拖動圖像以預覽360度環境。
我們完成了！是不是很簡單？
如果您的機器上安裝了 Oculus Rift，則 GoPro VR 播放器應該可以檢測到它并允許您使用 VR 設備預覽圖像。根據您的配置，您可能需要在 MacOS 中做一些顯示設置。
1. 低分辨率
VR 頭盔的分辨率非常糟糕？這不完全正確，其實它相當于手機的分辨率。但是，考慮到設備距離您的眼睛5厘米，顯示器看起來并不清晰。
為了獲得清晰的 VR 體驗，我們需要一個8K的顯示屏，這是一個15,360×7680像素的顯示屏。相信這種設備早晚會普及。
2. 文本可讀性
由于顯示器的分辨率較低，會導致所有精美的 UI 元素都會看起來像素化。這意味著，首先，文字難以閱讀，其次，直線部分會出現鋸齒。所以盡量避免使用大段文字和特別復雜的 UI 元素。
1. 設計文檔
還記得我們的移動應用中的流程圖嗎？我們現在將這種做法也應用到 VR 界面。用我們已經做好的界面組織成一個易于理解的流程圖，這非常有益于開發人員理解我們設計的應用程序的整體架構。
2. 動效設計
設計一個漂亮的 UI 是一回事，但讓他動起來又是另外一回事了。我們決定以二維視角來處理它。
基于我們的 Sketch 文件，我們使用 Adobe After Effects 和 Principle 為界面設計動畫。雖然輸出的不是真實的3D體驗，但它足以指導開發團隊了，且能幫助我們的協作者在流程的早期階段了解我們的愿景。
△ 你剛剛設計了第一個 VR UI。真棒！
我們知道你在想什么，「這很酷，但真實的 VR 應用程序會復雜的多。」是的，當然是。但重點在于我們可以在多大程度上將我們當前的 UX 和 UI 的經驗應用于這種新媒介？
1. 新的交互體驗
一些 VR 體驗非常依賴虛擬環境，然而傳統界面的確已經不是用戶控制應用程序的最佳方式了。在這種情況下，您可能希望用戶直接與環境本身進行交互。
想象一下，你正在為一家豪華旅行社制作應用程序。您希望以最生動的方式將用戶轉移到潛在的度假目的地。因此，您邀請用戶佩戴耳機并在時髦的切爾西辦公室開始體驗。
要從辦公室轉移至目的地，用戶需要選擇他們想去的地方。他們可以拿起一本旅行雜志，輕輕松松瀏覽它們，直到它們被某一頁吸引。或者，桌面上可能會有一系列有趣的物品，根據用戶選擇的不同，將用戶帶到不同的位置。
這確實很酷，但也有一些缺點。為了達到完美的效果，你需要一個更先進的帶手持控制器的 VR 頭盔。不過，像這樣的應用程序要比傳統的應用程序花費更多的精力來開發。
2. 革命萬歲
現實情況是，對于大多數公司而言，這些沉浸式的體驗在商業上還不可行。除非您擁有幾乎無限的資源，例如 Valve 和 Google，否則創建類似于上述體驗的產品可能成本太高，風險太大且過于耗時。
這種體驗非常出色，可以帶你到媒體和技術的最前沿，但通過新媒體將產品推向市場并不太好。
通常，當一種新形式出現時，它會是一個小眾產品。隨著時間的推移，成本的下降，有足夠的人去學習和市場的資本注入，它就會成為應用廣泛的產品。
隨著 VR 頭盔變得越來越普及，將會有越來越多的公司將 VR 融入他們與用戶的互動當中。
從我們的角度看，相比于手機、平板，VR 用戶界面本質上是更直觀的，并且更接近用戶，隨著科技和市場的發展，VR 將會帶來更大的價值。
藍藍設計( axecq.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。