前言：實踐指導(dǎo)性的內(nèi)容對于剛開始了解的人來說很有幫助，作者想要將傳統(tǒng)的UI或UX的設(shè)計流程和方法論應(yīng)用到VR設(shè)計這個觀點值得關(guān)注滨溉，同時作者也發(fā)表了一些對于以后的VR從業(yè)者什湘、公司和未來領(lǐng)域的發(fā)展觀點。
下面是譯文：
虛擬領(lǐng)域?qū)τ谠S多設(shè)計師而言是一個未知領(lǐng)域晦攒。在過去的幾年里闽撤，我們見證了VR（虛擬現(xiàn)實，virtual reality）硬件和應(yīng)用的繁榮脯颜。VR體驗從平凡變得令人驚奇哟旗，體驗的復(fù)雜度和效用都產(chǎn)生了巨大的變化。
對于一個ux或者ui設(shè)計師，踏入VR的第一步是令人怯步的闸餐。我們知道饱亮，因為我們也經(jīng)歷過這個階段。但是不要害怕舍沙！在這篇文章里近尚，我們將分享一個設(shè)計VR apps的過程，希望你們能通過這個開始你們自己的VR設(shè)計之路场勤。你無需成為VR領(lǐng)域中的專家戈锻，你只需要愿意將你的技能運(yùn)用到一個全新的領(lǐng)域。最終當(dāng)所有群體都一同為之努力時和媳，我們將加速VR的發(fā)展格遭，更快的發(fā)揮出它所有的潛能。
（這里是一部分延展閱讀的文章鏈接留瞳，懶得翻譯啦拒迅。）
有哪些類型的VR Apps
從一個設(shè)計師的角度而言，VR app是主要有兩種類型的元素構(gòu)成：環(huán)境（envionments）和界面（interfaces）她倘。
你可以把環(huán)境想象成當(dāng)你帶上VR裝置時進(jìn)入的世界——可能是你發(fā)現(xiàn)自己正處于的某個虛擬星球璧微，或者也可能是當(dāng)你乘坐過山車時的某個視角。
界面則是一套元素硬梁，能讓用戶與之交互駕馭特定的環(huán)境或者操控他們的體驗前硫。所有的VR apps都可以根據(jù)這兩個因素的復(fù)雜程度，沿著兩個軸安置荧止。
在左上方的象限里是一些類似模擬器的產(chǎn)品屹电，好比上面提到的過山車體驗。它們擁有完全成形的環(huán)境跃巡，但是完全沒有界面危号。你可以簡單的封鎖在里面尋開心。
在相反的象限里是形成了界面但是只有一點甚至沒有的環(huán)境素邪。三星Gear VR 主頁屏幕就是一個很好的例子外莲。
設(shè)計類似的場所和風(fēng)景畫的環(huán)境需要熟練掌握3D建模工具，這些元素對許多設(shè)計師來說有些鞭長莫及兔朦。
然而偷线，對ux或者ui設(shè)計師有一些絕佳的機(jī)會去應(yīng)用它們的專業(yè)技能去為了VR（或者簡單的說就是VR UIs）設(shè)計用戶界面。
我們做的第一個完整VR UI設(shè)計就是為了經(jīng)濟(jì)學(xué)人（The Economist）設(shè)計了一個app烘绽，同VR產(chǎn)品工作室Visualise合作建立的淋昭。我們完成了設(shè)計的部分，而Visualise工作室創(chuàng)造了具體內(nèi)容并開發(fā)了這個app安接。
在進(jìn)入為VR設(shè)計界面的本質(zhì)前翔忽，我們在下一個部分將會使用這個作為一個工作案例英融，展示一種設(shè)計VR apps的方法。
你可以從Oculus網(wǎng)站下載經(jīng)濟(jì)學(xué)人app（for Gear VR）歇式。
VR UI設(shè)計的過程
當(dāng)大部分的設(shè)計師們在思考它們設(shè)計移動端apps的工作流程的時驶悟，設(shè)計VR界面的過程仍有待定義。所以當(dāng)?shù)谝粋€VR app設(shè)計項目敲門時材失，我們邏輯上的第一個步驟是設(shè)計過程痕鳍。
將傳統(tǒng)的工作流程應(yīng)用到新的領(lǐng)域
當(dāng)我們第一次試玩三星Gear VR時，我們留意到了與傳統(tǒng)的移動端apps的相似之處龙巨。VR apps產(chǎn)品界面決定于和傳統(tǒng)apps一樣的基本變化：用戶同界面發(fā)生交互笼呆，幫助用戶瀏覽頁面。我們在這里先簡要提一下旨别，但是請先將這個觀點保存在你的腦海里空执。
鑒于和傳統(tǒng)apps的相似性根暑，設(shè)計師們花費了數(shù)十年提煉的，通過長期廣泛的應(yīng)用而被證明有效的移動端app工作流程是不會被浪費的属提，而且可以運(yùn)用來設(shè)計VR UIs冻晤。你遠(yuǎn)比你想象中的更加接近VR apps設(shè)計侨艾。
在描述如何設(shè)計VR界面前拟淮，讓我們先后退一步疯溺，并瀏覽一次傳統(tǒng)移動端app的設(shè)計流程。
1.線框圖（WIREFRAMES）
首先绞铃，我們通過快速迭代镜雨，定義交互和基本布局。
2.視覺設(shè)計（VISUAL DESIGN）
在這個階段憎兽，能夠使用一些特征和互動冷离。品牌準(zhǔn)則被運(yùn)用在線框圖，一個美觀的界面成功建立纯命。
3.藍(lán)圖（BLUEPRINT）
在這里，我們將所有界面組織成為流程圖痹栖，畫出界面之間的聯(lián)系并且描述每一個界面的交互細(xì)節(jié)亿汞。我們可以稱這個為app的藍(lán)圖，它將為項目工作的開發(fā)者的重要參考揪阿。
現(xiàn)在疗我，我們要如何將這個工作流程運(yùn)用到VR呢？
（這里有本書的小廣告南捂，不翻譯了吴裤。）
準(zhǔn)備
畫布大小
最簡單的問題可以是最有挑戰(zhàn)的。面對著360度的畫布溺健，設(shè)計師可能會發(fā)現(xiàn)從哪里開始是一件非常困難的事情麦牺。原來ux和ui設(shè)計師只需要專注在所有空間里的一個確定的部分。
我們花費了數(shù)十周試圖去思考什么樣的畫布大小對VR而言是能講得通的。當(dāng)你為一個移動app工作時剖膳，畫布大小是由于設(shè)備大小決定的魏颓，iPhone6使用1334 x 750 pixels的畫布大小，而安卓大致上使用1280 x 720 pixels的畫布大小吱晒。
為了將移動端app工作流程應(yīng)用到VR UIs甸饱，首先你需要去思考多大的畫布大小是有意義的。
下面是一個360度的環(huán)境平面狀態(tài)看起來的樣子仑濒。這種表現(xiàn)被叫做等距柱狀投影圖（Equirectangular Projection）叹话。在3D虛擬環(huán)境中，這些投影圖被包裹成一個球體來描述真實世界墩瞳。
投影的全部寬度水平為360度渣刷，垂直水平為180度。我們可以通過這個定義畫布的像素大写Ｖ颉：3600 x 1800 pixels辅柴。
在一個如此巨大的尺寸上工作可以說是一個挑戰(zhàn)。但是因為我們首要會對VR apps的界面面貌感興趣瞭吃，我們可以把精力專注在畫布中的某個細(xì)節(jié)上碌嘀。
在Mike Alger對舒適的觀賞區(qū)早期研究的基礎(chǔ)上，我們可以分離出讓界面有意思的部分歪架。
感興趣的區(qū)域位于360度環(huán)境的九分之一股冗。它的位置就在等量的圖像的中心，是1200×600像素大小和蚪。
讓我們總結(jié)一下：
“360視圖“: 3600 × 1800 pixels
“UI視圖“: 1200 × 600 pixels
測試
使用兩個畫布一個屏幕的原因就是測試止状。“UI視圖”畫布可以幫助我們專注于我們正在制作的界面攒霹，并且使設(shè)計流程更加容易怯疤。
然而，“360視圖”用于在虛擬現(xiàn)實環(huán)境中預(yù)覽界面催束。要想獲得真正的比例感集峦，通過VR設(shè)置測試接口是必不可少的。
工具
在我們開始演練之前，這里有一些我們需要的工具：
（每個工具的詳細(xì)介紹就不在這里翻譯了速妖。）
VR界面的設(shè)計流程
在本節(jié)中高蜂，我們通過運(yùn)行一個關(guān)于如何設(shè)計一個VR界面的簡短教程。我們將一起設(shè)計一個簡單的界面罕容，這最多只需要五分鐘的時間备恤。
下載預(yù)設(shè)包稿饰，其中包含預(yù)先設(shè)置好大小的UI元素和背景圖像。如果你想使用你自己的設(shè)置烘跺，那就試試吧湘纵，這不會是個問題的。
1.建立“360視圖”
先做重要的事滤淳。創(chuàng)建一個360度視圖的畫布梧喷。在sketch中打開一個新的文檔，創(chuàng)建artboard（大小為3600 x 1800 pixels）脖咐。
導(dǎo)入名為background.jpg的文件铺敌，將它放置在畫布的中心。如果你使用自己的等量背景圖屁擅，確保背景圖的比例是2:1偿凭，并調(diào)整其大小為3600×1800 pixels。
2.建立Artboard
如上所述派歌，“UI視圖”是一個裁剪版本的“360視圖”弯囊，只專注于虛擬現(xiàn)實界面。
緊隨前一個創(chuàng)建一個新的Artboard：1200×600像素胶果。然后匾嘱，復(fù)制我們剛加入到“360視圖”的背景圖，并且放置在新的畫板中心早抠。不要調(diào)整大婿印！我們在這里需要一個背景圖的裁剪版本蕊连。
3.設(shè)計界面
我們將在“UI視圖”畫布上設(shè)計界面悬垃。考慮到這個練習(xí)甘苍，我們將事情簡單化尝蠕，并添加一排titles。如果你想要偷懶羊赵，只需要從預(yù)設(shè)文件包里把名為tile.png的文件拖到UI視圖的中間趟佃。
復(fù)制它，并在一行上排列3個title昧捷。
將kickpush-logo.png從預(yù)設(shè)包里拖拉放置到title上合適的位置。
看起來不錯罐寨，對嗎靡挥？
4.合并Artboards并輸出
現(xiàn)在有趣的工作來了。確毖炻蹋“UI視圖”的Artboard在“360視圖”的Artboard左邊的圖層列表跋破。
將“UI視圖”的Artboard拖到“360視圖”的Artboard的中間簸淀。將“360視圖”的Artboard作為PNG輸出，“UI視圖”將會在“360視圖”的上面毒返。
5.在VR中測試
打開GoPro VR Player將你剛才輸出的“360視圖”的PNG文件拖到窗口中租幕。通過鼠標(biāo)去拖拉圖像以預(yù)覽360度環(huán)境。
這就完成了拧簸，比你想象中一定程度的更簡單劲绪，對嗎？
如果你擁有設(shè)置好Oculus Rift（一款為電子游戲設(shè)計的頭戴式顯示器）的機(jī)器盆赤，然后GoPro VR Player應(yīng)該能檢測并且讓你能夠使用VR設(shè)備去預(yù)覽圖像贾富。根據(jù)你的配置，你可以用過MacOS系統(tǒng)設(shè)置的顯示器隨便“胡鬧玩弄”了牺六。
技術(shù)層面的考慮
低分辨率
VR頭盔的分辨率相當(dāng)差颤枪。嗯，這并不完全正確：它和你手機(jī)的分辨率差不多淑际。然而畏纲，考慮到這個設(shè)備離你的眼睛只有5厘米，這個顯示器看起來沒有那么差春缕。
如果要得到一個清晰的虛擬現(xiàn)實體驗盗胀，我們每只眼睛需要一個8K的顯示器。這會是一個15360×7680 pixel的顯示器淡溯。我們目前離這個目標(biāo)還很遠(yuǎn)读整，但我們終究會實現(xiàn)。
文本的可讀性
因為顯示器的分辨率咱娶，所有你制作的精美“脆弱”UI元素將會看起來更像素化米间。這意味著，首先膘侮，文本將難以閱讀屈糊，其次，將會在直線出現(xiàn)高水平的混疊琼了。請盡量試圖避免使用大塊文本和高精細(xì)的UI元素逻锐。
最后的修正
藍(lán)圖
還記得我們移動應(yīng)用程序設(shè)計過程中的藍(lán)圖嗎？我們已經(jīng)將這種做法應(yīng)用到VR界面雕薪。使用UI視圖昧诱，我們把流程映射和組織成為一個可理解的藍(lán)圖，對于開發(fā)者去了解我們設(shè)計的app的整體架構(gòu)是理想的所袁。
動作設(shè)計（MOTION DESIGN）
設(shè)計一個美麗的UI是一件事盏档，但是展示如何使它富有生機(jī)活力就是另一件事了。曾經(jīng)有一次燥爷，我們決定用一種二維透視的方法去著手處理蜈亩。
使用Sketch設(shè)計懦窘，我們通過Adobe After Effects賦予界面生命。雖然結(jié)果不是一個3D的經(jīng)驗稚配，但是被用來作為發(fā)展團(tuán)隊的指導(dǎo)方針畅涂，并幫助我們的客戶了解我們在這個過程早期階段的愿景。
我們知道你在想什么愤惰，雖然你可能覺得“這很酷苇经，但VR app遠(yuǎn)遠(yuǎn)比這個更加復(fù)雜”。但問題是宦言，我們可以將我們目前UI和UX的實踐應(yīng)用到這種新的媒體到什么程度扇单？
VR UIs能走多遠(yuǎn)？
INTER-YOUR-FACES
一些VR經(jīng)驗很大程度上依賴于虛擬環(huán)境奠旺，以至于對用戶而言蜘澜，安置一個傳統(tǒng)方式的界面可能不是最佳的控制app的方式。在這種情況下响疚，您可能希望用戶直接與環(huán)境本身進(jìn)行交互鄙信。
想象一下你正在為一個豪華旅行社制作一個app。你想盡可能的用最生動的方式把潛在的度假勝地傳送給用戶忿晕。所以你邀請用戶戴上頭盔装诡，并且開始在你的時髦的切爾西辦公室進(jìn)行體驗。
想要要從辦公室過渡到一些遙遠(yuǎn)的地方践盼，用戶需要選擇他們想去的地方鸦采。他們可以拿起一本旅行雜志，翻閱它咕幻，直到他們登上某個吸引人的頁面渔伯。或者可能在桌子上集合了很多有趣的對象肄程，取決于用戶挑選哪一個對象锣吼，將用戶吸引到不同的地方。
這肯定很酷蓝厌，但也會有一些缺點玄叠。為了得到充分的效果，你需要一個更先進(jìn)的擁有手持控制器的VR頭盔拓提。此外诸典，對比在傳統(tǒng)app界面里一系列被很好展示了的選擇，像這樣的app需要相當(dāng)多的努力去開發(fā)崎苗。
革命萬歲
現(xiàn)實是這些身臨其境的體驗對于大多數(shù)公司在商業(yè)上是不可行的狐粱。除非你擁有大量幾乎沒有限制的資源，比如Valve和Google胆数，創(chuàng)造一個像上面描述的體驗可能會太昂貴肌蜻，太冒險而且太費時。
這種體驗對炫耀在媒體或者技術(shù)的前沿是聰明的必尼，但是想要通過這個新的媒介帶領(lǐng)你的產(chǎn)品進(jìn)入市場就不是那么明智了蒋搜。可訪問使用的能力才是重點判莉。
通常情況下豆挽，當(dāng)一個新的格式出現(xiàn)的時候，它會被早期使用者（世界上的創(chuàng)造者和創(chuàng)新者）推到極限券盅。隨著時間的推移帮哈，同時伴隨足夠的學(xué)習(xí)和投資，它逐漸變得能更廣泛被潛在用戶使用锰镀。
隨著VR頭盔變得越來越普遍娘侍，公司們將開始尋找機(jī)會整合VR融入到他們與客戶接觸的方式中。
從我們的角度來看泳炉，具備直觀UIs的VR apps意味著憾筏，UIs更接近人們已習(xí)慣于用他們的服飾、手機(jī)花鹅、平板電腦和電腦氧腰，對于大多數(shù)公司這會讓VR成為一個可承受并且值得的投資，并追求這個投資刨肃。
是時候上船（開始VR設(shè)計）了
我們希望我們通過這篇文章已經(jīng)使VR空間有點不太可怕了古拴，并且希望能啟發(fā)你開始設(shè)計自己的VR項目。
有人說之景，如果你想快速旅行斤富，那么獨自去。但如果你想旅行得更遠(yuǎn)锻狗，那么就和同伴一起出發(fā)满力。而我們想遠(yuǎn)行。在Kickpush轻纪，我們認(rèn)為每個公司總有一天會有一個虛擬現(xiàn)實的應(yīng)用程序油额，就像現(xiàn)在每個公司都有一個移動網(wǎng)站（或者是應(yīng)該有，天知道這都是2017了）刻帚。
所以潦嘶，我們正在建設(shè)一個飛船，通過世界各地的設(shè)計師們共同努力崇众，大膽的進(jìn)入一個之前沒有設(shè)計師到達(dá)過的領(lǐng)域掂僵。越早為公司有意義的實現(xiàn)VR apps航厚，整個生態(tài)系統(tǒng)就會越快繁榮。
數(shù)字產(chǎn)品的設(shè)計師下一個挑戰(zhàn)是更復(fù)雜的應(yīng)用和處理其他通過控制器輸入的數(shù)據(jù)類型锰蓬。要著手解決這個問題幔睬，我們需要強(qiáng)大的原型工具，能夠讓我們快速和輕松的創(chuàng)建和測試設(shè)計芹扭。我們將寫一篇后續(xù)文章麻顶，關(guān)注一些早期嘗試這樣做，和一些正在開發(fā)中的新工具舱卡。
原文地址：https://www.smashingmagazine.com/2017/02/getting-started-with-vr-interface-design/
