【譯文】VR UI設(shè)計(jì)案例學(xué)習(xí)

2016-10-9    資深UI設(shè)計(jì)者

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里 

最近,我在一個(gè)安卓VR app項(xiàng)目當(dāng)中負(fù)責(zé)界面的設(shè)計(jì)開(kāi)發(fā)工作。對(duì)我個(gè)人來(lái)說(shuō),這是一片從未涉足過(guò)的全新領(lǐng)域,因此感到無(wú)比興奮,并希望將自己一路上所學(xué)到的經(jīng)驗(yàn)分享給各位,同時(shí)也想通過(guò)這種形式對(duì)自己的一些設(shè)計(jì)方法和解決方案進(jìn)行總結(jié)。

為了使內(nèi)容結(jié)構(gòu)更加清晰合理,并更具實(shí)戰(zhàn)參考性,我參考了IDEO的設(shè)計(jì)思維理論、Toni Parisi所著的Learning Virtual Reality一書(shū)(以及更多VR相關(guān)書(shū)籍),還有來(lái)自UX Clan的The Weapon for Digital Product Jedi一文,并決定將本文話題聚焦在整個(gè)設(shè)計(jì)流程當(dāng)中的以下幾個(gè)階段:

  • 探索與研究
  • 技術(shù)需求與局限
  • 腳本、信息架構(gòu)、功能與內(nèi)容
  • 草圖
  • 界面原型
  • GUI設(shè)計(jì)

探索與研究

隨著技術(shù)與應(yīng)用理念的不斷成熟,VR將有可能成為我們?nèi)粘I畹闹匾M成部分,并在以下這些領(lǐng)域當(dāng)中帶來(lái)令人激動(dòng)的全新體驗(yàn)?zāi)J剑?

視頻游戲

最為典型的應(yīng)用領(lǐng)域。當(dāng)你和人們說(shuō)起VR時(shí),多數(shù)人立刻會(huì)想到游戲 – 深度的沉浸感,忘我的全身心參與其中 – 這些體驗(yàn)需求使開(kāi)發(fā)者、游戲主機(jī)及周邊設(shè)備廠商們望眼欲穿??梢钥隙?,如今多數(shù)的VR團(tuán)隊(duì)都渴望在這一領(lǐng)域當(dāng)中分得一塊蛋糕。

社交

在VR技術(shù)的推動(dòng)下,用戶自主創(chuàng)建并互通互動(dòng)的虛擬世界同樣可以成為極具真實(shí)感與自由度的全新社交舞臺(tái)。諸如High Fidelity(由Second Life的創(chuàng)始人Philip Rosedale創(chuàng)建)、AltSpace VR以及舊金山灣區(qū)的一些創(chuàng)業(yè)公司已經(jīng)開(kāi)始在這個(gè)領(lǐng)域當(dāng)中發(fā)力了。

教育

3D化的內(nèi)容呈現(xiàn)方式一直都是互動(dòng)式教學(xué)當(dāng)中的重要手段。結(jié)合VR技術(shù)帶來(lái)的沉浸感及虛擬交互體驗(yàn),學(xué)習(xí)過(guò)程將充滿實(shí)踐性和趣味性,從而更加卓有成效。

生產(chǎn)力

目前,在某些領(lǐng)域當(dāng)中,已經(jīng)有一些研究者和小型公司開(kāi)始探索如何將VR作為生產(chǎn)工具來(lái)代替?zhèn)鹘y(tǒng)的桌面設(shè)備了??梢栽囍O(shè)想一下在完全虛擬的辦公環(huán)境當(dāng)中自由操作虛擬工具、處理工作內(nèi)容的情景。

觀光

高質(zhì)量的360°全景影像非常引人入勝,能夠幫助用戶簡(jiǎn)單快捷的實(shí)現(xiàn)觀賞體驗(yàn),足不出戶,逛遍天下。

建筑與房產(chǎn)

這些行業(yè)當(dāng)中的先行者已經(jīng)開(kāi)始試驗(yàn)VR技術(shù)的運(yùn)用了,包括拍攝全景影像以及構(gòu)建可交互的虛擬建筑空間等等。影像的形式適合于向客戶呈現(xiàn)已有的產(chǎn)品,而虛擬空間則更加適用于在規(guī)劃階段演示復(fù)雜的設(shè)計(jì)方案。

現(xiàn)場(chǎng)直播

VR視頻將成為音樂(lè)會(huì)、新聞現(xiàn)場(chǎng)及其他直播場(chǎng)景的重要傳播形式。就在不久之前,Paul McCartney、Jack White等樂(lè)人已經(jīng)通過(guò)這種形式來(lái)轉(zhuǎn)播自己的現(xiàn)場(chǎng)表演了。

網(wǎng)頁(yè)瀏覽

Mozilla已經(jīng)開(kāi)始向他們的瀏覽器(Firefox)當(dāng)中添加VR支持能力,Google方面也是同樣。除了技術(shù)方面的研究,Mozilla同時(shí)也在對(duì)VR當(dāng)中的網(wǎng)頁(yè)導(dǎo)航模式及頁(yè)面展示方式進(jìn)行探索。

更多專業(yè)應(yīng)用

VR技術(shù)的巨大潛力還將體現(xiàn)在諸多領(lǐng)域,包括軍事訓(xùn)練、醫(yī)學(xué)培訓(xùn)與診療、工程、設(shè)計(jì)等等。

你可以在Within.in了解到更多更具體的VR應(yīng)用案例。

技術(shù)需求與局限

我們的產(chǎn)品在總體形式上會(huì)像YouTube和Vimeo那樣為用戶提供VR視頻服務(wù);視頻內(nèi)容本身會(huì)按照類別與標(biāo)簽進(jìn)行組織。

【譯文】VR UI設(shè)計(jì)案例學(xué)習(xí)-IAMUE-交互設(shè)計(jì)學(xué)堂

基于產(chǎn)品自身的目標(biāo)及其輸入、輸出等方面的特性,我們?cè)谥种谱鳟a(chǎn)品原型之前,首先對(duì)實(shí)現(xiàn)產(chǎn)品所需的技術(shù),包括可能遇到的瓶頸和局限,以及有可能產(chǎn)生的潛在問(wèn)題進(jìn)行了充分的預(yù)研,使設(shè)計(jì)師在接下來(lái)制定設(shè)計(jì)決策的時(shí)候能夠更加準(zhǔn)確和。

信息架構(gòu)、交互腳本、功能與內(nèi)容

這個(gè)階段的目標(biāo)包括梳理信息架構(gòu),制定交互腳本,對(duì)每個(gè)界面的功能與內(nèi)容進(jìn)行定義描述。所產(chǎn)出的文檔可以為整個(gè)項(xiàng)目帶來(lái)更加全局化的視野,使接下來(lái)的實(shí)際設(shè)計(jì)工作能夠聚焦于最關(guān)鍵的信息,減少無(wú)用功,同時(shí)也能將更多的時(shí)間節(jié)省出來(lái),用于對(duì)VR交互設(shè)計(jì)模式進(jìn)行探索。

我通常使用Xmind來(lái)逐個(gè)模塊的梳理產(chǎn)品信息架構(gòu),并配以簡(jiǎn)單的流程圖來(lái)理解產(chǎn)品功能與內(nèi)容的全景。

【譯文】VR UI設(shè)計(jì)案例學(xué)習(xí)-IAMUE-交互設(shè)計(jì)學(xué)堂

【譯文】VR UI設(shè)計(jì)案例學(xué)習(xí)-IAMUE-交互設(shè)計(jì)學(xué)堂

草圖

即便是對(duì)于VR產(chǎn)品,在探索階段通過(guò)紙筆來(lái)快速呈現(xiàn)和溝通想法依然是非常重要的設(shè)計(jì)方式。紙和筆不會(huì)像設(shè)計(jì)軟件那樣需要你將很多注意力聚焦在“工具”本身的使用上,不會(huì)局限你的思考,能幫你以最快的速度將想法落實(shí)下來(lái),同時(shí)在多人溝通協(xié)作方面也具有相當(dāng)高的實(shí)用價(jià)值。

【譯文】VR UI設(shè)計(jì)案例學(xué)習(xí)-IAMUE-交互設(shè)計(jì)學(xué)堂

【譯文】VR UI設(shè)計(jì)案例學(xué)習(xí)-IAMUE-交互設(shè)計(jì)學(xué)堂

界面原型

經(jīng)過(guò)前面幾個(gè)環(huán)節(jié)的探索,你應(yīng)該已經(jīng)對(duì)產(chǎn)品的整體架構(gòu),包括界面的數(shù)量及內(nèi)容、布局等等有了比較清晰的認(rèn)知,接下來(lái)便可以進(jìn)入原型制作階段了。原型的意義在于驗(yàn)證想法、獲取反饋、通過(guò)迭代進(jìn)一步驗(yàn)證想法,周而復(fù)始。

我通常使用Boxshot來(lái)快速制作虛擬環(huán)境的效果樣式,通過(guò)Blender為VR界面元素建模,最終在Unity 3D當(dāng)中完成原型制作。

【譯文】VR UI設(shè)計(jì)案例學(xué)習(xí)-IAMUE-交互設(shè)計(jì)學(xué)堂

【譯文】VR UI設(shè)計(jì)案例學(xué)習(xí)-IAMUE-交互設(shè)計(jì)學(xué)堂

使用Boxshot完成3D空間效果

【譯文】VR UI設(shè)計(jì)案例學(xué)習(xí)-IAMUE-交互設(shè)計(jì)學(xué)堂

3D Max/Unity 3D

【譯文】VR UI設(shè)計(jì)案例學(xué)習(xí)-IAMUE-交互設(shè)計(jì)學(xué)堂

Unity 3D中的處理過(guò)程

【譯文】VR UI設(shè)計(jì)案例學(xué)習(xí)-IAMUE-交互設(shè)計(jì)學(xué)堂

Unity 3D當(dāng)中的分類菜單視圖

GUI設(shè)計(jì)

接下來(lái)是實(shí)際的圖形化UI設(shè)計(jì)階段,用戶最終要與其進(jìn)行直接互動(dòng)。這個(gè)階段對(duì)于多數(shù)傳統(tǒng)UI設(shè)計(jì)師來(lái)說(shuō)應(yīng)該是最為熟悉的,其中有三點(diǎn)要素需要特別關(guān) 注,包括符合產(chǎn)品自身特質(zhì)的情感化體驗(yàn)塑造、符合3D世界交互原則的設(shè)計(jì)語(yǔ)言運(yùn)用,以及符合用戶對(duì)于數(shù)字化界面既有認(rèn)知的設(shè)計(jì)模式。這三者之間的良好平衡 是塑造VR圖形界面的關(guān)鍵所在。

【譯文】VR UI設(shè)計(jì)案例學(xué)習(xí)-IAMUE-交互設(shè)計(jì)學(xué)堂

我已將更多實(shí)際的mockup放到了Behance上,歡迎訪問(wèn),也期待與各位進(jìn)行交流。

本文來(lái)自Be For Web

譯者信息: C7210 – 交互設(shè)計(jì)師、貓奴、吉他手、鼓手、老狗,現(xiàn)就職于騰訊ISUX(上海)

藍(lán)藍(lán)設(shè)計(jì)m.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(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ù) 

日歷

鏈接

個(gè)人資料

存檔