虛擬現(xiàn)實(shí)類的APP 要怎么設(shè)計(jì)？其實(shí)你已經(jīng)可以自己動(dòng)手設(shè)計(jì)了，其中所需要注意的要點(diǎn)，都已經(jīng)匯總到下面的文章里面，實(shí)操性極強(qiáng) ~

虛擬現(xiàn)實(shí)（VR）是一種屏蔽現(xiàn)實(shí)世界的完全沉浸式的體驗(yàn)。常見的VR設(shè)備很多，包括HTC Vive, Oculus Rift 或谷歌 Cardboard。用戶可以進(jìn)入各種模擬真實(shí)的世界和想象的場(chǎng)景，比如站在一群尖叫的企鵝中間，甚至怪物的背部。

除了虛擬現(xiàn)實(shí)，還有其他的現(xiàn)實(shí)體驗(yàn)，比如增強(qiáng)現(xiàn)實(shí)、混合現(xiàn)實(shí)和擴(kuò)展現(xiàn)實(shí)，它們?yōu)橛脩籼峁┝瞬煌捏w驗(yàn)。

AR、VR與混合現(xiàn)實(shí)的區(qū)別

增強(qiáng)現(xiàn)實(shí)（AR）通常通過智能手機(jī)上的攝像頭為實(shí)時(shí)視圖添加數(shù)字元素，增強(qiáng)現(xiàn)實(shí)體驗(yàn)的例子包括Snapchat鏡頭和游戲《Pokemon Go》。

混合現(xiàn)實(shí)（MR）體驗(yàn)結(jié)合了AR和VR的元素，以及真實(shí)世界和數(shù)字對(duì)象的交互?；旌犀F(xiàn)實(shí)技術(shù)現(xiàn)在正處于起步階段，微軟的HoloLens是早期最著名的混合現(xiàn)實(shí)設(shè)備之一。

將傳統(tǒng)設(shè)計(jì)與3D體驗(yàn)相結(jié)合

在過去的幾十年里，市場(chǎng)為設(shè)計(jì)師們提供了大量可靠的作品，且向著生動(dòng)的3D內(nèi)容新范式邁進(jìn)。聲音、觸覺、深度和感覺都是VR體驗(yàn)的基礎(chǔ)，即使是最新穎的2D屏幕體驗(yàn)也會(huì)讓人感到疲憊和過時(shí)。

VR提供了許多與真實(shí)環(huán)境訓(xùn)練相同的好處，但用不會(huì)遭遇現(xiàn)實(shí)狀況下常見的各種安全風(fēng)險(xiǎn)。如果受試者感到不知所措，他們可以摘下耳機(jī)或調(diào)整體驗(yàn)。這意味著醫(yī)療、軍事、警察等特定行業(yè)應(yīng)該優(yōu)先考慮如何使用VR進(jìn)行培訓(xùn)。

就拿Skype來說吧，VR有潛力將數(shù)字工作者聚集在數(shù)字會(huì)議上，就像Facebook Live with VR一樣進(jìn)行實(shí)時(shí)事件報(bào)道。比起僅僅在屏幕上看到另一個(gè)人，通過VR設(shè)備你能感覺到盡管你們相隔萬里，但你仿佛和他們坐在同一個(gè)房間里。

想想當(dāng)下人們是如何運(yùn)用觸摸屏的，我們可以通過許多例子來理解——滑動(dòng)、壓縮縮放和長(zhǎng)時(shí)間輕擊以提供更多的選擇。這些都是可以在虛擬現(xiàn)實(shí)環(huán)境中進(jìn)行設(shè)計(jì)的。我相信，隨著越來越多的創(chuàng)造者進(jìn)入VR領(lǐng)域，將會(huì)有更多的人從事全新的UI設(shè)計(jì)，幫助企業(yè)發(fā)展。

虛擬現(xiàn)實(shí)中的交互性由三個(gè)要素構(gòu)成——速度、范圍和映射。速度即虛擬世界的響應(yīng)時(shí)間，虛擬世界對(duì)用戶行為的響應(yīng)越快越好，因?yàn)轫憫?yīng)的即時(shí)性會(huì)影響環(huán)境的逼真度。許多研究者試圖用不同的方法來確定虛擬現(xiàn)實(shí)交互的特征和組成部分。

然而，為了完美地做到這一點(diǎn)，設(shè)計(jì)師必須全面理解現(xiàn)實(shí)世界，這意味著他們需要對(duì)用戶周圍的典型現(xiàn)實(shí)空間進(jìn)行可視化，然后在已知元素基礎(chǔ)之上展開建構(gòu)。這樣做的原因是避免讓用戶感覺新引入的元素正在侵犯他們的個(gè)人空間。

我們應(yīng)該設(shè)計(jì)什么樣的 VR App？

從設(shè)計(jì)師的角度看，VR應(yīng)用由兩類組件組成：環(huán)境和界面。

你可以把環(huán)境想象成戴上VR頭盔后進(jìn)入的世界——你發(fā)現(xiàn)自己身處其中的虛擬星球，或者你乘坐過山車時(shí)看到的景象。

界面是用戶與環(huán)境產(chǎn)生交互的元素，界面可以對(duì)環(huán)境進(jìn)行導(dǎo)航，并控制他們的體驗(yàn)，所有VR應(yīng)用都可以根據(jù)這兩個(gè)元素的復(fù)雜程度沿兩個(gè)軸進(jìn)行定位。

• 在左上角的象限是類似模擬器的東西，比如上文提到的的過山車體驗(yàn)。它們有一個(gè)近逼真的環(huán)境，但是沒有界面，你只是被鎖在車?yán)铩?/li>
• 與之相對(duì)的象限是開發(fā)界面做得很好但環(huán)境單一的應(yīng)用程序，三星的Gear VR主屏幕就是一個(gè)很好的例子。

如何著手為虛擬現(xiàn)實(shí)進(jìn)行用戶體驗(yàn)設(shè)計(jì)？

在你開始設(shè)計(jì)之前，認(rèn)真思考以下幾個(gè)基本問題也許會(huì)對(duì)你有所幫助:

• 用戶要從哪里開始？
• 如何引導(dǎo)用戶？
• 你是想提供詳盡的指導(dǎo)，還是創(chuàng)建一個(gè)不會(huì)讓用戶有過多選擇的極簡(jiǎn)環(huán)境？

不要寄希望于用戶知道自己應(yīng)當(dāng)怎樣做。緩慢而漸進(jìn)的熟悉、視覺線索和來自軟件的指導(dǎo)都應(yīng)該用來幫助用戶。當(dāng)你為VR設(shè)計(jì)時(shí)，你是為人們的能力而設(shè)計(jì)，就像你為系統(tǒng)的能力而設(shè)計(jì)一樣，所以你必須了解你的用戶以及他們體驗(yàn)VR時(shí)可能出現(xiàn)的問題。

VR體驗(yàn)與設(shè)計(jì)web或移動(dòng)產(chǎn)品的過程并沒有太大的不同，您需要構(gòu)建用戶畫像、概念流程、繪制線框圖，制作可交互原型。

為虛擬現(xiàn)實(shí)進(jìn)行用戶體驗(yàn)設(shè)計(jì)的過程

雖然大多數(shù)設(shè)計(jì)師已經(jīng)建立了自己設(shè)計(jì)移動(dòng)應(yīng)用程序的工作流或設(shè)計(jì)流程，但VR界面的設(shè)計(jì)流程還沒有一個(gè)在全球范圍內(nèi)通行的定義。設(shè)計(jì)你的第一個(gè)VR應(yīng)用程序，你應(yīng)該從邏輯上的第一步開始，即設(shè)定戰(zhàn)略或計(jì)劃。

• VR用戶研究：首先，在你開始考慮構(gòu)建VR之前，你需要考慮你需要?jiǎng)?chuàng)造什么樣的體驗(yàn)。當(dāng)然，沒有一種萬全之策。大多數(shù)民族志研究策略在VR中是完全開放的，包括:客戶訪問、實(shí)地考察、可行性性測(cè)試、檢驗(yàn)標(biāo)準(zhǔn)、模擬練習(xí)、影子練習(xí)、參與者觀察、啟發(fā)式評(píng)估、焦點(diǎn)小組、眼球追蹤、探索性研究和日記研究。
• 線框圖：正如平時(shí)設(shè)計(jì)師所做的那樣，通常情況下我們將經(jīng)歷快速迭代，借助線框圖定義交互和總體布局。
• 視覺設(shè)計(jì)：在此階段，功能和交互已經(jīng)被確定。接著將品牌指導(dǎo)方針應(yīng)用到線框圖中，構(gòu)建一個(gè)美觀的界面。虛擬現(xiàn)實(shí)應(yīng)用程序的設(shè)計(jì)過程不會(huì)發(fā)生巨大的變化，除非考慮到設(shè)計(jì)過程中的可行性問題。

環(huán)境設(shè)定

畫布尺寸：

要將常見的移動(dòng)APP的工作流應(yīng)用于VR UI，首先必須確定一個(gè)合適的畫布大小。

下面是一個(gè)360度的環(huán)境被壓平后的樣子，這種形式稱為等矩投影。在三維虛擬環(huán)境中，這些投影圍繞著一個(gè)球體來模擬真實(shí)世界。

投影的全寬表示水平方向360度和垂直方向180度，我們可以用這個(gè)來定義畫布的像素大?。?600×1800。以大尺寸進(jìn)行設(shè)計(jì)，算得上是個(gè)挑戰(zhàn)，但因?yàn)槲覀冎饕P(guān)注VR應(yīng)用的界面，所以我們只需專注于這個(gè)畫布的其中一部分。

基于Mike Alger對(duì)舒適可視區(qū)域的早期研究，我們可以分離出對(duì)界面呈現(xiàn)有影響的部分。我們需要關(guān)注的區(qū)域是360度環(huán)境的九分之一。它位于等矩形圖像的正中央，大小為1200×600像素。

總結(jié)一下：

• 「360全景視圖」：3600×1800像素
• 「UI視圖」：1200×600像素

拿起紙和筆：在使用軟件之前，先把你的想法記錄在紙上。這種方式快速、廉價(jià)，并且可以幫助你表達(dá)可能需要花費(fèi)數(shù)小時(shí)在軟件上的想法。這一點(diǎn)尤其重要，因?yàn)閺牟輬D到高保真度在3D中比在2D中花費(fèi)更多。

軟件：一些設(shè)計(jì)師會(huì)使用已知的工具比如Sketch，另一些借此機(jī)會(huì)來學(xué)習(xí)使用新工具。重要的是要選擇合適的引擎來創(chuàng)建應(yīng)用程序。如果你正在創(chuàng)建一個(gè)3D游戲，你可以使用Unity或Unreal引擎。C4D和Maya也被廣泛使用，但主要用于復(fù)雜的動(dòng)畫和渲染。

設(shè)計(jì)時(shí)要考慮的原則

文本可讀性：

由于顯示的分辨率，所有漂亮而清晰的UI元素看起來都是像素化的。首先，這意味著文本將很難閱讀，其次，在直線上會(huì)有很大程度的混疊。因此要盡量避免使用大的文本塊和非常詳細(xì)的UI元素。

預(yù)設(shè)閱讀間距：即我們?cè)O(shè)計(jì)的觀看距離。這些屏幕的最佳觀看距離是多少？預(yù)設(shè)的閱讀距離將決定屏幕的大小以及其中內(nèi)容的大小和密度。

單位也很重要。非長(zhǎng)度單位的毫米或dmm（絲米，decimilimeter）可以描述為一米之外的一毫米，所以它是一個(gè)角度單位，當(dāng)它向遠(yuǎn)處擴(kuò)展時(shí)，它只以毫米級(jí)增加。

讓我們看一個(gè)具體的例子：在這個(gè)圖的左上角有一個(gè)用dmm測(cè)量過的屏幕空間布局，所有的UI元素都是用dmm測(cè)量的。它是400×480 dmms高，然后我將這種布局應(yīng)用到三個(gè)獨(dú)立的虛擬屏幕上。

所有這些虛擬屏幕都有不同的預(yù)設(shè)閱讀距離，虛擬屏幕的優(yōu)勢(shì)在于，所有這些屏幕都是用來觀看的，它們對(duì)用戶來說看起來是一樣的，它們有相同的角度大小，文本也一樣易讀，按鈕也一樣可點(diǎn)擊，運(yùn)動(dòng)也一樣。

人體工程學(xué)

當(dāng)我們第一次為VR設(shè)計(jì)時(shí)，想到創(chuàng)造出我們?cè)凇朵撹F俠》(Iron Man)或《少數(shù)派報(bào)告》(Minority Report)等好萊塢大片中看到的那種未來感十足的界面是令人興奮的，但現(xiàn)實(shí)是，那些UI如果使用超過幾分鐘，就會(huì)讓人精疲力盡。

下面的圖表有助于說明運(yùn)動(dòng)區(qū)域的舒適范圍：

我們都曾受到某種低頭族綜合癥的影響（長(zhǎng)時(shí)間低頭看智能手機(jī)會(huì)感到疼痛）。根據(jù)你俯身的距離，不良的姿勢(shì)會(huì)給你的脊椎造成60磅的壓力，這會(huì)導(dǎo)致脊柱和頸部永久性的神經(jīng)損傷。

避免「模擬器眩暈癥」：

虛擬現(xiàn)實(shí)還需要進(jìn)行生理學(xué)層面的考量。就像飛行員在訓(xùn)練中使用的飛行模擬器一樣，虛擬現(xiàn)實(shí)有可能在現(xiàn)實(shí)和視覺運(yùn)動(dòng)線索之間呈現(xiàn)不匹配——當(dāng)你的眼睛認(rèn)為你在運(yùn)動(dòng)，但你的身體沒有運(yùn)動(dòng)。這種不匹配會(huì)產(chǎn)生惡心感，被稱為「模擬器眩暈癥」。

了解虛擬現(xiàn)實(shí)設(shè)計(jì)的生理效應(yīng)，并遵循這些指導(dǎo)原則，對(duì)于讓你的應(yīng)用成功并確保用戶避免模擬器眩暈癥至關(guān)重要。

亮度范圍：

要注意亮度的突然變化，由于屏幕離用戶的眼睛很近，當(dāng)用戶適應(yīng)新的亮度水平時(shí)，從黑暗場(chǎng)景過渡到明亮場(chǎng)景可能會(huì)引起不適。這就如同從一個(gè)黑暗的房間走到陽光下。

按鈕放置：

避免安全按鈕間距過近。當(dāng)安全按鈕較大，彼此間距較遠(yuǎn)時(shí)，其效果更好。

如果多個(gè)較小的按鈕彼此靠近，用戶可能會(huì)不小心單擊錯(cuò)誤的按鈕。相互靠近的小按鈕應(yīng)該需要直接單擊才能激活。

「我們與VR平臺(tái)的互動(dòng)需要盡可能自然和直觀，而不是試圖讓自己適應(yīng)現(xiàn)有技術(shù)支持的有限互動(dòng)?！?/p>

VR 設(shè)計(jì)工具

Sketch：Sketch to VR是一個(gè)素描插件，它使用的是 A-Frame。Sketch to VR插件會(huì)自動(dòng)創(chuàng)建一個(gè)A-Frame網(wǎng)站，但是我們只需要在Sketch中進(jìn)行設(shè)計(jì)就好了。

Google Blocks：使用簡(jiǎn)單的三維幾何來模擬尺度和深度。如果你有一個(gè)Oculus Rift 和 HTC Vive，你可以使用Google Blocks來模擬你的想法。這并不是你最終呈現(xiàn)在用戶面前的東西，而是便于你直觀地感知3D環(huán)境。

Photoshop：我們可以使用像鋼筆和畫筆這樣的核心圖像編輯工具，來繪制三維空間中的元素。

用Sketch設(shè)計(jì)VR應(yīng)用

設(shè)置「360全景模式」

首先創(chuàng)建一個(gè)畫布來表示360度全景視圖。在Sketch中打開一個(gè)新文檔，創(chuàng)建一個(gè)3600×1800像素的畫板，導(dǎo)入文件并將其放在畫布的中間。如果使用自己的等矩形背景，請(qǐng)確保其比例為2:1，并將其大小調(diào)整為3600×1800像素。

設(shè)置畫板

如上所述，「UI 視圖」是「360全景視圖」的裁剪版，只關(guān)注VR界面。在之前的畫板旁邊新建一個(gè)畫板:1200×600像素，復(fù)制背景添加到「360全景視圖」，并把它放在我們的新畫板中間。不要在這一步調(diào)整它!在這里保留一個(gè)裁剪過的背景。

設(shè)計(jì)界面

在「U視圖」畫布上設(shè)計(jì)界面。做示范起見，我們將簡(jiǎn)單地進(jìn)行界面設(shè)計(jì)，并添加一行tile。復(fù)制它，并創(chuàng)建一組水平放置的3個(gè)tile。

合并畫板并導(dǎo)出

將「UI視圖」畫板拖到「360全景視圖」畫板的中間，以PNG格式導(dǎo)出「360 全景視圖」畫板?！窾I視圖」將位于它的頂部。

進(jìn)行VR測(cè)試

打開 GoPro VR播放器，將剛剛導(dǎo)出的「360全景視圖」PNG 拖拽到窗口中。用鼠標(biāo)拖動(dòng)圖像，可以預(yù)覽360度的環(huán)境。

原型設(shè)計(jì)

在這一步，將屏幕組織成流程，在屏幕之間繪制鏈接，并描述每個(gè)屏幕的交互關(guān)系。我們將其稱為APP藍(lán)圖，它將作為項(xiàng)目開發(fā)人員的主要參考。

結(jié)語

作為一名設(shè)計(jì)師，我認(rèn)為應(yīng)當(dāng)開始提高我們的技能，創(chuàng)造設(shè)計(jì)行業(yè)的未來，設(shè)計(jì)師的專業(yè)技能在提高和改善應(yīng)用程序用戶的日常生活方面具有重要作用。在設(shè)計(jì)思維和UX方法論中使用的概念和構(gòu)思方法和先前相差無幾，重點(diǎn)是上面提到的這些新的交互原則。

感謝閱讀！閱讀之后你有什么想法？

參考資料:

https://www.smashingmagazine.com/2017/02/getting-started-with-vr-interface-design/

https://www.forbes.com/sites/quora/2018/02/02/the-difference-between-virtual-reality-augmented-reality-and-mixed-reality/#374bb2702d07

https://blog.marvelapp.com/designing-vr-beginners-guide/

作者：Sourabh Purwar；Jagadeesh Kampara

原文鏈接：https://uxplanet.org/designing-user-experience-for-virtual-reality-vr-applications-fc8e4faadd96

譯者：陳子木

來源：https://www.uisdc.com/designing-ux-for-vr

本文由 @陳子木 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議