一個月的VR設計:我在設計過程和設計模式中的一些發現

1 評論 58195 瀏覽 18 收藏 13 分鐘

在4月份的時候,我花了幾個星期為三星Gear VR做設計。我想分享一下我為什么要在VR領域做hack-a-month(在新團隊試驗工作的一段時間的術語),以及這短短兩周我在設計過程和設計模式中的一些發現。

為什么選VR?

我在學校學習的是工業設計和人機交互專業。我最大的興趣之一就是打通兩個學科。在當時,這意味著設計一個電子設備的全部,所以我的大四項目就是設計一部手機——既要設計手機的物理形式又要設計數字界面和生態系統。而最讓我興奮的是實體交互,可以貫穿物理和數字平臺。但是,現實世界中ID(工業設計)+HCI(人機交互)的應用非常少見。我最終在一家工業設計咨詢公司工作,一年后我離開了,我的3D建模技能從那時開始就很少用了。

我+早期用iPhone加速感應器模擬的頭部轉動模型

幾個月前,我參觀了Oculus 實驗室,這是在他們搬入Facebook不久后。我立刻想起了我在融合物理和數字界面方面的熱情。由于我代碼方面的有經驗,這意味著我可以掌控整個設計和模型制作的過程。

在facebook ,鼓勵也支持員工追求他們有激情的項目。我和我的經理一起設定我的工作時間,看是否有機會在VR工作。最終他給我安排出了一個hack-a-month,去和Joyce Hsu,?Sean Liu, 以及Joe Lifrieri一起工作。在四月的時候,我飛往加利福尼亞參正式開始這段工作。

設計工具:Unity vs Quartz Composer(沒有相應軟件經驗的同學,此段會暈,可跳過)

在Oculus我學到的第一個興奮的工作流程是他們是從 photoshop → Cinema 4D? →Unity → 代碼(如果他們選擇不在Unity里面做的話)

Unity就像Flash的3D版本。在場景里面有可以移動的所見即所得的對象,同樣你也可以附上腳本做一些交互動作。大量的游戲都是用它來制作的-它是跨平臺的而且有很好的在線社區可以問答。

你也需要用到這個荒涼的IDE叫做Monodevelop,它不支持OS X的文本編輯快捷操作,也不支持合適的vim編輯器…并且需要寫C語言或者一個輕微定制版本的javascript

自從在facebook撿起 ?,在驗證新交互模型的過程中,我最看重的一件事是調整和測試之間的即時反饋閉環。Unity 允許在一些項目進行時進行變量的調整,但是那先變化在播放后就會立即丟失。Unity的監視器管理和 Oculus DK2也會減慢閉環的迭代速度。一個DK2可以作為一個獨立的1080p分辨率下全屏的監視器,但是Unity 不能提供即時的全屏視圖,除非你真的每次建立一個獨立的os x 或者android app。

由于unity的缺點,我決定研究一下QC來支持一下DK2?,F有的線上插件不能夠支持最新的sdk,所以我花了一晚把基礎的方向角打成補丁,并且渲染了兩個平面圖(沒有立體圖)結果呢?效果非常好。雖然沒有了深度感,但是我決定我可以很容易的把靜態UI放在Unity中,來測試3D場景中的放置。

現在,有了在DK2上面設置的QC,我可以非常快速的迭代、調整、驗證

為了VR環境而設計

一個移動UI設計新手的暴露的標志是排版和點擊目標過小。任何新的人體輸入形式,都需要調整界面,讓其容易被使用。對于VR來說,我發現有幾個主要的點對我的設計沖擊很大。

讓內容在一個舒適的可視區

在我做 hack-a-mouth之前,我做的第一個設計練習,是嘗試用Unity做出一些腦海中關于通知的模型。當你在虛擬現實中的時候,你被完全的從現實中隔開,快速的收到通知并且回復對你來說就非常有用。當時我并沒有DK2,所以我在桌面上建立所有模型。我認為這個元素應該掛在屏幕邊緣,如果快速轉動你的頭去看他們,它們會迅速移動到可視角度的中間并且激活。

不幸的是當我拿到DK2并且嘗試做模型時,發現完全失敗了:當你帶上頭盔,在你可視范圍邊緣的懸浮的物體是很難聚焦的。你可以這就試試:在你視線邊緣嘗試讀你手機的內容,并且不能轉頭,只能轉動眼睛。

結果當我開始hack-a-month的時候,團隊成員告訴我這是最好的初期練習之一:讓內容在特定的框架內,并且要在你的可視范圍中央。

為有限的頭部轉動,設計簡單的交互

最大的物理約束就是你戴了一個笨重的眼鏡。我有一個通知原型的想法,就是檢測頭部轉動的速度或角度,來作為激活通知的意圖。在實踐中,它實在太尷尬了。Oculus團隊開始研發一個模型:在GEAR VR的觸控板上滑動,來避免這種限制,特別是有大量聚合內容要展現時(如應用商店)。這樣你就可以把周圍的內容呈現到眼前,而不需要讓頭部轉動太多。

我發現滑動是種讓人迷惑的交互方式,和眼鏡邊安裝的觸控板沒有什么關聯性。在我“hack-a-month”中最新的一個界面設計中,Joyce和我用Sketch和PS快速探討了多種布局方式。我們很快淘汰了一些布局(柵格是種給人感覺不知所措又包含了無限內容的集合,然而我們想要的內容集合是感覺上單向且舒服的)

我朝一個單行內容移動,開始你聚焦在第一個上,允許水平滾動。然而我不想去滑動,而且有個頁面控制浮動按鈕感覺累贅。我決定試試映射一個舒適視場的全部滾動寬度(~ 90度)。做了一些改進,像翻頁一樣貼合到任一內容,而不只是流體滾動,事實上它也以一個我們感覺很不錯的結果而告終。

懸停狀態東山再起

在移動端,設計師們失去了一個有價值的工具,用來展示有遞進關系的內容和一個實用的圖層,就是懸停狀態,在電腦和網頁時代長期被用于任何事物從工具提示到OS X的放大版DOCK。在虛擬現實中,懸停狀態以視線方向的形式又回歸了。看著一個物體或控制住,可以透露出你可能不知道的更多信息,就像一個縮略版的視頻預覽。

另一件事我在第一個原型里嘗試的,是一個用“看著并且保持住”或“長時間注視”的交互方式去激活內容而不需要任何形式的輸入。這是一個在Kinect界面里重度使用并且總是讓我感覺很好的交互方式,我想它可能會在VR領域里更好用,因為這比在空氣中搖頭的準確度更高。不幸的是,當其他輸入方式允許你看著一個事物不需要交互,“看著并且保持住”則讓你的目光休息變得有些難,事實上在閱讀中還要擔心什么東西會被觸發。

當我開始第一個項目,第一件我想要試試的事(還有些JOE的推動)就是為用光標作為菜單導航的視頻游戲,模擬一個普通的交互方式:直接貼近最接近的互動區域來補償不準確的光標控制。在虛擬現實中,光標事實上是相當準確的,但是它依然比只做必要的確切精準動作要難一些。

我發現增加熱區去處理5~10度間的視線夾角是一個好的經驗法則(拇指規則)。這意味著某些事物你可以只通過視覺設計,就像視頻進程欄一樣做的很窄,卻依然可以舒適的擦過而不再需要滑離控制。

另一件事我發現當用Quartz Composer做一個光標動效的時候,隱藏光標(或對它進行動畫處理,看起來它就像是貼近到控件的懸停狀態)實際上降低了光標與特定控件間對齊的難度。

虛擬現實設計中結束時的思考

在“hack-a-month”的最后,我以一個非常立體的原型和新的交互方式為結尾,給了我工作的團隊一些靈感。所有的原型都用Quartz Composer做到了高保真的效果,在相對較短的時間里(“hack-a-month”實際上只有2.5周)。不幸的是,我不能在旁邊經歷實現出的效果,但是我很興奮的看到了設計是如何應用到實際使用中的。

下一個是什么:工具

在過去的幾年里作為一個產品設計師,一件讓我越來越清晰的事就是:設計和代碼的相互作用對我有著強烈的激發。通過我的設計經歷,我最喜歡的時刻就是那些當我遇到的技術障礙檢驗了設計方向的時候。不管是學習Objective C來攻克時間點,還是在JS中度過數據人生。

虛擬現實的工作進一步證明,我依然享受思考產品和設計在三維空間中的新的交互方式,我最喜歡的事就是搭建工具來幫助證明設計決策。這就是為什么我和Brandon Walkin對我們在FACEBOOK的設計工具開啟了一個嚴肅而長遠的審視,他領導了Origami的開發。如果你喜歡設計工具的工作,并且在紐約生活也在你的日程中,就聯系吧!

 

原文地址:https://medium.com/facebook-design/a-month-designing-in-vr-62474aef1f1c

本文來自MUX

譯文地址:http://mux.baidu.com/?p=8684

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 愛好者共同討論 v:37235681

    來自福建 回復