【VR設計之Facebook Spaces系列】Part 4——創建VR UI

這篇文章是關於Facebook Spaces設計系列文章的最後一章。

作者介紹：Christophe Tauziet之前在Parse & Apple工作過的Facebook Spaces首席設計師分享！

一種新型的界面

對於我們的設計團隊來說，最大的挑戰之一是設計空間的用戶界面。與傳統的web、桌面或移動設計不同，我們可以依賴已有的UI元素和交互模式，這些模式是人們多年來學習的，其中大多數模式還沒有被VR所發明。

我們的界面設計的一個重要目標是確保UI在這裡是為對話服務的，而不是妨礙它。雖然我們可以擁有充分利用空間的界面，並在專註於執行某項動作時隔離人們。但我們尋找的是界面和交互，這些界面和交互可以幫助人們實現自己的目標，同時還能與朋友們還是在空間中，繼續他們的對話。我們想讓UI感覺短暫而有用，而不是中斷。

為了幫助人們區分「真實的」對象和用戶界面，我們早期採用了一種面向用戶界面的全息視覺語言。這不僅使我們能夠直觀地將交互元素從其他環境中分離出來，它還使我們能夠更加靈活地使用物理和臨時的UI，因為人們已經有了一個全息圖是輕量級並且短暫的概念。

在我們構建 Facebook Spaces的過程中，我們提出了一些值得提及的界面和交互。他們中的一些人並沒有取得成功，不得不被拋棄，而有些人則表現得更好。在接下來的幾段中，我將分享一些我們探索過的概念，以解決我們的一些問題和我們所做的學習。

虛擬桌

在我們早期，我們建造了一個人們可以自由地在一個空間里漫遊的原型。我們針對移動問題嘗試了不同類型的空間。我們很快發現這一方案的最大問題之一:很難與人進行對話。當人們能夠自由地四處走動時，人們往往會迷失方向，並沒有真正地相互交流。

在另一個實驗中，我們建立了一個工具，人們可以一起創作音樂。在第一次迭代中，人們會站在一邊，看著一個巨大的鍵盤式樂器。雖然真的很有趣，很好玩，但人們從來沒有真正地看著對方說話。

快速觀察一下我們在現實世界中是如何運作的，當與人們交談時，我們會指出我們缺少的基本元素:一個虛擬的桌子，用來錨定談話並建立一個社會結構。

在2016年F8大會上，我們的第一張桌子是一個長方形的托盤，人們會站在那裡，在那裡他們可以撿起/落下的東西。我們還使用不同的尺寸和配置(正方形、長方形、大、小、堅固、透明等)。對我們來說最好的解決方案是一個圓形的全息桌，可以舒服地坐著4個人。

主菜單VR手錶

我們開發的第一個界面是我們的主導航UI。我們的第一個原型是一個虛擬的手錶，它可以連接到你的虛擬手，並包含我們APP的頂級菜單。雖然很容易發現和很酷，但我們知道要瞄準移動狀態時手的按鈕是很困難的。這對手臂也是相當累人的，因為它需要人們大幅度地抬起肘部來讓界面可讀和可讀。這表明，手錶用於有限的交互(例如通知)是很好的，比如顯示簡訊提示信息，但對於複雜的界面，比如主導航系統，卻感覺不那麼好。

VR工具帶

加在你的身體上，工具帶感覺非常私人。當你看到它的時候，它會讓你用一隻手做出選擇或者抓住物體，這感覺很好。但是在使用了幾天之後，我們意識到脖子上有多不舒服，反覆盯著工具條看。對於使用該應用的用戶來說，使用這款應用時，他們的腿會一直打到他們的腿，這也很有挑戰性。

VR好友

VR好友的想法是提供一個單一的對象，你可以四處移動，把它放在你想要的地方。點擊這個對象就可以在它周圍打開一個圓形菜單，讓你可以訪問它的子菜單。

這種方法的好處是多方面的:你可以用一隻手操縱UI，它被固定在世界上，讓你可以精確地掌握你的時間。你也可以在空間中選擇它的位置，當你在一邊畫畫的時候，你可以帶著它。移動它很有趣，也很有趣，尤其是當子菜單打開時，它們被放在一個彈簧上，並且以一種有趣的、有彈性的方式置於後面。

但缺點也同樣多:

「圓形菜單」的意思是，你必須多次在空中揮舞你的手，才能擊中不同的子菜單，選中你想要的。這就造成了你手臂上的疲勞，而且效率很低。

打開一個2D界面意味著你要麼轉身面對它，要麼打開一個我們無法保證你舒適感的奇怪的位置。

你可以移動它的事實也意味著你可以很容易地把它放錯地方並且不得不去尋找它。

當你經常改變它的位置和方向時，很難建立一個關於如何使用UI的空間模型/肌肉記憶（條件反射）。

VR停靠欄

在過去的探索和其他一些研究中，我們設計了第一個版本的VR停靠欄:一個三維界面，它可以在你面前的桌子上固定，讓你可以輕鬆快速地訪問你的內容，而不用移動太多。

這個解決方案和工具條一樣有好處，而不需要讓你看得太多。最主要的問題是可伸縮性和佔用空間的空間大小。浮動的球體也妨礙了您與桌上物體的交互方式。

VR面板

VR面板的想法是將一個交互的表面與一個外環和一個內環結合在一起，以此來構成信息結構。內環也可以作為一個區域，如選擇工具或媒體用來傳送三維物體。

與第一個VR停靠欄類似，這次探索的主要缺點是在桌上使用的空間大小，我們考慮通過在桌邊緣附近添加一個打開/關閉按鈕來解決這個問題。另一個問題是，在這個界面中，你選中的任何UI的來源都是不同的，這對於這個概念來說是不容易的。

VR停靠欄2.0

我們提供的解決方案是第一個停靠欄和一個面板的結合:一個帶有2D界面的三維停靠欄，可以在你面前展示一個UI或對象，當你不需要它的時候可以被關閉到桌子上。

這個解決方案有以下幾個原因:

人們似乎馬上就知道如何與之互動。與平板電腦的相似之處是人們可以用手指觸摸它來做出選擇的信號。

投影儀的比喻很好地傳達了UI的起源，如何打開它們，或者如何在它們之間切換。

在你面前的最小佔用面積給你一種可控制的感覺，而你的感覺並沒有感覺。

展示中心

另一個我們需要解決的問題是如何讓人們向房間里的其他人展示媒體內容。從我們的第一個原型中，我們知道把一個選定的媒體變成一個三維的物體感覺是好的。手裡拿著一張照片或一個360圓球，感覺是真實的，把它遞給一個朋友，感覺自然而愉悅。

但我們也需要一種方式，讓人們展示媒體，讓房間里的每個人都能舒服地看到它。我們早期的互動是讓你把一個360圓球貼在你的臉上來激活。雖然很令人高興，但它並不容易被發現，我們看到一些人在頭幾次嘗試用控制器撞到他們的頭盔上。我們還覺得有必要展示2D照片或視頻，讓每個人都能輕鬆地觀看。

我們調用了顯示中心的解決方案:在桌子中央的一個圓形區域，當你把一個媒體放入其中並自動開始顯示媒體時，它就會激活。360度的照片或視頻突然變成了環境，而2D媒體則開始在大屏幕上放映。

一旦投射，人們就可以用他們的停靠欄來控制他們的媒體。他們也可以結束投影，要麼停靠欄，要麼從展示中心拿走媒體。

手腕UI

另一個挑戰是找到一種與空間中特定對象交互的方法。在幾個概念之後，我們創建了手腕UI，它是一個在你的手腕內側出現的上下文界面，當你持有一個對象，並顯示你可以為那個特定對象使用動作按鈕。這相當於在桌面電腦上右鍵單擊。

這個界面非常好用，因為它很容易被發現，並且易於理解和使用。它最大的挑戰是讓它在視覺上感覺很好，讓你的手臂上有一個UI。在這個例子中，全息圖的比喻非常有用，因為在你的前臂上看到一個全息圖比一個固定在你看不見的前臂上的固有物體要好得多。

VR手錶2.0

我們的第一款VR手錶原型是一款主要的導航系統，我們了解到虛擬手錶的概念應該保持在快速、簡單的交互中，以防止你在空中長時間保持手臂的狀態。我們還了解到，翻轉手腕來獲取信息是一種快速而神奇的感覺。

有了這些經驗，我們重新定義了我們的手錶界面，作為一個通知中心。當一個朋友在Messenger上發送消息，試圖給他們打電話或發送邀請加入他們的空間時，他們的控制器會振動，聲音從他們的手錶中發出，引起他們的注意。通過手腕的翻轉，這個人可以閱讀通知並迅速採取行動。

一個進化系統

通過這些不同的界面，人們可以在空間中找到他們的朋友，訪問他們的內容和工具，向人們展示他們的媒體，並與外界保持聯繫。它們只是我們解決這些問題的第一次嘗試，並且大多數最終都將被更有力的解決方案所取代。

未來的旅程

打造Facebook Spaces的第一個版本是我職業生涯中最具挑戰性、最有趣和最有意義的時刻。我得到了一個機會，去解決一個既瘋狂又充滿激情的團隊，這個團隊充滿了才華橫溢、充滿激情的人。為虛擬現實而設計既可怕又令人興奮，因為你不能依賴多年來不斷完善的技能，必須走出舒適區去獲得新的東西。而設計VR社交體驗是一種額外的挑戰，因為存在感和沉浸感非常強烈，機會和挑戰也很多。

但對於所有的東西，無論是對於Facebook Spaces，還是VR，這只是漫長旅程的第一步，我很感激能成為其中的一部分。

我要感謝Facebook Spaces團隊的每一個人，感謝他們為實現這一目標所做出的巨大貢獻。特別是,我想感謝 Mike Booth讓我從事這個瘋狂的冒險,Charlie Sutton/Mike Schroepfer對他們的信任和支持,Brad Dickason和Alicia Berry幫助我們越過終點線,和整個身臨其境的設計團隊,幫助建立這樣的經歷:Katya Kostyukova、Gabriel Valdivia、Cliff Warren、Stephanie Engle、Richard Emms和Brian Perone。

虛擬現實設計如果你感興趣,你可以找到更多的學習資源(http://facebook.design/vr)。*

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！