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

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

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

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

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

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

探索與研究

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

視頻游戲

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

社交

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

教育

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

生產(chǎn)力

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

觀光

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

建筑與房產(chǎn)

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

現(xiàn)場直播

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

網(wǎng)頁瀏覽

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

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

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

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

技術(shù)需求與局限

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

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

基于產(chǎn)品自身的目標及其輸入、輸出等方面的特性,我們在著手制作產(chǎn)品原型之前,首先對實現(xiàn)產(chǎn)品所需的技術(shù),包括可能遇到的瓶頸和局限,以及有可能產(chǎn)生的潛在問題進行了充分的預(yù)研,使設(shè)計師在接下來制定設(shè)計決策的時候能夠更加準確和。

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

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

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

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

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

草圖

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

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

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

界面原型

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

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

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

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

使用Boxshot完成3D空間效果

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

3D Max/Unity 3D

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

Unity 3D中的處理過程

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

Unity 3D當中的分類菜單視圖

GUI設(shè)計

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

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

我已將更多實際的mockup放到了Behance上,歡迎訪問,也期待與各位進行交流。

本文來自Be For Web

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

藍藍設(shè)計m.820esy.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計  cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制  用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù) 

分享本文至:

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://m.820esy.cn

存檔