高手經(jīng)驗!Facebook的360全景VR應(yīng)用設(shè)計總結(jié)

2017-8-24    資深UI設(shè)計者

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

侯雯佩:FB設(shè)計團隊設(shè)計的一款Gear VR(三星VR設(shè)備)平臺的全景應(yīng)用過程總結(jié),其中包含一些很有價值的VR實戰(zhàn)經(jīng)驗與設(shè)計原則。

FB的Immersive設(shè)計團隊致力于提升人們身臨其境的體驗。我們相信脫離了傳統(tǒng)的“容器”來講述和體驗故事可以讓人們與情景和彼此更深入的聯(lián)結(jié)。

我們已經(jīng)在各個平臺搭建了360度全景照片與視頻服務(wù),目前在FB上已經(jīng)有超過2500萬張360全景照片和100萬個全景視頻。盡管有如此多的全景內(nèi)容,然而用戶還是很容易在feed流中錯過這些內(nèi)容。

Facebook 360介紹

過去的幾個月,我一直為下一步進行設(shè)計:給予三星Gear VR平臺的Facebook 360應(yīng)用——使全景照片和視頻更容易被發(fā)現(xiàn)。這是FB第一個為Gear VR做的媒體應(yīng)用,一個通過VR瀏覽360全景照片和視頻的平臺。

應(yīng)用包含四個主要功能:

  • 探索:匯集FB上最火的360全景內(nèi)容,來自專業(yè)的媒體公司、組織和個人創(chuàng)作者。
  • 關(guān)注:來自好友和自己訂閱的360全景內(nèi)容。
  • 保存:在移動端或PC端保存的360全景內(nèi)容,這些內(nèi)容被下載下來,以便在更合適的時間供用戶瀏覽。
  • 時間線:自己分享的全景照片和視頻,以一種全新的方式來展現(xiàn)。

我們聚焦在為用戶打造一種與FB的使用保持一致模式的VR體驗。每周我們會邀請不同使用背景的人來測試、驗證我們的假設(shè)。

在設(shè)計應(yīng)用時,很明顯,在VR環(huán)境中的全景內(nèi)容的使用和FB平臺有很大的不同。人們會在一天中頻繁的瀏覽FB的照片和視頻,然而VR卻是一個典型的單次瀏覽時間更久的場景:用戶更容易 在VR中沉浸式的體驗,忘卻時間。

另外,我們了解到,盡管用戶很享受瀏覽全景內(nèi)容,但是移動手機與之交互并不是很方便,尤其是在公共場合。因此,我們提供了保存功能,以便用戶可以在FB的360全景應(yīng)用中可以瀏覽到用戶保存的相關(guān)內(nèi)容。使用戶可以把在信息流中發(fā)現(xiàn)的好的全景內(nèi)容保存下來,在之后方便的時候進行瀏覽。

當(dāng)用戶在FB 360全景應(yīng)用中,我們期望幫助他們發(fā)現(xiàn)優(yōu)秀的全景內(nèi)容,所以我們提供了探索信息流,匯集了FB中最棒的全景照片和視頻。人們可以在這里發(fā)現(xiàn)好的內(nèi)容創(chuàng)作者,并關(guān)注他們。

以下是我們在設(shè)計FB全景應(yīng)用的過程中,聚焦的5個關(guān)鍵點:

  • 被動沉浸式體驗
  • 支持多種交互方式
  • 用Z軸深度來強化層級感
  • 針對誤操作問題的優(yōu)化
  • 堅持用實際設(shè)備進行測試

1. 被動沉浸式體驗

通過用戶測試,我們發(fā)現(xiàn)大多數(shù)Gear VR的用戶的使用場景不是站立著,而是坐在沙發(fā)上或是創(chuàng)行,因此與頭盔觸摸板進行交互的方式很容易使人疲憊。這個發(fā)現(xiàn)對我們在設(shè)計導(dǎo)航和交互時有很大的啟發(fā)。

例如,很多應(yīng)用會要求用戶頻繁的在列表與單個內(nèi)容之間頻繁切換跳轉(zhuǎn)。而我們?yōu)榱艘?guī)避這個問題,做了一個決策:自動的讓用戶在當(dāng)前照片、視頻和下一個之間直接瀏覽切換,無需回到列表。這樣可以展示一種無縫的、像是敘述故事的幻燈片一樣的體驗。

對于列表,人們可以進入任何一個故事,進入一個幻燈片,如果看到任何感興趣的部分,可以簡單的點擊或長按任意位置,查看詳情信息。

2. 支持多種交互方式

我們盡可能的會為目標(biāo)提供多種交互方式,這樣就可以提供給用戶多種選擇,讓他們選擇自己覺得合適的方式來完成目標(biāo)。

例如,瀏覽內(nèi)容可以簡單的通過目光左右滑動,也可以點擊一個視覺元素,或是通過觸摸板滑動來完成。

3. 用Z軸深度來強化層級感

通常情況下,我們會按照從左到右、從上到下的順序來布局信息,但在VR環(huán)境下,中心點的受關(guān)注度高于其他區(qū)域的元素,并且在空間中靠近用戶的元素的受關(guān)注度高于更遠一些的元素。所以我們會引入Z軸深度來區(qū)分元素層級。

例如,我們發(fā)現(xiàn)當(dāng)瀏覽內(nèi)容時,提供深度層次,會呈現(xiàn)一種在窗子里像外面看的感受。這樣會比較符合用戶的心智模型,也讓VR環(huán)境中的交互更優(yōu)化。

我們設(shè)計了一種這樣的故事卡片交互:讓用戶表現(xiàn)出想要與之交互的意圖,卡片會向前移動。故事卡片距離用戶6米,但是當(dāng)用戶凝視它時,響應(yīng)的動畫會出現(xiàn)的更近。當(dāng)點擊觸發(fā)時,卡片動畫會更近的呈現(xiàn),并展現(xiàn)出一個順滑的過渡效果。

我們發(fā)現(xiàn)這樣的方式可以讓用戶更明確的知道自己所處的位置,并幫助他們更容易的在應(yīng)用的不同界面中穿梭。

4. 針對誤操作問題的優(yōu)化

我們花了很大精力設(shè)計基于凝視的交互體驗,使其使用起來比較舒服,以盡量少的動用到觸控板。

在上面的例子中,當(dāng)接近觸發(fā)UI元素時,會有光暈效果呈現(xiàn),這樣可以容許用戶在移動頭盔的過程中可以無需那么的。這樣的小細節(jié)可以使基于凝視的交互更容易一些,也減少了完成目標(biāo)的難度。

5. 堅持用實際設(shè)備進行測試

我們很幸運的在開發(fā)應(yīng)用的過程中一直讓不同背景的用戶參與到用戶研究中來,每個周五我們都會邀請測試者,驗證心智模型、舒適區(qū)、信息架構(gòu)和其他的交互形式,包括沒有使用過VR的新手用戶,以及比較熟悉VR的專家用戶。

我們發(fā)現(xiàn)進行原型測試是開發(fā)VR產(chǎn)品不可或缺的一部分:在2D環(huán)境中顯而易見的東西,一旦戴上VR頭盔后會變得異常復(fù)雜。在開發(fā)這個應(yīng)用的過程中,我們積累了快速驗證低保證原型的能力,頻繁的在頭盔中測試。

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

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://sillybuy.com

存檔