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

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

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

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

Facebook 360介紹

過去的幾個月，我一直為下一步進(jìn)行設(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)容保存下來，在之后方便的時候進(jìn)行瀏覽。

當(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è)備進(jìn)行測試

1. 被動沉浸式體驗

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

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

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

2. 支持多種交互方式

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

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

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

通常情況下，我們會按照從左到右、從上到下的順序來布局信息，但在VR環(huán)境下，中心點的受關(guān)注度高于其他區(qū)域的元素，并且在空間中靠近用戶的元素的受關(guān)注度高于更遠(yuǎ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)，這樣可以容許用戶在移動頭盔的過程中可以無需那么的精確。這樣的小細(xì)節(jié)可以使基于凝視的交互更容易一些，也減少了完成目標(biāo)的難度。

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

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

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

更多來自FB VR設(shè)計團(tuán)隊的相關(guān)總結(jié)和資源，可瀏覽鏈接：facebook.design/vr

歡迎關(guān)注譯者的微信公眾號：愛新覺羅米

「VR設(shè)計好文合集」

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

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計愛好者也準(zhǔn)備了貼心的知識樹專欄。開啟免費自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計導(dǎo)航：國內(nèi)人氣最高的設(shè)計網(wǎng)址導(dǎo)航，設(shè)計師必備：http://hao.uisdc.com