@C7210?：本文來(lái)自 Facebook VR 團(tuán)隊(duì)的設(shè)計(jì)師 Gabriel Valdivia，為我們講述了Facebook 360這款備受關(guān)注的新產(chǎn)品誕生背后的一些設(shè)計(jì)思考與經(jīng)驗(yàn)心得。無(wú)論你是否有在進(jìn)行 VR 項(xiàng)目，這樣的官方團(tuán)隊(duì)經(jīng)驗(yàn)講談都是很不錯(cuò)的閱讀素材。

歡迎關(guān)注譯者@C7210?（高級(jí)交互設(shè)計(jì)師、貓奴、吉他手、鼓手、老狗，現(xiàn)就職于騰訊ISUX）的微信公眾號(hào)：Beforweb

Facebook VR 設(shè)計(jì)團(tuán)隊(duì)的使命是為人們提供身臨其境的數(shù)字化體驗(yàn)。我們相信，突破 2D 屏幕的敘事及體驗(yàn)方式能夠?qū)⑷伺c情境，甚至是人與人之間的互動(dòng)關(guān)系推向更深的層次。

如今，所有平臺(tái)的 Facebook 都已經(jīng)提供了 360° 照片及視頻的支持能力，用戶共發(fā)布了超過(guò) 2500 萬(wàn)張的 360° 照片以及超過(guò) 100 萬(wàn)部 360° 視頻。數(shù)量雖然驚人，但這些內(nèi)容的分布卻較為分散，你很容易在 feed 流當(dāng)中錯(cuò)過(guò)它們，而且戴上 VR 頭顯之后更加難以導(dǎo)航瀏覽。

Facebook 360

在過(guò)去的幾個(gè)月里，我（英文原文作者）所在的團(tuán)隊(duì)一直在為 Facebook 360 進(jìn)行設(shè)計(jì)。這是一款面向三星 Gear VR 的產(chǎn)品，旨在將 Facebook 平臺(tái)上的 360° 照片及視頻以更加沉浸化、更易發(fā)現(xiàn)的方式提供給用戶。這也是 Facebook 首次面向 VR 平臺(tái)打造獨(dú)立的 app 產(chǎn)品。

Facebook 360 帶來(lái)了一站式的沉浸體驗(yàn)。你可以集中瀏覽所有你關(guān)注的友人或主頁(yè)發(fā)布的全景照片和視頻，并能探索更多有意思的全景內(nèi)容。

整個(gè) app 分為四個(gè)部分：

發(fā)現(xiàn)：媒體公司、團(tuán)隊(duì)或個(gè)人作者發(fā)布在 Facebook 上的那些最熱門的 360° 內(nèi)容全部匯集于此。

關(guān)注：你在 Facebook 上關(guān)注的友人或主頁(yè)所發(fā)布的 360° 內(nèi)容。

收藏：你在 Facebook 移動(dòng)端或桌面端 app 當(dāng)中收藏過(guò)的所有 360° 內(nèi)容。

時(shí)間軸：你所分享過(guò)的 360° 照片或視頻將在這里以時(shí)間軸的形式呈現(xiàn)，對(duì)你而言仿佛記憶流一般。

我們重點(diǎn)關(guān)注于怎樣打造出一套既能折射出用戶多年來(lái)在傳統(tǒng)平臺(tái)上的使用習(xí)慣、同時(shí)又能充分利用新平臺(tái)沉浸化特性的 VR 體驗(yàn)?zāi)Ｊ?。我們每周都?huì)召集一些擁有不同行業(yè)背景的用戶進(jìn)行測(cè)試，自始至終通過(guò)這種方式不斷的驗(yàn)證著我們的想法與設(shè)計(jì)方案。

與傳統(tǒng)平臺(tái)的共生關(guān)系

在產(chǎn)品設(shè)計(jì)過(guò)程中，我們?cè)桨l(fā)清晰的意識(shí)到，通過(guò)傳統(tǒng)平臺(tái)上的 Facebook 瀏覽 360° 內(nèi)容的體驗(yàn)情境與 VR 當(dāng)中的完全不同。人們每天都會(huì)多次使用手機(jī)或桌面設(shè)備訪問(wèn) Facebook，模式較為碎片化，而 VR 使用行為的持續(xù)時(shí)間更長(zhǎng)，使用意圖更為明確；人們通常會(huì)挑選一個(gè)時(shí)段出來(lái)專門用于沉浸化體驗(yàn)。

此外我們還發(fā)現(xiàn)，人們雖然很喜歡 360° 內(nèi)容，但像一直以來(lái)那樣舉著手機(jī)同時(shí)左右轉(zhuǎn)身進(jìn)行觀看的方式仍然相當(dāng)不便，尤其是在公共場(chǎng)合。Facebook 360 中的“收藏”部分便是為了解決這一問(wèn)題而存在的 - 你在手機(jī)上訪問(wèn) Facebook 時(shí)，可以將 feed 流當(dāng)中的 360° 內(nèi)容收藏起來(lái)，然后在方便的時(shí)候通過(guò) VR 設(shè)備搭配 Facebook 360 來(lái)訪問(wèn)這些內(nèi)容。這樣，人們便不會(huì)因?yàn)槿粘?chǎng)景當(dāng)中的不便而錯(cuò)過(guò)他們喜歡的 360° 內(nèi)容了。

這是一種傳統(tǒng) 2D 媒介與 VR 環(huán)境互相配合、共生共存的生態(tài)機(jī)制 - 我們不必也無(wú)法要求人們?nèi)タ桃飧淖內(nèi)粘?chǎng)景中的行為模式，只要引導(dǎo)他們?cè)诟颖憷那榫钞?dāng)中通過(guò)特定的方式來(lái)獲取更加沉浸化的體驗(yàn)即可。

我們的另一個(gè)目標(biāo)就是通過(guò) Facebook 360 幫助人們發(fā)現(xiàn)更多的優(yōu)質(zhì)內(nèi)容。為此，我們?cè)O(shè)計(jì)了“發(fā)現(xiàn)”界面，這里匯集了 Facebook 當(dāng)中所有的熱門 360° 內(nèi)容，你在觀看的同時(shí)還可以關(guān)注作者，以此逐漸獲取到更多自己感興趣的內(nèi)容。

設(shè)計(jì)思路

我們?cè)?Facebook 360 的設(shè)計(jì)歷程當(dāng)中始終遵循以下五條設(shè)計(jì)思路：

1. 被動(dòng)式的沉浸化體驗(yàn)

通過(guò)測(cè)試，我們發(fā)現(xiàn)多數(shù)的 Gear VR 用戶并不會(huì)在站立狀態(tài)下使用設(shè)備。他們通常會(huì)坐在沙發(fā)或床上進(jìn)行使用，而且他們表示，長(zhǎng)時(shí)間的通過(guò)觸控板進(jìn)行操作會(huì)讓人感到非常疲勞。這些發(fā)現(xiàn)對(duì) Facebook 360 的導(dǎo)航與交互機(jī)制的設(shè)計(jì)產(chǎn)生了重要的影響。

舉例來(lái)說(shuō)，很多產(chǎn)品需要人們?cè)趦?nèi)容列表與詳情狀態(tài)之間反復(fù)切換，對(duì)于 VR 來(lái)說(shuō)，這是一個(gè)較為嚴(yán)重的交互痛點(diǎn)。我們的解決方案是，當(dāng)你瀏覽過(guò)當(dāng)前的 360° 照片或視頻之后，系統(tǒng)會(huì)自動(dòng)幫你切換到下一篇內(nèi)容，你無(wú)需進(jìn)行任何返回列表狀態(tài)的操作。這種模式就像無(wú)縫銜接的敘事幻燈片，人們?cè)诙鄶?shù)時(shí)間內(nèi)無(wú)需手動(dòng)進(jìn)行繁瑣的操作，只要找個(gè)最舒服的姿勢(shì)坐下，將自己沉浸到內(nèi)容當(dāng)中便好。

在“發(fā)現(xiàn)”、“關(guān)注”、“收藏”和“時(shí)間軸”各自的網(wǎng)格視圖中，你可以注視并點(diǎn)擊任何一張縮略卡片來(lái)進(jìn)入預(yù)覽模式；如果你覺得內(nèi)容不錯(cuò)，還可以注視并長(zhǎng)按這張卡片的任何地方，籍此喚出針對(duì)該內(nèi)容的互動(dòng)選項(xiàng)，或是通過(guò)注視并點(diǎn)擊內(nèi)容摘要來(lái)查看更多信息。

2. 多種交互方式

在允許的情況下，我們會(huì)為每個(gè)操作設(shè)計(jì)補(bǔ)充性的交互方式。這樣，人們便可以選擇最舒適的方式來(lái)完成常規(guī)任務(wù)。

譬如在網(wǎng)格視圖中，你可以通過(guò)注視內(nèi)容區(qū)域的左右兩側(cè)來(lái)瀏覽更多內(nèi)容，同時(shí)也可以通過(guò)點(diǎn)擊虛擬導(dǎo)航按鈕或是在設(shè)備的觸控板上前后滑動(dòng)來(lái)實(shí)現(xiàn)。

3. 通過(guò)景深強(qiáng)化信息層級(jí)

長(zhǎng)久以來(lái)，我們都習(xí)慣于自上而下、從左向右的對(duì)信息層級(jí)進(jìn)行規(guī)劃。然而在 VR 環(huán)境中，處于視線焦點(diǎn)位置的元素始終擁有最高優(yōu)先級(jí)；同時(shí)，與自己距離較近的物體總會(huì)比距離較遠(yuǎn)的那些更加容易引起關(guān)注。因此，我們必須充分利用景深這一要素來(lái)構(gòu)建 VR 界面的信息層級(jí)。

在實(shí)際設(shè)計(jì)過(guò)程中，我們發(fā)現(xiàn)，在網(wǎng)格視圖下預(yù)覽某張卡片當(dāng)中的內(nèi)容時(shí)，動(dòng)態(tài)的景深變化可以帶來(lái)一種“透過(guò)視窗凝望另一世界”的感覺。這種體驗(yàn)符合用戶在 VR 環(huán)境中的心智模型，因此有助于提升新媒介產(chǎn)品的親和力。

具體的設(shè)計(jì)方案就是使內(nèi)容卡片隨著用戶表現(xiàn)出的交互動(dòng)機(jī)而動(dòng)態(tài)的改變其在 z 軸上的位置。默認(rèn)狀態(tài)下，卡片與主視角之間的距離為 6 米；當(dāng)你注視這張卡片時(shí)，距離會(huì)縮小至 5 米；發(fā)生點(diǎn)擊行為時(shí)，距離會(huì)進(jìn)一步縮小至 4 米，此時(shí)視線可以良好的聚焦于卡片上的元數(shù)據(jù)。每一次距離變化都會(huì)經(jīng)由平滑的過(guò)渡動(dòng)效來(lái)完成。

我們發(fā)現(xiàn)，通過(guò)構(gòu)造景深來(lái)幫助人們感知自己與界面元素之間位置關(guān)系，人們?cè)谶M(jìn)行界面導(dǎo)航操作時(shí)會(huì)感到更加輕松。

4. 優(yōu)化交互細(xì)節(jié)

我們?cè)谀暯换サ募?xì)節(jié)設(shè)計(jì)優(yōu)化上投入了很多精力，盡最大可能確保用戶在使用過(guò)程中感到舒適與輕松，僅在絕對(duì)必要的時(shí)候需要他們抬起手來(lái)通過(guò)設(shè)備上的觸控板完成精準(zhǔn)性較高的操作。

舉例來(lái)說(shuō)，當(dāng)你的視線焦點(diǎn)正在移近某個(gè)交互元素時(shí)，準(zhǔn)星會(huì)自動(dòng)吸附到該元素上面，因此你無(wú)需非常精確的控制頭部運(yùn)動(dòng)即可聚焦于目標(biāo)對(duì)象。這樣的細(xì)節(jié)看上去無(wú)足輕重，卻能使每一次的凝視交互成本降低到最小值，優(yōu)化效應(yīng)積累起來(lái)便能提升整個(gè)產(chǎn)品的使用舒適度。

5. 隨時(shí)通過(guò)實(shí)際設(shè)備進(jìn)行驗(yàn)證

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

在此期間，我們更深切的意識(shí)到，原型制作同樣是 VR 設(shè)計(jì)流程當(dāng)中不可或缺的重要組成部分。很多時(shí)候，在 2D 設(shè)計(jì)平臺(tái)上顯而易見的東西，通過(guò) 3D 設(shè)備實(shí)際體驗(yàn)起來(lái)會(huì)很復(fù)雜。幾個(gè)月下來(lái)，我們?cè)桨l(fā)熟練于快速制作原型然后通過(guò)實(shí)際設(shè)備進(jìn)行驗(yàn)證的設(shè)計(jì)方式。在最后的階段，我們甚至打造了一個(gè)極為完整的、通過(guò)實(shí)際數(shù)據(jù)進(jìn)行驅(qū)動(dòng)的高保真原型，力求在互動(dòng)方式和視覺樣式上盡可能達(dá)到實(shí)際產(chǎn)品的級(jí)別。這個(gè)原型的主要用途為工程師們提供最為精準(zhǔn)的目標(biāo)參考，幫助他們更有效的進(jìn)行設(shè)計(jì)還原。

作為產(chǎn)品設(shè)計(jì)團(tuán)隊(duì)，看到人們可以通過(guò) Facebook 360 更為沉浸的體驗(yàn)著那些精彩的全景內(nèi)容，我們真的很開心。對(duì)產(chǎn)品進(jìn)行持續(xù)的改進(jìn)迭代，是我們接下來(lái)的長(zhǎng)期目標(biāo)。

歡迎關(guān)注譯者的微信公眾號(hào)：

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

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

原文地址：medium

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

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量190萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com