這篇文章是Marvel的設(shè)計師&開發(fā)者Maxime De Greve（Marvel是一款原型工具诅岩，之前也寫過一篇體驗文章來著）稼病，發(fā)布在官方博客中的一篇文章，如何通過現(xiàn)有的工具挂据，來實現(xiàn)近在咫尺的VR未來丸边？也許我們的設(shè)計方法和工具還沒有沉淀好，但是仍然可以去一窺未來祖娘，文章也介紹了一些VR設(shè)計的基礎(chǔ)知識失尖，最后也完成了一個輕觸效果的demo啊奄。雖然仍局限于2D場景交互方式，缺少環(huán)境交互掀潮，但行動起來菇夸，你就會發(fā)現(xiàn)一些新的東西，不是嘛仪吧？
原文鏈接：VR Prototyping with Marvel
原文作者：Maxime De Greve
VR正在穩(wěn)步發(fā)展庄新，并逐漸走向主流。就像我們等待著薯鼠，從大型的設(shè)備進化成PlayStation?VR和HTC?Vive這樣能走進客廳的設(shè)備择诈。
在未來的三年，F(xiàn)orrester預(yù)測會有5200w的虛擬現(xiàn)實設(shè)備被銷售出皇，Samsung在今年的早些時候也有透露羞芍，它們賣出了500w的Gear?VR。
然而郊艘，要降低產(chǎn)品設(shè)計的門檻荷科，讓更多的團隊加入到設(shè)計中，還需要一些工具纱注。
如果讓你用腳趾來做VR的原型和設(shè)計畏浆，你當然會有很多困惑，你不知道該是什么尺寸狞贱，需要購買什么設(shè)備刻获，通過什么樣的軟件來操作。別擔心瞎嬉，每個人都會這樣将鸵。
幸運的是，有一些人寫文章來幫助其他人起步佑颇，我讀了“Getting started with VR Interface Design”和“Design practise in Virtual Reality”，獲得了不少啟發(fā)草娜。
Alex和Sam的這句話引起了我的注意：
“設(shè)計師多年提煉出來的工作流程不會被浪費挑胸，也可以用來構(gòu)建VR界面”
于是我開始思考，我怎么樣可以通過現(xiàn)有的工作流程宰闰，來為VR制作原型和設(shè)計茬贵？我收集了這些材料：
-通過Sketch制作一些設(shè)計
-通過Marvel制作原型，并在Marvel 的iOS應(yīng)用上體驗
-一部Google Cardboard
經(jīng)過了幾天的腦洞之后移袍，我看到了一些我完成的有趣事情解藻，Marvel for VR!
下面是我所做的事情：
腦洞我們的iOS應(yīng)用
我們現(xiàn)在有一款iOS應(yīng)用，可以讓你在手機上看原型葡盗。我希望通過它和Google Cardboard螟左，讓你能在Marvel上查看VR原型。
現(xiàn)在這個應(yīng)用只支持2D設(shè)計，所以我需要支持360°的圖片來創(chuàng)造一個簡單的環(huán)境胶背。
我們使用Apple的SceneKit SDK來將圖片轉(zhuǎn)換到3D環(huán)境巷嚣，然后讓加速計追蹤頭部的轉(zhuǎn)動。
Marvel使用“hotspots”來快速連接設(shè)計钳吟，形成原型廷粒。hotspot本質(zhì)上就是一個交互區(qū)域，你可以添加到你的設(shè)計上红且，讓用戶觸碰后到下一個屏幕坝茎。
我可能需要為適應(yīng)VR微調(diào)一下Marvel的默認行為。
盡管Google Cardboard（大多數(shù)設(shè)備也是如此）包括一個操作按鈕暇番，它的功能就像是點擊或是輕觸嗤放，我也想讓用戶在不需要任何其它操作，只需要凝視熱區(qū)幾秒就可以進入下一區(qū)域奔誓。
技術(shù)做好了分類斤吐，下一步就是設(shè)計出VR原型。
為VR設(shè)計
顯然厨喂，給VR設(shè)計的第一步就是在Sketch和Photoshop中設(shè)置一個2:1的畫板和措。
我在Facebook上找到了一個很棒的模板來幫助我開始。
Facebook VR模板也有一些方便的指南蜕煌。綠色區(qū)域為使用時佩戴的舒適視角派阱，黃色區(qū)域回事用戶視野的邊緣，可以吸引用戶的好奇心斜纪，紅色是用戶可以看到的部分贫母。
現(xiàn)在我們有了模板，已經(jīng)準備好開始設(shè)計了盒刚。作為”Game of Thrones”的忠實粉絲腺劣，我為我的“Game of Marvel”創(chuàng)造了兩個虛擬屏。
第一個屏是3D環(huán)境因块，第二個屏是游戲暫停時現(xiàn)實的菜單橘原。
對背景來說，我通過C4D創(chuàng)建了一個360°的圖片涡上。
你不需要通過3D軟件開始趾断，它可以是任何的360°圖片，甚至一個白色背景吩愧，F(xiàn)lickr上有很多很棒的360°圖片芋酌，你可以去找找。
你可能注意到這張圖片有點奇怪雁佳，這是因為圖片會被貼在一個球體上脐帝，通過VR設(shè)備你就可以看到全景的視圖同云。
我添加了一個3D的插圖，讓你了解設(shè)備下發(fā)生了什么：
一些提示：
由于你的設(shè)計會被卷曲為球體腮恩，你需要注意你的按鈕也會被球化梢杭，按鈕越大，效果越明顯秸滴，所以在4000x2000px的Facebook模板哈桑武契，不要超過400x400px的形狀。
Marvel中的原型
這感覺真不錯荡含，我創(chuàng)建了一個Marvel項目咒唆，并添加了我的圖片，通過編輯器和hotspot聯(lián)系在一起释液。
最后結(jié)果
我在Marvel的iOS應(yīng)用上運行了這個項目全释，把我的手機插入了Google Cardboard然后運行！這就是我的第一個Marvel VR原型误债。
看看下面這個視頻浸船，你可以看到暫停菜單中的hotspot和交互。
（外鏈的視頻好像受限...所以只能去原文查看了）
我花了不到5分鐘的時間來將設(shè)計連接寝蹈，創(chuàng)建了一個VR原型李命，并使用了iOS應(yīng)用來查看它，最終的結(jié)果也不錯箫老，我從中獲得了不少樂趣封字。
