我的"純"VR原型設計工作流
這個方法的特點就一個字：快。
- 概要：這篇文章不一定能幫到你
- 選題，方法，工具，作者介紹
- 第一步：紙上原型
- 第二步：2D 素材製作
- 第三步：3D 素材製作
- 第四步：場景創建
- 第五步：分享和導出
- 第六步：下一步是什麼？
- 結尾：你也要來VR里創作嗎？
概要：這篇文章不一定能立即幫到你
你好，我是毒蛇必殺者，在這篇文章里我們會討論如何在VR里製作「設計原型（prototype）」。
如果你對 VR 感興趣，又是設計從業者，看完這篇文章，你可以很快上手在 VR 里創作 3D 原型。如果你對 VR 不太感冒，2018年了，虛擬現實了解一下 ??。文章結束，我們會有一串可以描繪 VR 版嗶哩嗶哩直播的 3D 場景，可以在裡面走來走去，放大縮小，自由演繹用戶會怎麼使用這個產品。這個過程不會使用任何涉及到編程的工具，不會動手雕刻複雜精緻的 3D 模型，甚至不需要脫下頭盔打斷創作狀態。快速，簡單，所見即所得，是這個工作流最大的特徵。
本文中我們會使用的平台和工具：
紙張或iPad
運行Windows10的PC:
Figma 網頁端設計工具Google Poly 3D 模型庫Sketchfab 網頁端 3D 模型展示平台Oculus Rift+Touch
Google Blocks 簡易3D建模軟體SketchBox VR 原型製作軟體這裡是最後的成果??一共耗時8小時左，四個場景平均耗時2小時，非VR會消耗我4天，是顯著的提升。
https://www.zhihu.com/video/954400370030628864
做什麼，方法，工具，作者介紹
做什麼
設想一個當今活躍的高的手機應用的VR版是什麼樣的？
在一個設計師微信群里做了快速統計後，淘寶，嗶哩嗶哩動畫，微信獲得前三，對於我來說bilibili 跟好玩，使用場景也更多樣，所以最終鎖定了嗶哩嗶哩動畫。具體的場景是在嗶哩嗶哩動畫VR中收看Mr Quin的直播。
方法
和設計一個手機應用／網頁一樣，調研，發想，設計，迭代。從低保真到高保真。
我們這個流程突出一個字：快。學起來快，做起來快，而且管用。本方法最核心的流程：從快速建模工具 GoogleBlocks ，開源模型庫Poly，到原型工具 Sketch Box的快速素材創建和調用。??看完這句話你就可以走了
工具
硬體工具是運行Windows10的PC, Oculus rift + Touch
軟體工具有一個原則：簡單好上手，免費
由於Oculus的視窗系統：Dash，下面的每一步都可以在帶頭盔的狀態下完成。關於作者
毒蛇必殺者是一個對 VR 很感興趣的學生，為 Vive，Oculus, daydream上的產品製作過 VR 原型，也使用過Hololens, ARKit 製作過AR 原型。希望通過寫文章，認識更多朋友，傳播用VR創作的樂趣。
第一步：紙上原型（可跳過）
如何節約時間：儘可能在紙上搞清楚你要做什麼
3D 世界的可能性太多了， 很容易迷失在不停的嘗試里。如果能在紙上搞清楚這些，你的原型製作流程會快非常多：
- 使用原型的用戶是個什麼樣的人？需要完成什麼？（明確用戶，功能需求）
- 為了完整表達這個實用場景，需要哪寫步驟？（故事版，流程）
- 簡單描述/畫出這些步驟里所需的2D 3D素材（界面素材，3D 模型）
把紙上做好的內容掃描一下（或者乾脆在iPad上畫），之後可以放在VR里做參考。
筆者這裡的草圖描繪了一個bilibili用戶關注up主 quin（俗稱狗頭人）的過程。
這裡還有一份我使用素材的詳細目錄 Bilibili VR 直播功能原型 劇本
第二步：2D 素材製作
紙上的東西搞定了，該上電腦動手創建素材了。我們從咱們最熟悉的 2D 界面素材開始。
問題來了，VR生產環境基本都是PC，有沒有像 Mac 上的 Sketch 一樣快速做界面的工具？
Figma, 一款在windows上也能用的極速界面設計工具
Figma，一言以蔽之：可以多人協作的網頁版sketch，有chrome就能用。
如果你用過sketch，相信你在這裡可以如魚得水了。
注意：想要在figma里使用中文，需要選擇中文字體，默認可用的是 Noto Sans SC
我們在這裡按鈕，卡片，要用的文字儘可能準備好，背景和內容的對比度可以稍微強一些。稍後導入場景搭建工具的時候，可讀性會更好。
如果你習慣使用其他工具也沒問題，Figma的好處在於資源佔用低，速度快，學起來快。
這裡是筆者的界面設計文件。打開之後你可以縮放和移動畫布，你也可以複製一份自己玩耍。
VR設計模板, 合理設計的快速起步
原型階段對界面設計細節沒有刻板的要求，保證素材放入環境後可以辨識就行。
（注意素材的解析度，透明度。）1.如果你想要追求最科學的尺寸，距離，位置。你可以參考谷歌出品的VR 界面組件庫。
2.如果你需要2D的虛擬手模型，或者unity的原型觀察模板，你可以訪問facebook的VR模板頁面
第三步：3D 素材製作
如果把之後的場景創建比作拼樂高，這一步就是準備積木塊。
基於Sketchbox支持素材的類型：glTF，Poly直接導入，咱們遵循一個「先找後做」的流程。先去Sketchfab，Poly搜索下有沒有能用的素材
咱們找素材的方針是：先去 SketchFab 找高保真，和你要的素材接近的模型。
什麼是Sketchfab？Sketchfab是一個基於網頁的3D模型渲染工具，也是擁有超過一百五十萬模型的線上模型庫。1.先從Sketchfab里搜索
具體是在這裡 /素材探索/可下載 （Explore/Filter by Downloadable）：
找到素材以後記得下載glTF格式，找個地方保存好。
注意，記得根據你的用途，給原作者署名。
2.如果Sketchfab沒有，或者你想要更統一的低多邊形（low poly）風格，可以去Google Poly 試試。
什麼是Poly？Poly也是一個基於網頁的 3D 渲染工具，也是一個 3D 模型庫。Poly專註於低多邊形模型，天然支持谷歌自家的Blocks和Tiltbrush。可以說是模型界的 Noun Project。
由於稍後可以直接通過模型的名字調用，找到你需要的模型後，你並不需要下載。
給模型點個贊，這樣稍後你在Blocks里建模可以用到，同時記住名字和樣子方便稍後在Sketchbox添加。、
Google Blocks, 也許是你的第一款 3D 創作工具
先找後做，如果找不到，我們就自己做。別害怕，如果你會搭積木，你就會用 Google Blocks 做模型。
什麼是 Google Blocks ? 這是一個只有六種工具的低多邊形建模工具。工具少，五分鐘就能學會，創作的可能性卻千變萬化。
這裡有三個小竅門，幫助大家更快上手：
1.建模基本思路：從整體到細節
https://www.zhihu.com/video/954396565851410432 2.使用網格（Grid）工具
https://www.zhihu.com/video/954396587120734208 3.善用已有的模型套件
https://www.zhihu.com/video/954396613251239936 Oculus Dash, 讓你利用「無限」空間的應用窗口
成熟的建模者會根據物體的三視圖進行參考建模。如果你也想建模又快又好，找張你要建模的東西的照片，一邊參考，一邊做。
多虧 Oculus Dash，多任務操作變得極其簡單。（去年看到這個給我我興奮壞了）
如果操作：打開 Oculus Dash，進入你的桌面，打開Chrome， 搜索你想要找的東西，把這個窗口拽出來，釘在一個合適的位置。關閉 Oculus Dash，你就會在你的應用里看到這個窗口了。
這裡有一段操作演示：
https://www.zhihu.com/video/954396742897123328 創作完記得上傳到Poly
模型做完後，點擊發布就會將模型上傳到Poly。記得給你的模型起個相對獨特的名字，等待5分鐘左右模型就可以在 SketchBox中被調用了。
這個工作流的精華就是這裡：不需要複雜的管線，做完，上傳，稍後只靠名字搜索就能放進你的場景。
你可以在我的poly看到我為這個原型製作的模型。
第四步：場景創建
素材都準備好了，接下來我們靠SketchBox 來把素材拼接成一個完整的場景。
SketchBox, 超快速的場景搭建和觀察
什麼是SketchBox？
Sketchbox是一個方便的 VR 原型製作工具，他允許你把各式各樣的素材在 VR 中隨意擺放，變形，還支持像幻燈片一樣的批註和場景切換。
1.如何導入素材文件？詳細文檔點這裡
準備好的圖片文件，3D 模型，按照類型放在這個目錄對應的文件夾里。文件夾中已有的內容是Sketchbox準備的示例，可以放心刪除。文件放好後，記得好好命名，這樣稍後好找。
2.如何調用素材文件？
如果要調用先前導入的素材，點擊左手的Import（導入），選擇你的文件即可。
如果要調用Poly里的文件，點擊Poly圖標，搜索之前給你的模型起的名字，找到後拖進來就好
3.場景搭建的常識？
一幅圖幫你理清場景搭建的邏輯。按照途中數字順序安置素材即可。
在場景中先確立環境和用戶的大小和位置關係，再按照用戶確定環境中物體（object）的大小位置，最後確定界面。這樣搭建會最快確定相對坐標，減少變數。
完成場景搭建後，可以設置觀察點，鎖定視角和縮放，保證稍後觀賞時比例正確。
Open.spotify.com 一個廣告比客戶端少超多的聽歌利器
做場景的時候別忘了打開你最喜歡的音樂。還是使用Oculus Dash，把這個窗口釘住。
https://www.zhihu.com/video/954397236973514752 經過我的長期測試，免費賬戶網頁端廣告明顯少於客戶端。一邊搭積木一邊聽這些歌效果極好。
第五步：導出和分享
場景搞定了， 使用Sketchfab可以為你的場景設置多個觀察點，這樣不在就算沒有頭盔，只要能上網，就能自由的瀏覽你的原型，快速的了解你原型的意圖。Sketchfab 還有 VR 觀察模式，觀察你原型的人只要有 Cardboard（暴風墨鏡類）就能以很低的成本體驗你的原型。
你也可以使用Oculus內置的 Oculus Mirrow 工具配合錄屏，把整個體驗錄製下來，詳細設置可以參考這個視頻。
第六步：下一步是什麼？
到這一步原型製作就結束了。我們來回顧一下到現在你得到了什麼：
- 清晰的產品思路，場景設定 （可以和別人交流想法）
- 足夠的 2D 設計素材 （可以取出來做更精細的2D 界面）
- 精挑細選的 3D 的素材 （可以作為素材庫）
- 一個有故事，有層次的 3D 場景 （下一步最好的起點）
那麼下一步你可以作什麼呢?
測試？導入遊戲引擎？渲染？進一步雕琢？做成視頻？想怎麼用都可以。
結尾：你也要來VR里創作嗎？
VR中的創作工具正在顯著的降低3D創作的門檻，豐富生動的立體內容不再被3D美術專家壟斷。本文討論的工作流本質上並不是像 iPad 上 Grageband 那樣很難帶入生產環境的玩具。雖然功能簡單，但這些工具被證實確實滿足 3D 原型製作，甚至遊戲製作的需求。
我相信未來 3D 創作會像組裝宜家傢具一樣普遍，像搭積木一樣簡單。我們在虛擬設計的表達會前所未有的多樣，每個人都可以暢遊在迥然不同的世界裡????。
最後介紹幾個非常棒的 VR 創作工具和創作者，感謝你的閱讀！
Goro Fujita，使用Quill在無限大的世界裡快速創建迪士尼一樣的畫面
什麼是Quill? Quill是Oculus Studio出品的 VR 繪畫，動畫軟體。
和Tiltbrush 不同的地方在於：Quill支持像傳統繪畫一樣的厚塗技法，減少了筆觸的3D效果，強調視覺塑造。
https://www.zhihu.com/video/954397567300231168 這是Goro Fujita（點擊這裡查看他更多的作品）的一個街區作品。看完這個作品，你也許就能理解VR里，一次創作，多樣解讀的特徵。
Jarlan Perez，模塊化的使用Google Blocks進行複雜的創作
這是Jarlan 創作的場景，大小事一個完整的遊戲關卡。
Jarlan Perez 模塊化的使用Blocks里的模型來搭建大型場景（點擊這裡了解他的Blocks到虛幻的工作流）
他還製作了一個機器人模型庫，導入Blcoks後你就可以方便的搭積木了。
Jama Jurabaev，使用Gravity Sketch 發想精密複雜的機械
什麼是 Gravity Sketch？
Gravity Sketch 是一款VR設計軟體，你可以在裡面畫出流暢的曲線，再通過曲線創造出模型。
這是 Jama 在 VR 中創造載具的視頻演示（更多視頻點這裡）。Jama 是世界頂級概念設計師，你可以在他的網站購買更多將VR整合進創作流程的教程。
Credit:
Sketchfab:
James S. Trent Arena by loghawk360 - download 3D model
Guts Berserker by Taiga - download 3D model
Knight Artorias by Samize - download 3D model
MT by Daniil Kutuzov - download 3D model
Mirrors Edge Apartment - Interior Scene by Aurélien Martel - download 3D model
Fantasy Sky Background by Hannes Delbeke - download 3D model
Poly:
Knights Character Kit
推薦閱讀：