2016-10-9 資深UI設(shè)計者
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點(diǎn)這里
最近，我在一個安卓VR app項目當(dāng)中負(fù)責(zé)界面的設(shè)計開發(fā)工作。對我個人來說，這是一片從未涉足過的全新領(lǐng)域，因此感到無比興奮，并希望將自己一路上所學(xué)到的經(jīng)驗分享給各位，同時也想通過這種形式對自己的一些設(shè)計方法和解決方案進(jìn)行總結(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è)計流程當(dāng)中的以下幾個階段：
隨著技術(shù)與應(yīng)用理念的不斷成熟，VR將有可能成為我們?nèi)粘Ｉ畹闹匾M成部分，并在以下這些領(lǐng)域當(dāng)中帶來令人激動的全新體驗?zāi)Ｊ剑?
最為典型的應(yīng)用領(lǐng)域。當(dāng)你和人們說起VR時，多數(shù)人立刻會想到游戲 – 深度的沉浸感，忘我的全身心參與其中 – 這些體驗需求使開發(fā)者、游戲主機(jī)及周邊設(shè)備廠商們望眼欲穿。可以肯定，如今多數(shù)的VR團(tuán)隊都渴望在這一領(lǐng)域當(dā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)域當(dāng)中發(fā)力了。
3D化的內(nèi)容呈現(xiàn)方式一直都是互動式教學(xué)當(dāng)中的重要手段。結(jié)合VR技術(shù)帶來的沉浸感及虛擬交互體驗，學(xué)習(xí)過程將充滿實踐性和趣味性，從而更加卓有成效。
目前，在某些領(lǐng)域當(dāng)中，已經(jīng)有一些研究者和小型公司開始探索如何將VR作為生產(chǎn)工具來代替?zhèn)鹘y(tǒng)的桌面設(shè)備了。可以試著設(shè)想一下在完全虛擬的辦公環(huán)境當(dāng)中自由操作虛擬工具、處理工作內(nèi)容的情景。
高質(zhì)量的360°全景影像非常引人入勝，能夠幫助用戶簡單快捷的實現(xiàn)觀賞體驗，足不出戶，逛遍天下。
這些行業(yè)當(dāng)中的先行者已經(jīng)開始試驗VR技術(shù)的運(yùn)用了，包括拍攝全景影像以及構(gòu)建可交互的虛擬建筑空間等等。影像的形式適合于向客戶呈現(xiàn)已有的產(chǎn)品，而虛擬空間則更加適用于在規(guī)劃階段演示復(fù)雜的設(shè)計方案。
VR視頻將成為音樂會、新聞現(xiàn)場及其他直播場景的重要傳播形式。就在不久之前，Paul McCartney、Jack White等樂人已經(jīng)通過這種形式來轉(zhuǎn)播自己的現(xiàn)場表演了。
Mozilla已經(jīng)開始向他們的瀏覽器(Firefox)當(dāng)中添加VR支持能力，Google方面也是同樣。除了技術(shù)方面的研究，Mozilla同時也在對VR當(dāng)中的網(wǎng)頁導(dǎo)航模式及頁面展示方式進(jìn)行探索。
VR技術(shù)的巨大潛力還將體現(xiàn)在諸多領(lǐng)域，包括軍事訓(xùn)練、醫(yī)學(xué)培訓(xùn)與診療、工程、設(shè)計等等。
你可以在Within.in了解到更多更具體的VR應(yīng)用案例。
我們的產(chǎn)品在總體形式上會像YouTube和Vimeo那樣為用戶提供VR視頻服務(wù)；視頻內(nèi)容本身會按照類別與標(biāo)簽進(jìn)行組織。
基于產(chǎn)品自身的目標(biāo)及其輸入、輸出等方面的特性，我們在著手制作產(chǎn)品原型之前，首先對實現(xiàn)產(chǎn)品所需的技術(shù)，包括可能遇到的瓶頸和局限，以及有可能產(chǎn)生的潛在問題進(jìn)行了充分的預(yù)研，使設(shè)計師在接下來制定設(shè)計決策的時候能夠更加準(zhǔn)確和。
這個階段的目標(biāo)包括梳理信息架構(gòu)，制定交互腳本，對每個界面的功能與內(nèi)容進(jìn)行定義描述。所產(chǎn)出的文檔可以為整個項目帶來更加全局化的視野，使接下來的實際設(shè)計工作能夠聚焦于最關(guān)鍵的信息，減少無用功，同時也能將更多的時間節(jié)省出來，用于對VR交互設(shè)計模式進(jìn)行探索。
我通常使用Xmind來逐個模塊的梳理產(chǎn)品信息架構(gòu)，并配以簡單的流程圖來理解產(chǎn)品功能與內(nèi)容的全景。
即便是對于VR產(chǎn)品，在探索階段通過紙筆來快速呈現(xiàn)和溝通想法依然是非常重要的設(shè)計方式。紙和筆不會像設(shè)計軟件那樣需要你將很多注意力聚焦在“工具”本身的使用上，不會局限你的思考，能幫你以最快的速度將想法落實下來，同時在多人溝通協(xié)作方面也具有相當(dāng)高的實用價值。
經(jīng)過前面幾個環(huán)節(jié)的探索，你應(yīng)該已經(jīng)對產(chǎn)品的整體架構(gòu)，包括界面的數(shù)量及內(nèi)容、布局等等有了比較清晰的認(rèn)知，接下來便可以進(jìn)入原型制作階段了。原型的意義在于驗證想法、獲取反饋、通過迭代進(jìn)一步驗證想法，周而復(fù)始。
我通常使用Boxshot來快速制作虛擬環(huán)境的效果樣式，通過Blender為VR界面元素建模，最終在Unity 3D當(dāng)中完成原型制作。
使用Boxshot完成3D空間效果
3D Max/Unity 3D
Unity 3D中的處理過程
Unity 3D當(dāng)中的分類菜單視圖
接下來是實際的圖形化UI設(shè)計階段，用戶最終要與其進(jìn)行直接互動。這個階段對于多數(shù)傳統(tǒng)UI設(shè)計師來說應(yīng)該是最為熟悉的，其中有三點(diǎn)要素需要特別關(guān) 注，包括符合產(chǎn)品自身特質(zhì)的情感化體驗塑造、符合3D世界交互原則的設(shè)計語言運(yùn)用，以及符合用戶對于數(shù)字化界面既有認(rèn)知的設(shè)計模式。這三者之間的良好平衡 是塑造VR圖形界面的關(guān)鍵所在。
我已將更多實際的mockup放到了Behance上，歡迎訪問，也期待與各位進(jìn)行交流。
譯者信息: C7210 – 交互設(shè)計師、貓奴、吉他手、鼓手、老狗，現(xiàn)就職于騰訊ISUX(上海)
藍(lán)藍(lán)設(shè)計( www.gyxygd.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍(lán)藍(lán)設(shè)計的小編 http://www.gyxygd.cn
