本文來自 Facebook VR 團隊的設計師 Gabriel Valdivia,為我們講述了Facebook 360這款備受關注的新產(chǎn)品誕生背后的一些設計思考與經(jīng)驗心得。無論你是否有在進行 VR 項目,這樣的官方團隊經(jīng)驗講談都是很不錯的閱讀素材。 歡迎關注譯者@C7210 (高級交互設計師、貓奴、吉他手、鼓手、老狗,現(xiàn)就職于騰訊ISUX)的微信公眾號:Beforweb Facebook VR 設計團隊的使命是為人們提供身臨其境的數(shù)字化體驗。我們相信,突破 2D 屏幕的敘事及體驗方式能夠?qū)⑷伺c情境,甚至是人與人之間的互動關系推向更深的層次。 如今,所有平臺的 Facebook 都已經(jīng)提供了 360° 照片及視頻的支持能力,用戶共發(fā)布了超過 2500 萬張的 360° 照片以及超過 100 萬部 360° 視頻。數(shù)量雖然驚人,但這些內(nèi)容的分布卻較為分散,你很容易在 feed 流當中錯過它們,而且戴上 VR 頭顯之后更加難以導航瀏覽。 Facebook 360 在過去的幾個月里,我(英文原文作者)所在的團隊一直在為 Facebook 360 進行設計。這是一款面向三星 Gear VR 的產(chǎn)品,旨在將 Facebook 平臺上的 360° 照片及視頻以更加沉浸化、更易發(fā)現(xiàn)的方式提供給用戶。這也是 Facebook 首次面向 VR 平臺打造獨立的 app 產(chǎn)品。 Facebook 360 帶來了一站式的沉浸體驗。你可以集中瀏覽所有你關注的友人或主頁發(fā)布的全景照片和視頻,并能探索更多有意思的全景內(nèi)容。 整個 app 分為四個部分: 發(fā)現(xiàn):媒體公司、團隊或個人作者發(fā)布在 Facebook 上的那些最熱門的 360° 內(nèi)容全部匯集于此。 關注:你在 Facebook 上關注的友人或主頁所發(fā)布的 360° 內(nèi)容。 收藏:你在 Facebook 移動端或桌面端 app 當中收藏過的所有 360° 內(nèi)容。 時間軸:你所分享過的 360° 照片或視頻將在這里以時間軸的形式呈現(xiàn),對你而言仿佛記憶流一般。 我們重點關注于怎樣打造出一套既能折射出用戶多年來在傳統(tǒng)平臺上的使用習慣、同時又能充分利用新平臺沉浸化特性的 VR 體驗模式。我們每周都會召集一些擁有不同行業(yè)背景的用戶進行測試,自始至終通過這種方式不斷的驗證著我們的想法與設計方案。 與傳統(tǒng)平臺的共生關系 在產(chǎn)品設計過程中,我們越發(fā)清晰的意識到,通過傳統(tǒng)平臺上的 Facebook 瀏覽 360° 內(nèi)容的體驗情境與 VR 當中的完全不同。人們每天都會多次使用手機或桌面設備訪問 Facebook,模式較為碎片化,而 VR 使用行為的持續(xù)時間更長,使用意圖更為明確;人們通常會挑選一個時段出來專門用于沉浸化體驗。 此外我們還發(fā)現(xiàn),人們雖然很喜歡 360° 內(nèi)容,但像一直以來那樣舉著手機同時左右轉身進行觀看的方式仍然相當不便,尤其是在公共場合。Facebook 360 中的“收藏”部分便是為了解決這一問題而存在的 – 你在手機上訪問 Facebook 時,可以將 feed 流當中的 360° 內(nèi)容收藏起來,然后在方便的時候通過 VR 設備搭配 Facebook 360 來訪問這些內(nèi)容。這樣,人們便不會因為日常場景當中的不便而錯過他們喜歡的 360° 內(nèi)容了。 這是一種傳統(tǒng) 2D 媒介與 VR 環(huán)境互相配合、共生共存的生態(tài)機制 – 我們不必也無法要求人們?nèi)タ桃飧淖內(nèi)粘鼍爸械男袨槟J?,只要引導他們在更加便利的情境當中通過特定的方式來獲取更加沉浸化的體驗即可。 我們的另一個目標就是通過 Facebook 360 幫助人們發(fā)現(xiàn)更多的優(yōu)質(zhì)內(nèi)容。為此,我們設計了“發(fā)現(xiàn)”界面,這里匯集了 Facebook 當中所有的熱門 360° 內(nèi)容,你在觀看的同時還可以關注作者,以此逐漸獲取到更多自己感興趣的內(nèi)容。 設計思路 我們在 Facebook 360 的設計歷程當中始終遵循以下五條設計思路:
1. 被動式的沉浸化體驗 通過測試,我們發(fā)現(xiàn)多數(shù)的 Gear VR 用戶并不會在站立狀態(tài)下使用設備。他們通常會坐在沙發(fā)或床上進行使用,而且他們表示,長時間的通過觸控板進行操作會讓人感到非常疲勞。這些發(fā)現(xiàn)對 Facebook 360 的導航與交互機制的設計產(chǎn)生了重要的影響。 舉例來說,很多產(chǎn)品需要人們在內(nèi)容列表與詳情狀態(tài)之間反復切換,對于 VR 來說,這是一個較為嚴重的交互痛點。我們的解決方案是,當你瀏覽過當前的 360° 照片或視頻之后,系統(tǒng)會自動幫你切換到下一篇內(nèi)容,你無需進行任何返回列表狀態(tài)的操作。這種模式就像無縫銜接的敘事幻燈片,人們在多數(shù)時間內(nèi)無需手動進行繁瑣的操作,只要找個最舒服的姿勢坐下,將自己沉浸到內(nèi)容當中便好。 在“發(fā)現(xiàn)”、“關注”、“收藏”和“時間軸”各自的網(wǎng)格視圖中,你可以注視并點擊任何一張縮略卡片來進入預覽模式;如果你覺得內(nèi)容不錯,還可以注視并長按這張卡片的任何地方,籍此喚出針對該內(nèi)容的互動選項,或是通過注視并點擊內(nèi)容摘要來查看更多信息。
2. 多種交互方式 在允許的情況下,我們會為每個操作設計補充性的交互方式。這樣,人們便可以選擇最舒適的方式來完成常規(guī)任務。 譬如在網(wǎng)格視圖中,你可以通過注視內(nèi)容區(qū)域的左右兩側來瀏覽更多內(nèi)容,同時也可以通過點擊虛擬導航按鈕或是在設備的觸控板上前后滑動來實現(xiàn)。
3. 通過景深強化信息層級 長久以來,我們都習慣于自上而下、從左向右的對信息層級進行規(guī)劃。然而在 VR 環(huán)境中,處于視線焦點位置的元素始終擁有最高優(yōu)先級;同時,與自己距離較近的物體總會比距離較遠的那些更加容易引起關注。因此,我們必須充分利用景深這一要素來構建 VR 界面的信息層級。 在實際設計過程中,我們發(fā)現(xiàn),在網(wǎng)格視圖下預覽某張卡片當中的內(nèi)容時,動態(tài)的景深變化可以帶來一種“透過視窗凝望另一世界”的感覺。這種體驗符合用戶在 VR 環(huán)境中的心智模型,因此有助于提升新媒介產(chǎn)品的親和力。 具體的設計方案就是使內(nèi)容卡片隨著用戶表現(xiàn)出的交互動機而動態(tài)的改變其在 z 軸上的位置。默認狀態(tài)下,卡片與主視角之間的距離為 6 米;當你注視這張卡片時,距離會縮小至 5 米;發(fā)生點擊行為時,距離會進一步縮小至 4 米,此時視線可以良好的聚焦于卡片上的元數(shù)據(jù)。每一次距離變化都會經(jīng)由平滑的過渡動效來完成。
我們發(fā)現(xiàn),通過構造景深來幫助人們感知自己與界面元素之間位置關系,人們在進行界面導航操作時會感到更加輕松。
4. 優(yōu)化交互細節(jié) 我們在凝視交互的細節(jié)設計優(yōu)化上投入了很多精力,盡最大可能確保用戶在使用過程中感到舒適與輕松,僅在絕對必要的時候需要他們抬起手來通過設備上的觸控板完成精準性較高的操作。 舉例來說,當你的視線焦點正在移近某個交互元素時,準星會自動吸附到該元素上面,因此你無需非常精確的控制頭部運動即可聚焦于目標對象。這樣的細節(jié)看上去無足輕重,卻能使每一次的凝視交互成本降低到最小值,優(yōu)化效應積累起來便能提升整個產(chǎn)品的使用舒適度。
5. 隨時通過實際設備進行驗證 在打造 Facebook 360 的整個歷程里,我們有幸得到了各行各業(yè)朋友們的支持。有他們自始至終參與到用研與測試當中,我們得以步步為營的向前推進著設計流程。在那幾個月里,我們每周五都會請來一些被測,其中一些完全沒有嘗試過 VR,而另一些則精通此道。作為設計師,我們會在測試當中驗證自己所理解的心智模型及常見使用情境,包括設計方案中的信息架構與交互模式是否合理,等等。 在此期間,我們更深切的意識到,原型制作同樣是 VR 設計流程當中不可或缺的重要組成部分。很多時候,在 2D 設計平臺上顯而易見的東西,通過 3D 設備實際體驗起來會很復雜。幾個月下來,我們越發(fā)熟練于快速制作原型然后通過實際設備進行驗證的設計方式。在最后的階段,我們甚至打造了一個極為完整的、通過實際數(shù)據(jù)進行驅(qū)動的高保真原型,力求在互動方式和視覺樣式上盡可能達到實際產(chǎn)品的級別。這個原型的主要用途為工程師們提供最為精準的目標參考,幫助他們更有效的進行設計還原。 作為產(chǎn)品設計團隊,看到人們可以通過 Facebook 360 更為沉浸的體驗著那些精彩的全景內(nèi)容,我們真的很開心。對產(chǎn)品進行持續(xù)的改進迭代,是我們接下來的長期目標。