Facebook設計師:從VR設計實戰中總結的5個設計思路

@C7210?:本文來自 Facebook VR 團隊的設計師 Gabriel Valdivia,為我們講述了Facebook 360這款備受關注的新產品誕生背后的一些設計思考與經驗心得。無論你是否有在進行 VR 項目,這樣的官方團隊經驗講談都是很不錯的閱讀素材。

歡迎關注譯者@C7210?(高級交互設計師、貓奴、吉他手、鼓手、老狗,現就職于騰訊ISUX)的微信公眾號:Beforweb

Facebook VR 設計團隊的使命是為人們提供身臨其境的數字化體驗。我們相信,突破 2D 屏幕的敘事及體驗方式能夠將人與情境,甚至是人與人之間的互動關系推向更深的層次。

如今,所有平臺的 Facebook 都已經提供了 360° 照片及視頻的支持能力,用戶共發布了超過 2500 萬張的 360° 照片以及超過 100 萬部 360° 視頻。數量雖然驚人,但這些內容的分布卻較為分散,你很容易在 feed 流當中錯過它們,而且戴上 VR 頭顯之后更加難以導航瀏覽。

Facebook 360

在過去的幾個月里,我(英文原文作者)所在的團隊一直在為 Facebook 360 進行設計。這是一款面向三星 Gear VR 的產品,旨在將 Facebook 平臺上的 360° 照片及視頻以更加沉浸化、更易發現的方式提供給用戶。這也是 Facebook 首次面向 VR 平臺打造獨立的 app 產品。

Facebook設計師:從VR設計實戰中總結的5個設計思路

Facebook 360 帶來了一站式的沉浸體驗。你可以集中瀏覽所有你關注的友人或主頁發布的全景照片和視頻,并能探索更多有意思的全景內容。

整個 app 分為四個部分:

發現:媒體公司、團隊或個人作者發布在 Facebook 上的那些最熱門的 360° 內容全部匯集于此。

關注:你在 Facebook 上關注的友人或主頁所發布的 360° 內容。

收藏:你在 Facebook 移動端或桌面端 app 當中收藏過的所有 360° 內容。

時間軸:你所分享過的 360° 照片或視頻將在這里以時間軸的形式呈現,對你而言仿佛記憶流一般。

我們重點關注于怎樣打造出一套既能折射出用戶多年來在傳統平臺上的使用習慣、同時又能充分利用新平臺沉浸化特性的 VR 體驗模式。我們每周都會召集一些擁有不同行業背景的用戶進行測試,自始至終通過這種方式不斷的驗證著我們的想法與設計方案。

與傳統平臺的共生關系

在產品設計過程中,我們越發清晰的意識到,通過傳統平臺上的 Facebook 瀏覽 360° 內容的體驗情境與 VR 當中的完全不同。人們每天都會多次使用手機或桌面設備訪問 Facebook,模式較為碎片化,而 VR 使用行為的持續時間更長,使用意圖更為明確;人們通常會挑選一個時段出來專門用于沉浸化體驗。

Facebook設計師:從VR設計實戰中總結的5個設計思路

此外我們還發現,人們雖然很喜歡 360° 內容,但像一直以來那樣舉著手機同時左右轉身進行觀看的方式仍然相當不便,尤其是在公共場合。Facebook 360 中的“收藏”部分便是為了解決這一問題而存在的 - 你在手機上訪問 Facebook 時,可以將 feed 流當中的 360° 內容收藏起來,然后在方便的時候通過 VR 設備搭配 Facebook 360 來訪問這些內容。這樣,人們便不會因為日常場景當中的不便而錯過他們喜歡的 360° 內容了。

這是一種傳統 2D 媒介與 VR 環境互相配合、共生共存的生態機制 - 我們不必也無法要求人們去刻意改變日常場景中的行為模式,只要引導他們在更加便利的情境當中通過特定的方式來獲取更加沉浸化的體驗即可。

我們的另一個目標就是通過 Facebook 360 幫助人們發現更多的優質內容。為此,我們設計了“發現”界面,這里匯集了 Facebook 當中所有的熱門 360° 內容,你在觀看的同時還可以關注作者,以此逐漸獲取到更多自己感興趣的內容。

設計思路

我們在 Facebook 360 的設計歷程當中始終遵循以下五條設計思路:

1. 被動式的沉浸化體驗

通過測試,我們發現多數的 Gear VR 用戶并不會在站立狀態下使用設備。他們通常會坐在沙發或床上進行使用,而且他們表示,長時間的通過觸控板進行操作會讓人感到非常疲勞。這些發現對 Facebook 360 的導航與交互機制的設計產生了重要的影響。

Facebook設計師:從VR設計實戰中總結的5個設計思路

舉例來說,很多產品需要人們在內容列表與詳情狀態之間反復切換,對于 VR 來說,這是一個較為嚴重的交互痛點。我們的解決方案是,當你瀏覽過當前的 360° 照片或視頻之后,系統會自動幫你切換到下一篇內容,你無需進行任何返回列表狀態的操作。這種模式就像無縫銜接的敘事幻燈片,人們在多數時間內無需手動進行繁瑣的操作,只要找個最舒服的姿勢坐下,將自己沉浸到內容當中便好。

在“發現”、“關注”、“收藏”和“時間軸”各自的網格視圖中,你可以注視并點擊任何一張縮略卡片來進入預覽模式;如果你覺得內容不錯,還可以注視并長按這張卡片的任何地方,籍此喚出針對該內容的互動選項,或是通過注視并點擊內容摘要來查看更多信息。

2. 多種交互方式

在允許的情況下,我們會為每個操作設計補充性的交互方式。這樣,人們便可以選擇最舒適的方式來完成常規任務。

譬如在網格視圖中,你可以通過注視內容區域的左右兩側來瀏覽更多內容,同時也可以通過點擊虛擬導航按鈕或是在設備的觸控板上前后滑動來實現。

3. 通過景深強化信息層級

長久以來,我們都習慣于自上而下、從左向右的對信息層級進行規劃。然而在 VR 環境中,處于視線焦點位置的元素始終擁有最高優先級;同時,與自己距離較近的物體總會比距離較遠的那些更加容易引起關注。因此,我們必須充分利用景深這一要素來構建 VR 界面的信息層級。

Facebook設計師:從VR設計實戰中總結的5個設計思路

在實際設計過程中,我們發現,在網格視圖下預覽某張卡片當中的內容時,動態的景深變化可以帶來一種“透過視窗凝望另一世界”的感覺。這種體驗符合用戶在 VR 環境中的心智模型,因此有助于提升新媒介產品的親和力。

具體的設計方案就是使內容卡片隨著用戶表現出的交互動機而動態的改變其在 z 軸上的位置。默認狀態下,卡片與主視角之間的距離為 6 米;當你注視這張卡片時,距離會縮小至 5 米;發生點擊行為時,距離會進一步縮小至 4 米,此時視線可以良好的聚焦于卡片上的元數據。每一次距離變化都會經由平滑的過渡動效來完成。

Facebook設計師:從VR設計實戰中總結的5個設計思路

我們發現,通過構造景深來幫助人們感知自己與界面元素之間位置關系,人們在進行界面導航操作時會感到更加輕松。

4. 優化交互細節

我們在凝視交互的細節設計優化上投入了很多精力,盡最大可能確保用戶在使用過程中感到舒適與輕松,僅在絕對必要的時候需要他們抬起手來通過設備上的觸控板完成精準性較高的操作。

舉例來說,當你的視線焦點正在移近某個交互元素時,準星會自動吸附到該元素上面,因此你無需非常精確的控制頭部運動即可聚焦于目標對象。這樣的細節看上去無足輕重,卻能使每一次的凝視交互成本降低到最小值,優化效應積累起來便能提升整個產品的使用舒適度。

5. 隨時通過實際設備進行驗證

在打造 Facebook 360 的整個歷程里,我們有幸得到了各行各業朋友們的支持。有他們自始至終參與到用研與測試當中,我們得以步步為營的向前推進著設計流程。在那幾個月里,我們每周五都會請來一些被測,其中一些完全沒有嘗試過 VR,而另一些則精通此道。作為設計師,我們會在測試當中驗證自己所理解的心智模型及常見使用情境,包括設計方案中的信息架構與交互模式是否合理,等等。

在此期間,我們更深切的意識到,原型制作同樣是 VR 設計流程當中不可或缺的重要組成部分。很多時候,在 2D 設計平臺上顯而易見的東西,通過 3D 設備實際體驗起來會很復雜。幾個月下來,我們越發熟練于快速制作原型然后通過實際設備進行驗證的設計方式。在最后的階段,我們甚至打造了一個極為完整的、通過實際數據進行驅動的高保真原型,力求在互動方式和視覺樣式上盡可能達到實際產品的級別。這個原型的主要用途為工程師們提供最為精準的目標參考,幫助他們更有效的進行設計還原。

作為產品設計團隊,看到人們可以通過 Facebook 360 更為沉浸的體驗著那些精彩的全景內容,我們真的很開心。對產品進行持續的改進迭代,是我們接下來的長期目標。

歡迎關注譯者的微信公眾號:

Facebook設計師:從VR設計實戰中總結的5個設計思路

「VR設計好文合集」

  1. 谷歌設計師出品的VR設計入門指南
  2. VR設計指南之基礎概念與設計工具
  3. 一名UX設計師的VR設計初體驗
  4. 設計師該怎樣從3個方面學習VR設計?
  5. 設計師進入VR領域會遇到哪些狀況?(附解決方法)
  6. 關于谷歌的VR新平臺,設計師應該知道的9件事
  7. 站在VR的大門前!主流VR平臺交互特性淺析
  8. 從VR UI設計案例中學到的六個經驗
  9. 淺聊故事板在VR設計中的運用(附模版下載)
  10. VR新工具之便捷實用的POV紙質原型
  11. 谷歌VR APP實戰!UNITY與CARDBOARD APP基礎實踐(一)
  12. 谷歌VR APP實戰!UNITY與CARDBOARD APP基礎實踐(二)
  13. 谷歌VR APP實戰!UNITY與CARDBOARD APP基礎實踐(三)
  14. VR丨有哪些靠譜的VR開發工具 —— 3D建模篇
  15. FACEBOOK 實習生總結的這5個VR設計方法,幫你少走彎路!
  16. 實戰教程來咯!超實用的VR界面設計實踐指南

原文地址:medium

【優設網 原創文章 投稿郵箱:yuan@uisdc.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺,專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航:http://hao.uisdc.com/book/
設計微博:擁有粉絲量190萬的人氣微博@優秀網頁設計 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網站推薦,設計師必備導航:http://hao.uisdc.com

收藏 11
點贊

復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。