對于很多設計者而言虛擬場景都是一個陌生領域，在過去 的幾年里，我們見證了虛擬現實（VR）設備和應用的爆炸性發展。VR經歷了從平凡到驚艷的過程。
VR App有哪些類型？
在設計者角度，VR應用由兩種類型組件構成：場景（environment） 和 交互（interface）
你可以把場景定義為帶上VR頭套時看到的世界——你所在的星球、你乘坐過山車所見景象。
界面是一系列與用戶交互的元素，用于瀏覽場景和控制體驗。所有的app都可以通過上述兩個坐標進行定位。
處于第二象限的app更像模擬器，比如過上車體驗。有完整的場景卻完全沒有交互。你像被完全固定在座位上。
相反的，在第四象限的app有成熟的交互但基本沒有場景。三星Gear VR電視機就是一個很好的例子。
設計虛擬場景如場地和風景需要精通大多設計師都不太了解的3D模型工具。然而，這是一個巨大的機會，對于UX和UI設計師將他們的交互設計技能應用到虛擬現實（簡稱VR）上。
我們做的第一個完整的VR UI設計是經濟學者app，和虛擬現實工作室Visualise合作開發。我們負責設計，Visualise負責開發完成app。
我們將以此作為工程實例貫穿接下來的部分，這部分我們將進一步了解VR app的設計方法，在交互設計本質之前。你可以從Oculus網站上下載 Economist app for Gear VR
VR UI設計過程
很多設計者早已明白設計移動應用的工作流程，但是VR交互設計的流程還沒被定義。當第一個VR app設計項目到來時，順理成章的第一步是設計一個流程。
傳統工作流，新領域
當我們第一次玩三星Gear VR時，發現和傳統移動應用的相似之處。基于交互的VR應用和傳統app一樣根據基本動力學：用戶和接口交互，幫助他們瀏覽頁面。我們在這兒簡單提及，只要記住這一點就行。
根據傳統app的相似點，經過數年實踐檢驗的 移動應用工作流不會被浪費，同樣可以被應用到VR UI行業。你離你所想象的VR app更近。
在介紹怎么設計VR交互前，我們先回顧瀏覽下傳統移動應用設計流程。
1.線框圖
首先，我們將通過快速迭代，定義交互和總體布局。
2.視覺設計
在這個階段，功能和交互已經形成。現在的要做的是將品牌準備應用到線框圖中，設計一個漂亮的界面。
3.設計圖
在此，我們將組織屏幕流，繪制屏幕之間的鏈接和描述為每個屏幕的交互。我們稱之為應用的設計圖,它將作為項目的主要開發人員參考。
那么，我們怎么將這種工作流應用到虛擬現實呢？
設置
畫布尺寸
最簡單的問題也可能是最具挑戰性的。面對一個360度的畫布，我們發現很難找到從哪兒開始著手。原來UX和UI設計師只需要專注于整個空間中的某個部分。
我們耗費了數周試圖弄清什么樣的畫布尺寸對VR來說有意義。當你從事于移動應用時，畫布尺寸有設備大小決定：iphone 6 的1334x750pixels和Andriod的1280x720pixels。
為了將移動應用的工作流應用到VR UI上。你首先要考慮清楚最有意義的畫布尺寸。
下面是一個360度場景的平面圖。這種被叫做等距柱狀投影圖（equirectangular projection）。在一個3D虛擬環境中，這種投影包裹在球狀物外來模仿真實世界。
這種投影的全幅呈現了360度的水平場景和180度的垂直場景。所以我們因此定義畫布為：3600x1800.
在這么大尺寸的畫布上工作是一個很大的挑戰。但是因為我們主要對VR應用的交互方面感興趣，我們可以只專注于畫布的一部分。
基于Mike Alger’s early research 在舒適觀看區域的研究，我們可以區分出一個和當前交互有意義的部分。
在360度場景中，我們感興趣的區域為1/9。這個區域被確立在投影鐘的中央位置，并且大小為1200x600pixels。
總結一下：
- “360 view”：3600 x 1800 pixels
- “UI view”：1200 x 600 pixels
測試
一個屏幕上使用兩塊畫布的原因是測試。"UI View"畫布幫助我們將注意力集中在制作的交互效果上，更能容易設計流。
同時，"360 View"用于將界面嵌入VR場景中。為了得到更有意義的比例效果，用VR頭盔進行測試是非常有必要的。
工具
在我們開始之前，下面有我們需要的工具
-
Sketch
我們使用Sketch來世界界面和用戶流。如果你還沒有安裝，可以下載個使用版。Sketch是我們首選的交互設計軟件，但是如果你更喜歡使用Photoshop或其他軟件也是可以的。 -
GoPro VR Player
GoPro VR Player是一款360度內容查看器。免費。我們用他來預覽設計和進行測試。 -
Oculus Rift
將Oculus Rift嵌入GoPro進行測試。
VR交互設計流程
這部分，我們將瀏覽下VR交互設計的簡短教程。我們一起實現一個簡單的、最多五分鐘能完成的例子。
下載 assets pack，包含被壓縮的UI元素和背景圖片。如果你想使用自己的素材庫，當然也可以。沒問題。
- 設置360 View
先說重要的，我們先創建一個360度的視角。在Sketch中打開新文件，創建一個artboard：3600 x 1800pixels。
導入名字為background.jpg的文件將它放置在畫布中央。如果你是使用自己的投影背景，請確保他的比例是2:1，調整尺寸到3600x1800pixels
圖片來自smashingmagazine -
設置artboard
上面提到過，“UI View”是裁剪過的360 View，僅側重于VR交互。
在前一個360View后創建一個新的artboard：1200 x 600pixels。然后復制我們剛剛放到“360 View”上的背景，將其放在新的artboard的中央，不要調整大小！我們想要保證一個裁剪后的背景。
圖片來自smashingmagazine - 設計交互效果
我們應該在UI View上設計交互效果。為了讓例子變得簡單，我們加一排瓷磚。如果你想偷個懶，直接將資源包里面名為title.png的圖片轉過來拖拽到UI View的中間就行。
復制并創建一排新的瓷磚。
從資源包里抓取kickpush-logo.png放到瓷磚上面。
圖片來自smashingmagazine
看起來還不錯，是吧？ -
合并artboard并導出
有趣的部分來啦。保證UI view層在360 View層上。
將UI View拖到360 View上，并放置在中間位置。導出360 View，格式為png。UI View就會在它的坐上角。
圖片來自smashingmagazine -
在VR上進行測試
打開GoPro VR Player，將剛剛導出的360 View的png圖片拖拽到窗口。通過鼠標來拖拽預覽。
完成啦！現在你知道有多簡單了吧？
如果你電腦上安裝了 Oculus Rift，那么GoPro VR Player能檢測到他并允許你用你的VR設備預覽這張圖片。根據您的配置,您可能會將時間浪費在MacOS的顯示設置。
圖片來自smashingmagazine
技術考慮
低分辨率
VR頭盔的分辨率特別低。好吧，也不完全正確：取決于你的手機分辨率。然而，考慮到設備理你的眼睛5cm遠，看起來并不清晰。
為了清晰的VR體驗，我們需要8K display per eye。意味著15360 x 7680的顯示。我們離此還很遙遠，但最終會實現的。
文字可讀性
因為顯示屏的分辨率，你所有的漂亮的UI元素都會看起來像素化。這意味著，首先文字很難閱讀，其次,將會有一個高水平的直線上混疊。盡量避免使用大文本塊和高度詳細的UI元素。
收尾工作
設計圖
還記得移動應用的設計流程嗎？我們可以將其應用VR 交互設計上。使用我們的UI View,我們將UI流映射和組織成能理解的設計圖,適合開發人員理解我們所設計的應用的整體架構。
動態設計
設計一個漂亮的UI是一方面，但是展示它的動態效果又是一個不同的方面。
VR UIs能走多遠？
待更
