對于很多設(shè)計(jì)者而言虛擬場景都是一個(gè)陌生領(lǐng)域哑芹，在過去 的幾年里誊薄，我們見證了虛擬現(xiàn)實(shí)（VR）設(shè)備和應(yīng)用的爆炸性發(fā)展。VR經(jīng)歷了從平凡到驚艷的過程羽圃。
VR App有哪些類型欢搜？
在設(shè)計(jì)者角度封豪，VR應(yīng)用由兩種類型組件構(gòu)成：場景（environment） 和 交互（interface）
你可以把場景定義為帶上VR頭套時(shí)看到的世界——你所在的星球、你乘坐過山車所見景象炒瘟。
界面是一系列與用戶交互的元素吹埠，用于瀏覽場景和控制體驗(yàn)。所有的app都可以通過上述兩個(gè)坐標(biāo)進(jìn)行定位唧领。
處于第二象限的app更像模擬器藻雌，比如過上車體驗(yàn)。有完整的場景卻完全沒有交互斩个。你像被完全固定在座位上胯杭。
相反的，在第四象限的app有成熟的交互但基本沒有場景受啥。三星Gear VR電視機(jī)就是一個(gè)很好的例子做个。
設(shè)計(jì)虛擬場景如場地和風(fēng)景需要精通大多設(shè)計(jì)師都不太了解的3D模型工具。然而滚局，這是一個(gè)巨大的機(jī)會(huì)居暖，對于UX和UI設(shè)計(jì)師將他們的交互設(shè)計(jì)技能應(yīng)用到虛擬現(xiàn)實(shí)（簡稱VR）上。
我們做的第一個(gè)完整的VR UI設(shè)計(jì)是經(jīng)濟(jì)學(xué)者app藤肢，和虛擬現(xiàn)實(shí)工作室Visualise合作開發(fā)太闺。我們負(fù)責(zé)設(shè)計(jì)，Visualise負(fù)責(zé)開發(fā)完成app嘁圈。
我們將以此作為工程實(shí)例貫穿接下來的部分省骂，這部分我們將進(jìn)一步了解VR app的設(shè)計(jì)方法，在交互設(shè)計(jì)本質(zhì)之前最住。你可以從Oculus網(wǎng)站上下載 Economist app for Gear VR
VR UI設(shè)計(jì)過程
很多設(shè)計(jì)者早已明白設(shè)計(jì)移動(dòng)應(yīng)用的工作流程钞澳，但是VR交互設(shè)計(jì)的流程還沒被定義。當(dāng)?shù)谝粋€(gè)VR app設(shè)計(jì)項(xiàng)目到來時(shí)涨缚，順理成章的第一步是設(shè)計(jì)一個(gè)流程轧粟。
傳統(tǒng)工作流，新領(lǐng)域
當(dāng)我們第一次玩三星Gear VR時(shí)脓魏，發(fā)現(xiàn)和傳統(tǒng)移動(dòng)應(yīng)用的相似之處兰吟。基于交互的VR應(yīng)用和傳統(tǒng)app一樣根據(jù)基本動(dòng)力學(xué)：用戶和接口交互茂翔，幫助他們?yōu)g覽頁面揽祥。我們在這兒簡單提及，只要記住這一點(diǎn)就行檩电。
根據(jù)傳統(tǒng)app的相似點(diǎn)拄丰，經(jīng)過數(shù)年實(shí)踐檢驗(yàn)的 移動(dòng)應(yīng)用工作流不會(huì)被浪費(fèi)府树，同樣可以被應(yīng)用到VR UI行業(yè)。你離你所想象的VR app更近料按。
在介紹怎么設(shè)計(jì)VR交互前奄侠，我們先回顧瀏覽下傳統(tǒng)移動(dòng)應(yīng)用設(shè)計(jì)流程。
1.線框圖
首先载矿，我們將通過快速迭代垄潮，定義交互和總體布局。
2.視覺設(shè)計(jì)
在這個(gè)階段闷盔，功能和交互已經(jīng)形成⊥湎矗現(xiàn)在的要做的是將品牌準(zhǔn)備應(yīng)用到線框圖中，設(shè)計(jì)一個(gè)漂亮的界面逢勾。
3.設(shè)計(jì)圖
在此牡整，我們將組織屏幕流，繪制屏幕之間的鏈接和描述為每個(gè)屏幕的交互溺拱。我們稱之為應(yīng)用的設(shè)計(jì)圖,它將作為項(xiàng)目的主要開發(fā)人員參考逃贝。
那么，我們怎么將這種工作流應(yīng)用到虛擬現(xiàn)實(shí)呢迫摔？
設(shè)置
畫布尺寸
最簡單的問題也可能是最具挑戰(zhàn)性的沐扳。面對一個(gè)360度的畫布，我們發(fā)現(xiàn)很難找到從哪兒開始著手句占。原來UX和UI設(shè)計(jì)師只需要專注于整個(gè)空間中的某個(gè)部分沪摄。
我們耗費(fèi)了數(shù)周試圖弄清什么樣的畫布尺寸對VR來說有意義。當(dāng)你從事于移動(dòng)應(yīng)用時(shí)纱烘，畫布尺寸有設(shè)備大小決定：iphone 6 的1334x750pixels和Andriod的1280x720pixels杨拐。
為了將移動(dòng)應(yīng)用的工作流應(yīng)用到VR UI上。你首先要考慮清楚最有意義的畫布尺寸凹炸。
下面是一個(gè)360度場景的平面圖。這種被叫做等距柱狀投影圖（equirectangular projection）昼弟。在一個(gè)3D虛擬環(huán)境中啤它，這種投影包裹在球狀物外來模仿真實(shí)世界。
這種投影的全幅呈現(xiàn)了360度的水平場景和180度的垂直場景舱痘。所以我們因此定義畫布為：3600x1800.
在這么大尺寸的畫布上工作是一個(gè)很大的挑戰(zhàn)变骡。但是因?yàn)槲覀冎饕獙R應(yīng)用的交互方面感興趣，我們可以只專注于畫布的一部分芭逝。
基于Mike Alger’s early research 在舒適觀看區(qū)域的研究塌碌，我們可以區(qū)分出一個(gè)和當(dāng)前交互有意義的部分。
在360度場景中旬盯，我們感興趣的區(qū)域?yàn)?/9台妆。這個(gè)區(qū)域被確立在投影鐘的中央位置翎猛，并且大小為1200x600pixels。
總結(jié)一下：
- “360 view”：3600 x 1800 pixels
- “UI view”：1200 x 600 pixels
測試
一個(gè)屏幕上使用兩塊畫布的原因是測試接剩。"UI View"畫布幫助我們將注意力集中在制作的交互效果上切厘，更能容易設(shè)計(jì)流。
同時(shí)懊缺，"360 View"用于將界面嵌入VR場景中疫稿。為了得到更有意義的比例效果，用VR頭盔進(jìn)行測試是非常有必要的鹃两。
工具
在我們開始之前遗座，下面有我們需要的工具
-
Sketch
我們使用Sketch來世界界面和用戶流。如果你還沒有安裝俊扳，可以下載個(gè)使用版途蒋。Sketch是我們首選的交互設(shè)計(jì)軟件，但是如果你更喜歡使用Photoshop或其他軟件也是可以的拣度。 -
GoPro VR Player
GoPro VR Player是一款360度內(nèi)容查看器碎绎。免費(fèi)。我們用他來預(yù)覽設(shè)計(jì)和進(jìn)行測試抗果。 -
Oculus Rift
將Oculus Rift嵌入GoPro進(jìn)行測試筋帖。
VR交互設(shè)計(jì)流程
這部分，我們將瀏覽下VR交互設(shè)計(jì)的簡短教程冤馏。我們一起實(shí)現(xiàn)一個(gè)簡單的日麸、最多五分鐘能完成的例子。
下載 assets pack逮光，包含被壓縮的UI元素和背景圖片代箭。如果你想使用自己的素材庫，當(dāng)然也可以涕刚。沒問題嗡综。
- 設(shè)置360 View
先說重要的，我們先創(chuàng)建一個(gè)360度的視角杜漠。在Sketch中打開新文件极景，創(chuàng)建一個(gè)artboard：3600 x 1800pixels。
導(dǎo)入名字為background.jpg的文件將它放置在畫布中央驾茴。如果你是使用自己的投影背景盼樟，請確保他的比例是2:1，調(diào)整尺寸到3600x1800pixels
圖片來自smashingmagazine -
設(shè)置artboard
上面提到過锈至，“UI View”是裁剪過的360 View晨缴，僅側(cè)重于VR交互。
在前一個(gè)360View后創(chuàng)建一個(gè)新的artboard：1200 x 600pixels峡捡。然后復(fù)制我們剛剛放到“360 View”上的背景击碗，將其放在新的artboard的中央筑悴，不要調(diào)整大小延都！我們想要保證一個(gè)裁剪后的背景雷猪。
圖片來自smashingmagazine - 設(shè)計(jì)交互效果
我們應(yīng)該在UI View上設(shè)計(jì)交互效果。為了讓例子變得簡單晰房，我們加一排瓷磚求摇。如果你想偷個(gè)懶，直接將資源包里面名為title.png的圖片轉(zhuǎn)過來拖拽到UI View的中間就行殊者。
復(fù)制并創(chuàng)建一排新的瓷磚与境。
從資源包里抓取kickpush-logo.png放到瓷磚上面。
圖片來自smashingmagazine
看起來還不錯(cuò)猖吴，是吧摔刁？ -
合并artboard并導(dǎo)出
有趣的部分來啦。保證UI view層在360 View層上海蔽。
將UI View拖到360 View上共屈，并放置在中間位置。導(dǎo)出360 View党窜，格式為png拗引。UI View就會(huì)在它的坐上角。
圖片來自smashingmagazine -
在VR上進(jìn)行測試
打開GoPro VR Player幌衣，將剛剛導(dǎo)出的360 View的png圖片拖拽到窗口矾削。通過鼠標(biāo)來拖拽預(yù)覽。
完成啦豁护！現(xiàn)在你知道有多簡單了吧哼凯？
如果你電腦上安裝了 Oculus Rift，那么GoPro VR Player能檢測到他并允許你用你的VR設(shè)備預(yù)覽這張圖片楚里。根據(jù)您的配置,您可能會(huì)將時(shí)間浪費(fèi)在MacOS的顯示設(shè)置断部。
圖片來自smashingmagazine
技術(shù)考慮
低分辨率
VR頭盔的分辨率特別低。好吧班缎，也不完全正確：取決于你的手機(jī)分辨率蝴光。然而，考慮到設(shè)備理你的眼睛5cm遠(yuǎn)吝梅，看起來并不清晰虱疏。
為了清晰的VR體驗(yàn)惹骂，我們需要8K display per eye苏携。意味著15360 x 7680的顯示。我們離此還很遙遠(yuǎn)对粪，但最終會(huì)實(shí)現(xiàn)的右冻。
文字可讀性
因?yàn)轱@示屏的分辨率装蓬，你所有的漂亮的UI元素都會(huì)看起來像素化。這意味著纱扭，首先文字很難閱讀牍帚，其次,將會(huì)有一個(gè)高水平的直線上混疊。盡量避免使用大文本塊和高度詳細(xì)的UI元素乳蛾。
收尾工作
設(shè)計(jì)圖
還記得移動(dòng)應(yīng)用的設(shè)計(jì)流程嗎暗赶？我們可以將其應(yīng)用VR 交互設(shè)計(jì)上。使用我們的UI View,我們將UI流映射和組織成能理解的設(shè)計(jì)圖,適合開發(fā)人員理解我們所設(shè)計(jì)的應(yīng)用的整體架構(gòu)肃叶。
動(dòng)態(tài)設(shè)計(jì)
設(shè)計(jì)一個(gè)漂亮的UI是一方面蹂随，但是展示它的動(dòng)態(tài)效果又是一個(gè)不同的方面。
VR UIs能走多遠(yuǎn)因惭？
待更
