2018-8-20 濤濤
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點(diǎn)這里
對于許多設(shè)計(jì)師來說，虛擬現(xiàn)實(shí)（VR）是一個全新且陌生的領(lǐng)域。過去幾年中，我們目睹了虛擬現(xiàn)實(shí)硬件和軟件的爆炸式增長。從體驗(yàn)性上看，虛擬現(xiàn)實(shí)既有小而簡單的也有專業(yè)復(fù)雜的，整體體驗(yàn)差異很大。作為 UX 或 UI 設(shè)計(jì)師，初次接觸 VR 可能會有所畏懼，但不要害怕，在本文中，我們將分享一個設(shè)計(jì) VR 應(yīng)用程序的完整過程，我們希望您可以通過這個案例來開始自己的 VR 設(shè)計(jì)之旅。你不需要成為 VR 的專家；你只需要將你之前的設(shè)計(jì)技能應(yīng)用到一個新領(lǐng)域。最終，經(jīng)過大家的共同努力，我們定可以加速 VR 的發(fā)展以發(fā)揮它的全部潛力。
一般來說，從設(shè)計(jì)者的角度來看，VR 應(yīng)用程序由兩種類型的組件組成：環(huán)境和交互元素。
環(huán)境：您可以將環(huán)境視為您戴上 VR 頭盔時所進(jìn)入的整個世界 ， 比如你身處的虛擬星系或者駕駛過山車飛馳的樂園。
交互元素：界面上影響用戶交互和操控體驗(yàn)的元素合集。
根據(jù)這兩個組件的復(fù)雜性，所有 VR 應(yīng)用程序都可以沿兩個軸定位。
在左上象限中的 VR 應(yīng)用有類似模擬器的東西，例如過山車的 VR 應(yīng)用，這種應(yīng)用具有完全成形的環(huán)境，但根本沒有交互。你只是被鎖在了車?yán)铩?
在右下角的象限中，應(yīng)用程序具有一個更好的界面，但比較少或沒有3D環(huán)境。三星的 Gear VR 主屏就是一個很好的例子。
設(shè)計(jì)場所和景觀等虛擬環(huán)境需要熟練使用3D建模工具，許多設(shè)計(jì)師平時無法接觸到這些元素。但是，UX 和 UI 設(shè)計(jì)人員有很大的機(jī)會將他們已有的技能應(yīng)用于設(shè)計(jì)虛擬現(xiàn)實(shí)的用戶界面。
我們所做的第一個完整 VR 的 UI 設(shè)計(jì)是 The Economist 的應(yīng)用程序，與 VR 制作工作室 Visualize 合作。我們做設(shè)計(jì)，Visualize 創(chuàng)建內(nèi)容并開發(fā)應(yīng)用程序。
我們在之后文章中將此應(yīng)用作為一個工作示例，現(xiàn)在我們將介紹設(shè)計(jì) VR 應(yīng)用程序的方法，然后再介紹設(shè)計(jì) VR 界面的細(xì)節(jié)。您可以從 Oculus 網(wǎng)站下載Gear VR 的 Economist 應(yīng)用程序。
盡管大多數(shù)設(shè)計(jì)師已經(jīng)熟悉了設(shè)計(jì)移動應(yīng)用程序的工作流程，但還不太清楚設(shè)計(jì) VR 界面的流程。當(dāng)面對第一個VR應(yīng)用程序設(shè)計(jì)項(xiàng)目時，我們首先要做的是合乎邏輯。
傳統(tǒng)工作流程到全新領(lǐng)域
當(dāng)我們第一次使用三星的 Gear VR 時，我們注意到它與傳統(tǒng)移動應(yīng)用有很多相似之處。VR 應(yīng)用程序與傳統(tǒng)應(yīng)用程序有著相同的工作流程：幫助用戶與界面進(jìn)行交互。
現(xiàn)在請記住。鑒于與傳統(tǒng)應(yīng)用的相似性，設(shè)計(jì)師花費(fèi)數(shù)年時間改進(jìn)的久經(jīng)考驗(yàn)的移動應(yīng)用工作流程不會浪費(fèi)，這些流程仍然可用于制作 VR UI。這讓你比你想象的更接近 VR！
在如何設(shè)計(jì) VR 界面之前，讓我們回過頭來看看傳統(tǒng)移動應(yīng)用的設(shè)計(jì)過程。
1. 線框
首先，我們將進(jìn)行快速迭代，定義交互和總體布局。
2. 視覺設(shè)計(jì)
在此階段，功能和交互已經(jīng)完成。我們把視覺規(guī)范與設(shè)計(jì)應(yīng)用于線框圖，并制作出漂亮的界面。
3. 設(shè)計(jì)文檔
在這里，我們將屏幕組織成流程，繪制屏幕之間的鏈接并描述每個屏幕的交互。我們將此稱為應(yīng)用程序的設(shè)計(jì)文檔，它將被用作開發(fā)人員的主要參考。
現(xiàn)在，我們?nèi)绾螌⒋斯ぷ髁鞒虘?yīng)用于虛擬現(xiàn)實(shí)的設(shè)計(jì)當(dāng)中呢？
1. 畫布的尺寸
最簡單的問題可能也是最具挑戰(zhàn)性的。面對360度的畫布，人們可能很難知道從哪里開始。事實(shí)證明，UX 和 UI 設(shè)計(jì)者只需要關(guān)注整個空間的某個部分即可。
我們花了幾周時間試圖弄清楚什么樣的畫布尺寸適用于 VR 設(shè)計(jì)。當(dāng)您使用移動應(yīng)用程序時，畫布大小取決于設(shè)備的大小：iPhone 6為1334×750像素，Android大約1280×720像素。
要將移動應(yīng)用程序工作流應(yīng)用于 VR UI，首先必須確定合適的畫布大小。
以下是扁平化時360度環(huán)境的樣子。這種視圖叫做等角矩形投影。在3D虛擬環(huán)境中，這些投影圍繞球體纏繞，以模仿現(xiàn)實(shí)世界。
整個投影的水平寬度是360度，垂直180度。我們可以用它來定義畫布的像素大小：3600×1800。
使用這么大的尺寸可能是一個挑戰(zhàn)。但因?yàn)槲覀冎饕獙?VR 應(yīng)用程序的界面設(shè)計(jì)感興趣，所以我們可以專注于這個畫布的一部分。
基于邁克·阿爾格（Mike Alger）對舒適觀察區(qū)域的早期研究，我們可以找出一個合適的部分來展示界面。
感興趣的區(qū)域占360度環(huán)境的九分之一。它位于圖像的中心，大小為1200×600像素。
讓我們總結(jié)一下：
「 360度視圖 」：3600×1800像素
「 UI視圖 」：1200×600像素
「UI視圖」畫布有助于將我們的注意力集中在我們正在制作的界面上，并使設(shè)計(jì)流程變得更加容易。
同時也必須使用「360度視圖」在 VR 環(huán)境中的預(yù)覽界面。此外為了獲得真實(shí)的比例感，使用 VR 頭盔測試界面也是必要的。
△ 使用Avocode，您可以輕松直觀地比較設(shè)計(jì)
在開始之前，我們需要以下工具：
1. sketch
我們將使用 Sketch 來設(shè)計(jì)我們的界面和用戶流程。如果您沒有，可以下載試用版。Sketch 是我們首選的界面設(shè)計(jì)軟件，但如果您使用 Photoshop 或其他任何軟件更舒服，也沒問題。
2. GoPro VR Player
GoPro VR Player 是一款360度內(nèi)容查看器。它由 GoPro 提供，是免費(fèi)的。我們將使用它來預(yù)覽我們的設(shè)計(jì)。
3. Oculus Rift
Oculus Rift 連接到 GoPro VR 播放器，這將使我們能夠測試我們的設(shè)計(jì)。
在本節(jié)中，我們將介紹如何設(shè)計(jì) VR 界面。我們將一起設(shè)計(jì)一個簡單的界面，最多花費(fèi)5分鐘時間。
下載源文件：https://pan.baidu.com/s/1WUUwNLlTJkG82Hxdofaqzg 密碼：09vt，其中包含預(yù)設(shè)的 UI 元素和背景圖像。如果你想使用自己的設(shè)計(jì)文件，那也是可以的。
1. 設(shè)置「360度視圖」
首先要做的事情，讓我們創(chuàng)建360度視圖的畫布。在 Sketch 中打開一個新文檔，并創(chuàng)建一個畫板：3600×1800像素。
導(dǎo)入文件 background.jpg，并將其放在畫布的中間。如果您使用自己的背景文件，請確保其比例為2：1，并將其大小調(diào)整為3600×1800像素。
2. 設(shè)置畫板
如上所述，「UI view」是「360 view」的裁剪版本，我們僅關(guān)注 VR 界面。
我們創(chuàng)建一個新畫板：1200×600像素。然后，復(fù)制畫板到「360 view」中，并將其放在畫板的中間。不要刪除「360 view」畫板，我們同時保留著兩個畫板，以后會用到它們。
3. 設(shè)計(jì)界面
我們將在「UI View」畫布上設(shè)計(jì)我們的界面。我們會盡量簡單一些，首先在視圖上添加一些圖塊。您可以使用 tile.png 文件將其拖到 UI 視圖的中間。
復(fù)制它，并創(chuàng)建一行三個圖塊。
使用 kickpush-logo.png 文件，并將其放在圖塊上方。
4. 合并畫板
現(xiàn)在來看看有趣的東西。確保「UI view」畫板位于左側(cè)圖層列表的「360view」畫板上方。
將「UI view」畫板拖動到「360 view」畫板的中間。將「360 View」畫板導(dǎo)出為 PNG；「UI view」將位于其上方。
5. 在VR中測試它
打開 GoPro VR Player，并將剛剛導(dǎo)出的「360 View」PNG 拖到窗口中。使用鼠標(biāo)拖動圖像以預(yù)覽360度環(huán)境。
我們完成了！是不是很簡單？
如果您的機(jī)器上安裝了 Oculus Rift，則 GoPro VR 播放器應(yīng)該可以檢測到它并允許您使用 VR 設(shè)備預(yù)覽圖像。根據(jù)您的配置，您可能需要在 MacOS 中做一些顯示設(shè)置。
1. 低分辨率
VR 頭盔的分辨率非常糟糕？這不完全正確，其實(shí)它相當(dāng)于手機(jī)的分辨率。但是，考慮到設(shè)備距離您的眼睛5厘米，顯示器看起來并不清晰。
為了獲得清晰的 VR 體驗(yàn)，我們需要一個8K的顯示屏，這是一個15,360×7680像素的顯示屏。相信這種設(shè)備早晚會普及。
2. 文本可讀性
由于顯示器的分辨率較低，會導(dǎo)致所有精美的 UI 元素都會看起來像素化。這意味著，首先，文字難以閱讀，其次，直線部分會出現(xiàn)鋸齒。所以盡量避免使用大段文字和特別復(fù)雜的 UI 元素。
1. 設(shè)計(jì)文檔
還記得我們的移動應(yīng)用中的流程圖嗎？我們現(xiàn)在將這種做法也應(yīng)用到 VR 界面。用我們已經(jīng)做好的界面組織成一個易于理解的流程圖，這非常有益于開發(fā)人員理解我們設(shè)計(jì)的應(yīng)用程序的整體架構(gòu)。
2. 動效設(shè)計(jì)
設(shè)計(jì)一個漂亮的 UI 是一回事，但讓他動起來又是另外一回事了。我們決定以二維視角來處理它。
基于我們的 Sketch 文件，我們使用 Adobe After Effects 和 Principle 為界面設(shè)計(jì)動畫。雖然輸出的不是真實(shí)的3D體驗(yàn)，但它足以指導(dǎo)開發(fā)團(tuán)隊(duì)了，且能幫助我們的協(xié)作者在流程的早期階段了解我們的愿景。
△ 你剛剛設(shè)計(jì)了第一個 VR UI。真棒！
我們知道你在想什么，「這很酷，但真實(shí)的 VR 應(yīng)用程序會復(fù)雜的多。」是的，當(dāng)然是。但重點(diǎn)在于我們可以在多大程度上將我們當(dāng)前的 UX 和 UI 的經(jīng)驗(yàn)應(yīng)用于這種新媒介？
1. 新的交互體驗(yàn)
一些 VR 體驗(yàn)非常依賴虛擬環(huán)境，然而傳統(tǒng)界面的確已經(jīng)不是用戶控制應(yīng)用程序的最佳方式了。在這種情況下，您可能希望用戶直接與環(huán)境本身進(jìn)行交互。
想象一下，你正在為一家豪華旅行社制作應(yīng)用程序。您希望以最生動的方式將用戶轉(zhuǎn)移到潛在的度假目的地。因此，您邀請用戶佩戴耳機(jī)并在時髦的切爾西辦公室開始體驗(yàn)。
要從辦公室轉(zhuǎn)移至目的地，用戶需要選擇他們想去的地方。他們可以拿起一本旅行雜志，輕輕松松瀏覽它們，直到它們被某一頁吸引。或者，桌面上可能會有一系列有趣的物品，根據(jù)用戶選擇的不同，將用戶帶到不同的位置。
這確實(shí)很酷，但也有一些缺點(diǎn)。為了達(dá)到完美的效果，你需要一個更先進(jìn)的帶手持控制器的 VR 頭盔。不過，像這樣的應(yīng)用程序要比傳統(tǒng)的應(yīng)用程序花費(fèi)更多的精力來開發(fā)。
2. 革命萬歲
現(xiàn)實(shí)情況是，對于大多數(shù)公司而言，這些沉浸式的體驗(yàn)在商業(yè)上還不可行。除非您擁有幾乎無限的資源，例如 Valve 和 Google，否則創(chuàng)建類似于上述體驗(yàn)的產(chǎn)品可能成本太高，風(fēng)險(xiǎn)太大且過于耗時。
這種體驗(yàn)非常出色，可以帶你到媒體和技術(shù)的最前沿，但通過新媒體將產(chǎn)品推向市場并不太好。
通常，當(dāng)一種新形式出現(xiàn)時，它會是一個小眾產(chǎn)品。隨著時間的推移，成本的下降，有足夠的人去學(xué)習(xí)和市場的資本注入，它就會成為應(yīng)用廣泛的產(chǎn)品。
隨著 VR 頭盔變得越來越普及，將會有越來越多的公司將 VR 融入他們與用戶的互動當(dāng)中。
從我們的角度看，相比于手機(jī)、平板，VR 用戶界面本質(zhì)上是更直觀的，并且更接近用戶，隨著科技和市場的發(fā)展，VR 將會帶來更大的價(jià)值。
藍(lán)藍(lán)設(shè)計(jì)( m.ocunn.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.ocunn.cn