WebVR沉浸式內容設計入門、進階指南

——映維網——

國際影響力VR信息數據平台

文章相關引用及參考：uxdesign

奧斯丁已經建立了一個親身實踐的流程，用於研究和創造基於新興技術的沉浸式體驗。現在他將向我們分享他自己的個人經驗

（映維網 2017年08月29日）我們有幸就虛擬現實，增強現實和混合現實採訪了奧斯丁·奈特（Austin Knight）。奧斯丁目前供職於HubSpot，他是一名國際講師，出版作家，UX & Growth Podcast的聯合主持人，一位UX專家。

如果你是產品經理；開發者；設計師；作家；心理學家；或認為未來屬於沉浸式體驗的VR/AR/MR愛好者，你應該繼續閱讀本文。

當談到虛擬現實，增強現實和混合現實時，奧斯丁已經建立了一個親身實踐的流程，用於研究和創造基於新興技術的沉浸式體驗。現在他將向我們分享他自己的個人經驗。好了，下面讓映維網和大家一起看看這位UX設計師的分享吧。

一. UX的未來是怎樣子的呢？

我相信VR/AR/MR是UX的未來（尤其是MR）。在明確這一點後，我希望學習應如何為其進行設計和開發。

VR是現在三者中最成熟的技術，但VR目前仍處於發展初期，UX模式仍然在定義中。例如，當我邀請Mozilla VR的Casey Yee來到UX＆Growth Podcast的時候，我們討論了鏈接在VR中的樣式。

所以我不僅要學習如何設計和開發，而且我可能需要自行制定UX模式，也許是幫助定義這一媒介。

二. 為什麼今天的UX設計師需要涉足沉浸式體驗呢？

因為這是一個難得的機會，這使我想起了早期的互聯網時代，當時一切都沒有定論，一切都在定義之中。考慮到這一點，我很快就確定我希望在VR中進行實驗，尤其是WebVR。因為這完全可以訪問，我們只需要一個互聯網連接和一台設備。這台設備可以十分簡單，如廉價的安卓手機或筆記本；這台設備也可以是十分複雜，比如Oculus Rift。WebVR適用於所有人。

這同時意味著所有人都可以為其開發體驗。我主要是遠程辦公，並需要前往那個世界不同地方。很多時候這意味著我不能接觸到最新的技術。

三. 在VR/AR/MR創建沉浸式體驗需要怎樣的技能呢？

如果你知道一定的HTML和CSS最好，尤其是Javascript。一旦掌握相關知識，你會感覺自己成為了一名魔法師。以下是這些工具的鏈接：A-frame（點擊前往）和MagicaVoxel（點擊前往）。

有時候會你很有可能需要一定的幫助，所以我會選擇A-Frame支持文檔，A-Frame Slack和WebVR Slack。如果想獲取靈感，你可以查看谷歌的WebVR實驗你也可以看看我開發的WebVR網站

如果你想了解更多關於UX和VR的知識，這裡有成噸的資源（點擊前往）

四. 今天WebVR UX設計師需要什麼工具呢？

個人而言，我會建議先從A-Frame和MagicaVoxel開始。在MagicaVoxel進行基礎的建模，然後將其導入A-Frame。接下來在A-Frame中創建動畫和交互等等。

網上有大量的WebVR框架，其用例和複雜程度都不盡相同。A-Frame和three.js主要是使用代碼，給予你的控制也更多；而Vizor、Hologram和Playcanvas等工具則允許你使用完全可視化的編輯器，但控制較少。你還可以選擇其他類型的混合工具，如Sketchfab。

當我把目標定在WebVR，我開始探索潛在的方法。我最終選擇了A-Frame，因為這項工具的使用人數多，網上存在大量的文檔，易於使用，同時與Mozilla和開源社區相連接。第一步是根據樣板文件開始搗鼓。這一直是我學習的方法，我不會觀看教程或參加課程。A-Frame的樣板文件十分簡單。

除此之外，A-Frame提供自己獨特的Inspect版本，但對於VR，我們可以通過在任何A-Frame項目上點擊CTRL+ALT+I來訪問。

這時會彈出一種虛擬編輯器，這樣我就能在樣板文件中隨意搗鼓其中的元素，以及網上其他實時A-Frame項目中的元素。這幫助我理解A-Frame巧妙的實體組件結構，這看起來很像HTML，但它的卻HTML。

五. 你的第一個WebVR項目？

當我足夠了解A-Frame及其工作原理後，我開始準備我的第一個WebVR項目（老實說，我經過的大量「訓練」只是為了驗證事情真的如其所示般簡單，因為我不相信這樣簡單的代碼可以創造出如此令人難以置信的體驗）。

這時，我需要確定我希望開發什麼，以及我該如何開發。我發表過很多次演講，並在主持一個播客，它們通常位於世界上不同的地方，所以不是人人都能前往參加。於是，我決定在VR中創建一個人人都可以觀看我演講和播客的空間，就好象他們都和我位於同一個房間。這意味著我需要創建一個球體來添加我的360度視頻，然後在這個球體上添加用於導航和交互的元素。

我從A-Frame提供的詳細文檔開始，然後創建了一個球體。接下來我添加由A-Frame生成的幾個3D幾何體，並使用Magicavoxel創建一些更複雜的3D元素，所有這一切都將位於球體之中，作為用戶界面。

六. 你當前的WebVR UX流程是什麼？

當我開始學習Javascript時，事情開始變得很棒。將一些Javascript活動加入到A-Frame場景中後，一切都變得活靈活現。最後，我啟動了我的VR體驗，而全球數以千計的人正在使用它。

在用戶測試和分析時，我發現用戶沒有利用體驗完整的360度區域，而這樣的情況同樣發生在其他產品中。所以我製作了一個教程，向我的用戶介紹WebVR。

通過講述，以及實際引導他們，這個教程會向用戶較少體驗的本質。這時用戶將開始真正利用我創建的體驗，而這時我發現自己剛剛將整個UX流程應用到VR項目中去。

從設計和增長的角度來看，我感到非常滿意，同時比我預想的更容易。也許最重要的是，我用這個作為概念證明在HubSpot推出了VR計劃。

七. 在WebVR中設計UX後，你的結論是什麼？

首先，我們認識到我們現在有了一個全新的設計元素。雖然設計師一般使用紅，綠和藍的組合，但VR引入了第四個元素，即深度。這可以大大改變設計中的可能性。

其次，你會意識到用戶是否擁有3自由度（環顧四周）或6自由度（環顧四周和自由行走）將你構建體驗產生重大的影響。

第三，你會意識到，儘管聲音在網頁端上是一個「禁忌」，但對VR體驗而言至關重要。

第四，你會意識到最好的界面需要集成至環境中，而不是附加到用戶上（如抬頭顯示器）。

八. 你如何看待用戶體驗的未來？

我相信UX的未來在很大程度上屬於MR。這是自然發展的一部分。我們已經看到設計從單個桌面體驗，多個桌面解析度，到有著多個解析度的多個設備，再到甚至可能沒有傳統意義上的屏幕的設備等等。

通過這一點，我們可以看到用戶實際上並不迷戀於他們的設備。他們很容易就會放棄舊設備並轉向新的和更好的設備。相反，他們沉醉於設備提供的信息和體驗。一旦這種信息可以整合到我們的現實世界中，我們對計算機，智能手機和2D介面的需求將幾乎消失。

九. 什麼類型的專業人士會選擇這種UX職位呢？

作為UX設計師，我們將看到他們在MR中發揮重要的作用。但與「UX設計師已經過時」的說法相反，我認為整個行業將會像往常一樣發展。成為「UX設計師」的意思將會改變，並會隨著MR的發展而急劇變化。

具有3D空間，聲音設計，具身認知，空間處理，認知負載，本體感，人為因素和人體工程學經驗的人員都將擁有巨大的優勢。因此，這也是我開始這個項目的原因。

十. UX設計師需要擔心未來嗎？

令人鼓舞的是，這個項目讓我看到雖然設計技術和媒介將隨著MR而改變，但原則在很大程度上將保持不變。如果你是一個基礎水平很好的UX設計師，這種轉變對你而言將會變得很自然。你只需要對它持開放的態度即可。

十一. 你認為諸如深度學習這樣的新興技術會與VR/AR/MR相結合嗎？

一般而言，新興技術儘管本身像玩具一樣，但當置於MR的背景下將變得非常有影響力。深度學習是一個很好的例子。事實上，深度學習和量子計算可能是MR大規模增長和普及的最關鍵因素。

能夠掃描環境並了解這些環境，然後依此來定製體驗，這是一些十分強大的東西，這也是MR感覺如此真實的原因所在。想像一下，有一隻蜘蛛正爬過你的筆記本電腦。設備是真實的，但蜘蛛是假的，然而，卻你不能將兩者區分開來。

你的MR設備可以識別環境中的所有內容，並映射了筆記本電腦和桌面的物理屬性（Hololens已經可以做到這一點，即時創建了環境的虛擬網格）。它觀察到房間里的照明，並將其投射至蜘蛛身上。或許它甚至會注意到你的筆記本電腦發熱情況比較嚴重，並使蜘蛛避免它們。

十二. 它會帶來什麼樣的商業機會呢？

商業機會將會變得十分寬廣。哦，你的可口可樂罐已經空了嗎？好，我們將自動從亞馬遜訂購更多的可口可樂。哦，眼鏡的後置攝像頭注意到，當你看到最新的梅賽德斯C系列時，你的瞳孔往往會擴大。

也許梅賽德斯應該開始向你播放廣告和提供折扣，希望可以讓你下單購買。等一下，房間里的那個女孩剛剛掉到地板上，而她正在抽搐。你的設備會立即識別問題，實時通知療護人員詳細情況，然後在醫護人員到達之前告訴你應如何處理。還有你正考慮購買的陶瓷花瓶，但你不能確定它是否適合你的房間。

只需看一下，你將能夠把花瓶準確地呈現在你心中所想的位置。你可以從不同的角度觀察，移動花瓶，任何事情都可以。現在Wayfair已經可以做到這一點。

如果你認真考慮到這一點，你將會遇到這樣一個問題：如果我們都佩戴著這些設備，你還需要一個真正的花瓶嗎？

十三. 網上有什麼有用的WebVR社區嗎？

每當我遇到這個問題，我都會推薦A-Frame文檔和谷歌，或者在GitHub或Stack Overflow上尋找答案。如果我真的陷入僵局。A-Frame Slack和WebVR Slack有很多好人會為你提供幫助。

這可能是創建WebVR的最大好處：社區非常熱情，同時十分樂於助人。

十四.如果我正在尋找跟UX&VR相關的工作，我應該從何入手呢？

如果你想了解如何在VR行業中獲得工作，我認為這裡是最好的資源之一（點擊前往）

現在輪到你了

VR/AR/MR的UX領域仍然等待著我們去定義，現在沒有人可以想像沉浸式體驗的完整樣式。這意味著今天的UX設計師肩負很大的責任。無論好壞。我們今天創造的沉浸式體驗將會塑造世界的未來。

感謝奧斯丁·奈特，現在我們有機會親身體驗，設計屬於我們自己的沉浸式體驗。請去嘗試吧。相信我，你將會享受這個過程的。

點擊展開全文

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！