如何開始VR界面設計？|平面設計|原創/自譯教程|DATS設計翻譯組

對許多設計師而言，虛擬王國還是未知的領土。在過去幾年裡，我們見證了 VR 硬體與軟體的百花齊放。從日常的運用到讓人驚嘆的創作，VR給人們帶來了多樣化的體驗，蘊含著多樣的複雜性和實用性。

作為 UI 或 UX 設計師，向 VR世界邁出第一步可能讓你心生膽怯。我們深知這點，因為我們也曾經歷過這個階段。但是別害怕！在這篇文章里，我們將分享 VR 應用的設計過程。希望你可以由此開始，邁出獨立設計 VR 的第一步。

你不需要成為 VR 領域的專家——你只需在這個新的領域盡情將你的才能施展。通過團隊協作，我們最終能更快發揮出 VR 的無限潛能。

「在 VR 界面設計中，UI/UX 設計師擁有著巨大機會去施展他們的才能。」

VR app 的類型

一般來說，從設計師的角度來看，VR app有2個組成部分：環境和界面。

你戴上一個VR設備，想像你要進入的那個世界的環境——那是你置身其中的虛擬星球，或者你在一輛過山車上看到的場景。

界面是用戶為瀏覽環境和控制體驗而進行交互的元素集合。所有VR app可以根據這2個組成部分的複雜性定位2個抽線。

在左上象限像模擬裝置，如過山車的體驗。它有一個完全形成的環境，但沒有界面。你只是被鎖在車裡。

在相反象限的APP有設計界面，但是沒有或很少有環境體驗。三星Gear VR的首頁就是是一個很好的例子。

設計虛擬環境（如地點和風景） 需要熟練使用三維建模工具，許多設計師無法達到這些高度。然而，UX和UI設計師卻可以用他們的技能來為虛擬現實設計用戶界面，對於他們來說是一個很好的機會。

我們做的第一個完整的VR UI設計是為《經濟學》雜誌設計APP，與VR生產工作室Visualise合作的。我們做了設計，而Visualise創造內容並開發APP。

在下一小節中, 我們將用此作為一個項目示例。在進入VR界面細節設計之前，我們將制定出一種設計VR APP的方法。你可以從Oculus網站下載並安裝（點擊此處）這個支持Gear VR的《經濟學》APP。

VR UI設計的過程

雖然大多數的設計師已經有了一套他們設計移動應用的工作流程，但是設計VR 交互界面的流程並不明確。當第一個VR應用設計項目找上門的時候，對我們來說，邏輯上的第一步應該是設計一個流程。

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

當我們初次把玩三星的Gear VR時，我們會發現它和傳統移動應用的相似之處。基於界面的VR應用的運行和傳統應用遵循一樣的基本動態特性：用戶和界面產生交互，來幫助他們訪問頁面。我們先簡單說到這裡，但是請將這些內容牢記於心。

鑒於和傳統應用的相似性，經過設計人員數年優化和實踐檢驗的移動應用工作流程不會白費，它可以在設計VR交互界面時派上用場。你比你想像中更加接近於VR app設計師！

在描述怎麼設計VR交互界面之前，讓我們先回顧一下設計傳統移動應用的整個流程。

1.線框圖

首先，我們將進行快速迭代，規划出互動流程與總體版式。

2.視覺設計

在這個階段，我們已確認了設計相關的具體功能與互動流程。 開始將品牌規範應用於線框圖，並且製作出一個漂亮的界面。

3. 藍圖設計（blueprint）

在這裡，我們將單個屏幕設計藍圖組合進動態圖中，繪製單屏之間的鏈接，並描述每個屏幕的交互方式。 我們稱此為應用程序的設計藍圖，它將被項目開發人員視為製作的主要參考。

現在，我們如何將這種工作流應用到虛擬現實？

啟動程序

畫布大小

最簡單的問題可能是最具挑戰性的。面對一個360度的畫布，我們很難知道從哪裡開始。原來，UI和UX設計師只需要關注總空間的某個部分。

我們花了幾個星期試圖弄清楚畫布大小對VR會產生什麼影響。當你設計一個移動APP時，畫布的大小是由設備的大小決定的：iPhone 6大約1334×750像素，Android大約1280×720像素。

把這種手機app工作流應用到vr界面設計，你首先需要找到一個合理的畫布大小。

「設計師們歷經數年不斷總結優化的移動應用工作流程可以應用在VR交互設計上。」

下圖是將360度全景圖展平後的樣子。這被稱為球面投影。在3D虛擬環境下，這些投影圖像被捲曲成球體來模擬現實世界。

投影的全尺寸是水平360度、垂直180度。因此我們可以將畫布尺寸確定為：3600x1800 px.

如此巨幅的畫布，干起活來可有些挑戰。但我們主要感興趣的是VR應用的界面，因此將注意力集中在畫布的一部分就好了。

根據Mike Alger關於視覺舒適區的早期研究的基礎上，我們可以劃分出一塊區域來合理展示界面。

這片區域佔全景畫布的1/9，位於球面正中央，尺寸為：1200x600 px。

總結下：

360度全景畫布：3600x1800 px

交互界面尺寸：1200x600 px

測試

在單屏上使用兩個畫布的目的是為了測試。「UI View」畫布有助我們專註在製作的界面上，並且更便於設計流程。

同時，「360 View」用在VR環境中預覽界面。為保持比例真實，使用VR頭盔進行界面測試是必要的。

如圖：

工具

在我們開始演練之前，這些是我們需要的工具：

Sketch 。我們使用Sketch來設計界面和流程，沒有的話，趕緊下載一個試用版，這是我們最推薦的界面設計軟體。

GoPro VR Player。GoPro VR Player 是一個360°全景播放器，它由GoPro提供，且免費。我們用它來預覽和在特殊環境中測試我們的設計。

Oculus Rift。將Oculus Rift和GoPro VR Player 配合使用，能夠讓我們在真實的VR環境中進行設計測試。

VR界面設計流程

在這個環節中，我們將通過一個簡單的教程學習如何設計一個VR界面。我們會一起設計一個簡單的界面，不會花費超過5分鐘。

如圖：

點擊下載【壓縮包（ZIP文件）】，其中包含UI元素和背景圖像。如果想使用你自己的設計，也沒問題。

1.創建360度視圖

現在最重要的是，我們先創建一個可以360度視角的視圖，在Sketch軟體中打開一個新的文件，並創建一個尺寸為3600*1800像素的畫板。

導入文件名為background.jpg的背景圖，並把它放置於畫板中間。如果您使用的是自己的圖片素材背景，確保它的長寬比例為2：1，並調整尺寸大小為3600*1800像素。

2. 創建畫板

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

在前一個畫板創建一個新的畫板：1200×600像素。然後，複製我們為「360視圖」增加的背景圖，放在我們新創建的畫板中心。不要調整大小！我們想保留一個裁剪版本的背景。

3.界面設計

我們將在「UI視圖」畫布上設計界面。為了簡單化這個練習，我們在界面是添加一排方塊。如果你偷懶，把資源包里文件命名為tile.png找出並將其拖到UI視圖的中間。

複製，並創建一排3個方塊。

從資源包中找出kickpush-logo.png，並把它放在最上面。

看起來不錯，嗯？

4. 合併畫板和輸出

現在來點有趣的，將 「UI View」畫板放在左邊的「360 View」畫板之上。

拖動「UI View」畫板在「360 View」畫板的中間，將「360 View」畫板作為PNG輸出，「UI View」就會在它的最頂部。

5. 在VR裡面測試

打開 GoPro VR 播放器，拖拽「360 View」的PNG到你剛剛打開的窗口，用滑鼠拖動圖像預覽360°全景。

大功告成！現在覺得一點都不難了，對吧？

如果將Oculus Rift連接到你的機器上，那GoPro VR 播放器應該會檢測到它並允許你用VR設備來預覽圖像。根據電腦配置的不同，你可能需要在Mac系統裡面調整一下顯示設置。

技術考慮

低解析度

VR頭戴設備的解析度非常差。 事實上這句話也不完全對：解析度取決於你手機的解析度。不過，考慮到該設備距離您的眼睛只有5厘米，顯示屏會看起來不太清晰。

為了獲得清晰的VR體驗，單眼需要8K顯示。就是15,360×7680像素顯示。雖然目前差距比較大，不過總會實現滴。

文本可讀性

由於顯示器的解析度，所有精美的UI元素將看起來像素化。這意味著，首先，這個文本將難以閱讀，其次，直線會出現高水平的混疊。盡量避免使用大文本塊和細節繁多的UI元素。

收尾工作

補充：（Blueprint是一款將三維的圖片碎片拼湊成完整圖片的3D拼圖遊戲，含有建築、武器、玩具、生活工具和電子產品等各類圖片，操作簡單，只需用手指點擊旋轉移動圖片即可，每一個關卡都有符合其風格的音樂，增加了玩家的遊戲體驗。來源百度百科）

藍圖設計 blueprint

還記得 blueprint 在我們手機移動端的設計過程嗎，我們也將這種手法用於VR交互。打開UI views，我們將流程映射，組成一個可以理解的blueprint，讓開發者更好地理解我們設計的應用程序的整體架構。

運動設計

設計一個界面精美的UI是一回事，但展示其在不同的情景下的變化又是另一回事。我們決定再次用二維試圖來解決這個問題。

運行Sketch設計軟體，用AE和Principle模擬變化。雖然結果並非3D的體驗，但它可以作為開發團隊的參考，以及幫助客戶在早期階段了解我們的想法和意願。

你可能會想，儘管「還不錯，但是VR應用遠不止這麼簡單吶。」是的，確實如此。而問題是，我們能夠多大程度將我們當前的UI和UX的實踐應用到新的媒體上？

如圖：

VR界面能走多遠？

個性交互

一些虛擬現實的體驗很大程度上依賴於虛擬環境，因此一個傳統的界面可能不是用戶控制app的最佳的方式。在這種情況下，您可能希望用戶直接與環境本身進行交互。

想像一下你正在為一個豪華旅行社製作一個app。你想用最生動的方式用以將用戶送到潛在的度假勝地。所以，你邀請用戶戴上頭戴設備，開始在你豪華的切爾西辦公里體驗。

要從辦公室到一些遙遠的地方，用戶需要選擇他們想去的地方。他們可以拿起一本旅行雜誌，翻閱它，直到翻到一個吸引人的頁面。或者可能有一些有趣的物體在您的桌面上，吸引用戶到不同的地方取決於他們拿起什麼東西。

這肯定很酷，但也有一些缺點。為了得到充分的效果，你需要一個更先進的VR頭戴設備與手持控制器。此外，像這樣的app比有序組織的傳統界面的app的開發難度要大得多。

革命萬歲！

現實是，這些身臨其境的經驗對於大多數公司而言不是商業上可行的。除非你有無限的資源，如Valve和谷Google，創造上述的這一種體驗成本太高，風險太大，太費時。

這種體驗可以完美炫耀你站在媒介和技術的前沿，但讓你的產品通過一個新的媒介進入市場並不那麼美好。易用性很重要。

通常情況下，當一個新的形式出現，它被早期採用者推崇到極限：創造者和創新者的世界。隨著時間的推移，當有足夠的學習和投資，它將被更廣泛的潛在用戶訪問。

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

從我們的角度來看，UI界面直觀的VR app——UI界面已經接近人們習慣的與服飾、手機、平板電腦和電腦等的交互——能讓VR更普及，更值得大多數企業進行投資。

是時候上車了

我們希望通過這篇文章讓大家了解到VR並沒有那麼可怕，並且鼓勵大家開始投身為VR做設計。

人們常說，一個人走得更快，但你想走得更遠，就需要和團隊前行。我們的選擇是後者。在Kickpush，我們相信每家公司都將會開發VR應用程序。就像每家公司都有自己的移動網站一樣。（或者說都該有一個吧—都2017年了，天哪！）

所以，我們其實正在集合全球設計師的努力，共同建造一艘宇宙飛船，大膽地探索更多可能性。一旦企業覺得VR應用程序對他們有利，整個行業的生態都將蓬勃發展。

作為數碼產品設計師，我們未來的挑戰是更複雜的應用程序和通過控制器處理其他類型的輸入。要著手解決這個問題，我們需要強大的原型設計工具讓我們能夠更快更簡單地創建和測試設計。我們將會撰寫一篇後續文章，介紹一些比較前沿的做法，以及在開發中的一些新工具。

保持關注！

這篇文章最初由Smashing Magazine發行。

作者：達爾文，菲洛琪，火魚Zero，lynn_dash，某蹦躂，Ruminate，幸若仁，Kentoness，juey，lemon，白色瓷盤

校對：Connie，Zoey

————————————————————————————————————————————————

我們是DATS翻譯小組，我們愛設計愛英語，通過翻譯設計的文章共同學習進步，雖然我們還有許多不足，但是只要把每個人的微小的力量聚集起來，總有一天會發出耀眼的光芒~ 歡迎到主頁關注我們。