VR界面設計的整個工作流程是怎樣的？

12-14

全文大致參考視頻：https://www.youtube.com/watch?v=-mcXAMDch7s
另外我這篇是界面相關的，如果你想看VR設計相關，可看《VR設計中是如何建立用戶模型的？》
—————————————————————————————————————
1、產品經理繪製流程圖：

給什麼樣的用戶群設計的？
用戶想在你的VR 應用中獲得怎樣的目標（滿足怎樣的需求）？在最下面的結尾處則為用戶將要完成的目標（獲得的結果滿足的需求）

……

—————————————————————————————————————
2、產品助理策劃手繪線框圖：

—————————————————————————————————————
3、產品設計師製作靜態低保真原型
把上面的草圖在unity中做出來，比如平面上的方形做成unity中的方塊。

定義每個產品模塊的功能。
比如添加圖片、標題和交互功能。

戴上HMD查看效果：
因為VR里的相對像素密集度太低了，而且又有一定程度的畸變，所以簡單地把界面放到VR里就會看不清，也就是所謂的可讀性太低。
（VR中如何保證文字的『可讀性』？）

將頁面『捲起來』：
正如我在《為什麼VR的界面要放在一張『弧面』上？》中所說的問題，此時得將頁面卷過來一點兒——讓你的視角到每個頁面的距離相等，從而保證每個字有相同的『可讀性』。

將整個界面縮小到用戶FOV能夠一覽無餘的範圍內：
所以將頁面控制項放大，字放大，看起來整個顯得小了？正如我在《VR中的界面和文字，該怎麼排版？受什麼因素影響和制約嗎？》提到的，因為FOV的限制，用戶需要轉頭、轉眼來看到整個頁面，那多累啊，於是將控制項集中到這一塊區域內。

這種布局叫做volumetric layout。

—————————————————————————————————————
4、交互設計師製作高保真原型
嘗試著在頁面控制項上添加材質（貼上可能用到的內容縮略圖）。
可以看到，即使放上高質量的圖片，因為解析度限制，能顯示出來具有一定可讀性的並不多。
（理想的VR頭顯需要達到多少解析度，才能消除紗門效應？現在做到了什麼程度？）

—————————————————————————————————————
5、用戶研究員和測試工程師進行用戶研究和用戶測試
按照《VR中該如何進行用戶研究（研究用戶是怎麼玩的）？》中所說的方法：
（1）首先測試用戶能否在360°的球面上找到一塊不到100°的弧形平面？（那塊弧形平面就是我們的主界面。）

（2）用戶知道icon的功能嗎？
（3）用戶知道如何滾動頁面嗎？
……
—————————————————————————————————————
6、視覺設計師進行美術製作
這個時候視覺設計師（註：VR時代的視覺設計師為遊戲美術師，比如場景設計師、角色設計師等）將界面放入場景中查看是否舒適。

場景設計中最大的限制在於手機的性能，比如daydream的性能限制是：

draw call要小於100（為什麼應該盡量減少draw call？）
polygon要小於100K（如何簡化包圍多邊形？）
pixel fill要低（三角形填充演算法的主要實現細節和注意點是什麼？）

……
是不是聽得頭都暈了？所以最好的解決辦法是用模板著色器（stencil shader）——生成了一個ODS（omnidirectional stereo，全方位立體）。一個球面的mask，最後得到一張三自由度的全景圖，這也就是整個play store VR的背景360°圖。
用全景圖代替即時渲染的幾何體，極大地降低了實時渲染的工作量。

不過它的問題是只有一張單薄的球形曲面（當然普通用戶看不出來），所以UI控制項只能擋在它前面，而不能放上去。

（那實時渲染的三維動畫和一個提前渲染的全景視頻，在用戶看起來有什麼區別呢？小白用戶可能看不出來，而我們內行有一種分辨的方法：那就是傾斜你的頭部，馬上就發現它只是張單薄的球面~）
—————————————————————————————————————
7、動效設計師設計動效轉場動畫

交互設計師和工程師討論系統層級的設定，將不同層級的頁面產生不同的層級關係，並設定頁面滾動方式（VR的滾動視圖『橫向』滾動好還是『縱向』滾動好？）。

動效設計師根據頁面層級的設定設計動效，並用動效引導用戶視線（VR頁面動效設計中如何引導用戶視線？）
這是正常的界面，兩個同級頁面之間保持在同一Z軸上。《VR界面設計中為什麼前後兩個頁面之間的Z軸深度差不能過大？》

當一個頁面被raycast戳中時，它微微向前抬起

這裡動效設計師設計了parallel effect（這種交互的特點是，通過動畫產生深度錯覺）：
當raycast戳到jump頁面的左上角時，頁面右下角抬起。

當raycast戳到jump頁面右上角時，左上角微微抬起。

動效設計師展示交互動效——
未hover on的狀態：

當被cursor選中時，整個icon相對於整個畫面向前移動，icon的背景層和圖形層分離，icon下面顯示出APP的名稱。

然後就可以交給開發團隊了。

貼點乾貨吧，美國團隊的lab裡面的技術小哥做的翻譯稿《如何為VR設計3D用戶界面》如何為VR設計3D用戶界面 - bugevr的文章 - 知乎專欄
================================================================作者：bugevr
鏈接：如何為VR設計3D用戶界面 - bugevr的文章 - 知乎專欄
來源：知乎
著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。

如何在VR里體現用戶界面信息？

世界中的UI（In-world UI）又叫做抬頭顯示界面（HUD）, 相信每個遊戲玩家或者接觸過3D場景的人或多或少都比較熟悉。它是整個場景中的體驗的一部分，也是用戶情感的一部分。當然不恰當的UI往往也會打破用戶美好的體驗情感，所以這也是為什麼很多UI人士都呼籲更少的UI往往會帶來更好的效果。所以我們如何在VR里體現用戶界面信息呢？

一個較好的例子如下圖：我們可以把左邊這個傳統的注有標籤信息的杯子轉變成右邊這個更直觀的體現當前容量的杯子。這樣就不需要額外的顯示該杯子的剩餘容量（圖中標籤所示：還可以喝6小口），而用杯子當前所呈現的剩餘容量所佔總容量的比例，來直觀的告訴用戶大概杯中還有多少飲料供用戶享用。

圖1-1

但反對者們往往會抗議道：「這種表示方式有時候太過微妙了，有的時候我們可能必須要一個大大的紅色按鈕來提醒用戶」，那麼我們應該如何創建VR的UI呢？下面讓我們來談一談我們可以從傳統的3D用戶界面中得到的啟發

我們首先要做的是吸引用戶的注意，為此我們引入3個設計原則：

1，為了可靠性而保證顯示在視角的中心：當有重要的信息需要演示的時候，UI設計師需要考慮用戶的關注點在什麼位置，並且要預估用戶接下來的行為，從而保重重要的信息始終在用戶視角的中心。

2，描繪邊角輪廓來吸引用戶的注意：比如在攀岩遊戲中，在用戶的手腕周圍描邊，用顏色來表示目前攀岩的狀態和可行程度。

3，在VR的用戶界面中，語音提示或者聲音往往比其它東西要重要得多。

其次我們要注意深度的使用，層次感往往能給用戶帶來很好的用戶界面反饋。

現在讓我們談談標記一個目標，在傳統的設計中有很多方法可以做到，比如縮放目標來保持尺寸的一致性，也可以直接面對用戶，或者始終把目標至於所有場景的最上層，就像下圖二所示的那樣，但這些都有一個問題那就是沒喲那麼強的3D感。

圖1-2

同時在VR中也會帶來一些問題，比如用戶不應該在3D場景中看到被遮擋的界面元素。同時也會對場景的深度信息（depth confusion）產生困惑，如下圖顯示的情景卻失了深度信息就使得VR不那麼立體了。

圖1-3:

其實解決方式也很簡單，那就是提供深度信息，如下圖（圖1-4）所顯示的那樣：

圖1-4

此外，在傳統界面常見的扁平化設計如果過多的出現在VR中可能會帶來一些問題，原因是這同樣隱藏了深度信息。但有時候我們並不想全部用光，陰影和距離來顯示UI，那麼應該怎麼辦呢？

一個很好的解決方案是使用基於距離的著色器（Depth-Based Shader）,如下圖1-5左半部分所示，距離越近的物體越亮。

圖1-5

此外，我們還可以使用菲尼爾效應（Fresnel effect）來顯示不透明的物體。如下圖1-6所示，來減少用戶對於距離的困惑。

圖1-6

那麼現在再讓我們來談談菜單。VR中的菜單和傳統菜單一樣，主要是提供了項目相關的信息。所以並不需要對VR的菜單做過多的改變。但是正如前面所說，過多的菜單有時候會給用戶帶來負面效果，所以多用場景中的一些物體的改變，來和用戶進行交互，如文章開頭提到的水杯就是一個例子。

再設計VR的菜單的時候，請牢記以下幾點：

全局的信息如滾動條等往往沒有太大的效果，因為用戶總是更關注VR場景內的內容。

2. 用好一些過渡效果是關鍵。

如果在大家設計的VR場景中，使用了手柄等控制器，如何指導用戶操作就變得很重要。首先應該向用戶顯示手柄中的每個按鍵作用，這裡我們全局的顯示手柄中按鍵的布局位置，而不是單純的告訴用戶A,B,C鍵是幹什麼用的。此外，我們應該給用戶一個全面的操作演示和介紹，使用戶不至於暈頭轉向。還有一個很有意思的現象，在設計按鍵的時候，有些設計師喜歡用鬆開Release這個動作來表示完成了按鍵，然而這個設計有時候可能會帶來一些麻煩，因為體驗VR的用戶總是希望更快的得到反饋。

以上對於傳統用戶界面對於VR用戶界面的啟示聊了很多，總結的來說可以歸為以下幾點：

1. 好的UI可以不是」真正的UI」。

2. 場景中的信息因為深度，遮擋，立體感等原因很難做到一致性。

3. 菜單如果運用得足夠好往往會帶來意想不到的效果。

那麼現在讓我們來上一點幹活，進入第二部分以後，讓我們來聊一聊一些技術細節。

1. Alpha排序（Alpha Sorting）：VR中的用戶界面往往是Alpha 混合的（Alpha Blending）, 比如我們之前提到的，通過一些透明的方式來顯示過渡效果。現在一個通俗的做法是把這些透明的UI元素排序，但這可能會有些問題，比如下圖2-1所示：

圖2-1

我們本意是希望，紅色的物體在藍色面板之上，但由於藍色的平面離我們的人眼更近，反而造成了紅色物體被遮擋到藍色面板的後面。對於這個問題該如何解決呢？

第一個解決方案是使用「順序無關的透明」（Order-independent Transparency）,比如給我們希望在上面的物體加一個偏差值，如下圖所示，使它顯示在上面。

圖2-2

2. 文字呈現（Text Rendering）：這裡我們介紹三種方法。第一種方法是將文字渲染到貼圖上，再把該貼圖貼到一個模型上。這種當文字的尺寸很小時，為了可以放到看清，我們需要需要一個高解析度的材質。第二種方法是有向距離場技術（Signed distance fields），相關技術細節由於演講者並沒有說明，所以這裡也不做過多的論述。

簡而言之，這種方法達到的效果是在像素的級別將文字邊緣重新描繪，使得字體看上去更加清晰，如下圖2-3所示，左邊輸入的是一個模糊的字體，我們在程序中使用該技術重新繪製一下文本，使它成為右邊的文字從而變得清晰。這種方法的問題在於文字可能看上去很圓潤，而且需要很多工作量。

圖2-3

第三種方法是直接在場景呈現文本網路（text mesh rendering）, 也就是說我們直接在場景中將文本以3D模型的形式的形式顯示出來。這也有些問題，文本模型因為建模的面數的限制可能會看上去有稜角和鋸齒。但從長遠看可能是一個很好的解決方法，因為它使文字的解析度會獨立於整個場景。

以上三種是目前常用的VR場景中文字呈現的方式，我們設計的時候可以根據具體的場景選擇合適的方法。

3. 懸停檢測（Hover detection）:懸停檢測在VR的場景中，通常體現在我們如何展示用戶當前的視角聚焦在哪個菜單上。通常我們會用光線投射的方式（ray-casting）。這裡我們再介紹另一個微妙的方式。比如「角度對比」如下圖2-4，被選擇物體會呈現一個不同的角度來提示用戶。

圖2-4

4. 抗鋸齒技術：抗鋸齒對於菜單元素尤其重要，因為過多的鋸齒會轉移用戶的注意力。而現在市面上常見的後加工技術對於VR菜單的抗鋸齒效果處理得都不算好，所以需要我們設計師在一開始就留意和處理好鋸齒問題。

三．設計流程：

最後，在該講座中，Riho給我們分享了他作為VR UI設計師的設計流程。首先他會畫大量的草圖，接著他會用手和聲音預先模擬一下各個UI元素如何動畫。最後他把草圖結合動畫應用到場景之中。

現在再讓我們來看一下專業的VR用戶界面的生成流程是怎樣的。

1. 從UV布局開始：創造並組合最基本的貼圖，圖片，文本部件。

2. 在3DsMax中建模和做動畫。

3. 將模型和動畫鏈在一起。

4. 在遊戲引擎內建立邏輯流程圖。

5. 調試直到達到理想效果。

結來說，VR很棒！但是設計VR的用戶界面會有許多細節與傳統的用戶界面不同，對於我們每一位VR設計師來說，我們可能會遇到很多問題。希望本文提到的內容和技術細節可以幫助每一位VR設計師更好的解決遇到的困惑。

在4月份的時候，我花了幾個星期為三星Gear VR做設計。我想分享一下我為什麼要在VR領域做hack-a-month（在新團隊試驗工作的一段時間的術語），以及這短短兩周我在設計過程和設計模式中的一些發現。

為什麼選VR？

我在學校學習的是工業設計和人機交互專業。我最大的興趣之一就是打通兩個學科。在當時，這意味著設計一個電子設備的全部，所以我的大四項目就是設計一部手機——既要設計手機的物理形式又要設計數字界面和生態系統。而最讓我興奮的是實體交互，可以貫穿物理和數字平台。但是，現實世界中ID（工業設計）+HCI（人機交互）的應用非常少見。我最終在一家工業設計諮詢公司工作，一年後我離開了，我的3D建模技能從那時開始就很少用了。

我+早期用iPhone加速感應器模擬的頭部轉動模型

幾個月前，我參觀了Oculus 實驗室，這是在他們搬入Facebook不久後。我立刻想起了我在融合物理和數字界面方面的熱情。由於我代碼方面的有經驗，這意味著我可以掌控整個設計和模型製作的過程。

在facebook ，鼓勵也支持員工追求他們有激情的項目。我和我的經理一起設定我的工作時間，看是否有機會在VR工作。最終他給我安排出了一個hack-a-month，去和Joyce Hsu, Sean Liu, 以及Joe Lifrieri一起工作。在四月的時候，我飛往加利福尼亞參正式開始這段工作。

設計工具：Unity vs Quartz Composer（沒有相應軟體經驗的同學，此段會暈，可跳過）

在Oculus我學到的第一個興奮的工作流程是他們是從 photoshop → Cinema 4D →Unity → 代碼（如果他們選擇不在Unity裡面做的話）

Unity就像Flash的3D版本。在場景裡面有可以移動的所見即所得的對象，同樣你也可以附上腳本做一些交互動作。大量的遊戲都是用它來製作的-它是跨平台的而且有很好的在線社區可以問答。

你也需要用到這個荒涼的IDE叫做Monodevelop，它不支持OS X的文本編輯快捷操作，也不支持合適的vim編輯器…並且需要寫C語言或者一個輕微定製版本的javascript

自從在facebook撿起，在驗證新交互模型的過程中，我最看重的一件事是調整和測試之間的即時反饋閉環。Unity 允許在一些項目進行時進行變數的調整，但是那先變化在播放後就會立即丟失。Unity的監視器管理和 Oculus DK2也會減慢閉環的迭代速度。一個DK2可以作為一個獨立的1080p解析度下全屏的監視器，但是Unity 不能提供即時的全屏視圖，除非你真的每次建立一個獨立的os x 或者android app。

由於unity的缺點，我決定研究一下QC來支持一下DK2。現有的線上插件不能夠支持最新的sdk，所以我花了一晚把基礎的方向角打成補丁，並且渲染了兩個平面圖（沒有立體圖）結果呢？效果非常好。雖然沒有了深度感，但是我決定我可以很容易的把靜態UI放在Unity中，來測試3D場景中的放置。

現在，有了在DK2上面設置的QC，我可以非常快速的迭代、調整、驗證

為了VR環境而設計

一個移動UI設計新手的暴露的標誌是排版和點擊目標過小。任何新的人體輸入形式，都需要調整界面，讓其容易被使用。對於VR來說，我發現有幾個主要的點對我的設計衝擊很大。

讓內容在一個舒適的可視區

在我做 hack-a-mouth之前，我做的第一個設計練習，是嘗試用Unity做出一些腦海中關於通知的模型。當你在虛擬現實中的時候，你被完全的從現實中隔開，快速的收到通知並且回復對你來說就非常有用。當時我並沒有DK2，所以我在桌面上建立所有模型。我認為這個元素應該掛在屏幕邊緣，如果快速轉動你的頭去看他們，它們會迅速移動到可視角度的中間並且激活。

不幸的是當我拿到DK2並且嘗試做模型時，發現完全失敗了：當你帶上頭盔，在你可視範圍邊緣的懸浮的物體是很難聚焦的。你可以這就試試：在你視線邊緣嘗試讀你手機的內容，並且不能轉頭，只能轉動眼睛。

結果當我開始hack-a-month的時候，團隊成員告訴我這是最好的初期練習之一：讓內容在特定的框架內，並且要在你的可視範圍中央。

為有限的頭部轉動，設計簡單的交互

最大的物理約束就是你戴了一個笨重的眼鏡。我有一個通知原型的想法，就是檢測頭部轉動的速度或角度，來作為激活通知的意圖。在實踐中，它實在太尷尬了。Oculus團隊開始研發一個模型：在GEAR VR的觸控板上滑動，來避免這種限制，特別是有大量聚合內容要展現時（如應用商店）。這樣你就可以把周圍的內容呈現到眼前，而不需要讓頭部轉動太多。

我發現滑動是種讓人迷惑的交互方式，和眼鏡邊安裝的觸控板沒有什麼關聯性。在我「hack-a-month」中最新的一個界面設計中，Joyce和我用Sketch和PS快速探討了多種布局方式。我們很快淘汰了一些布局（柵格是種給人感覺不知所措又包含了無限內容的集合，然而我們想要的內容集合是感覺上單向且舒服的）

我朝一個單行內容移動，開始你聚焦在第一個上，允許水平滾動。然而我不想去滑動，而且有個頁面控制浮動按鈕感覺累贅。我決定試試映射一個舒適視場的全部滾動寬度（~ 90度）。做了一些改進，像翻頁一樣貼合到任一內容，而不只是流體滾動，事實上它也以一個我們感覺很不錯的結果而告終。

懸停狀態東山再起

在移動端，設計師們失去了一個有價值的工具，用來展示有遞進關係的內容和一個實用的圖層，就是懸停狀態，在電腦和網頁時代長期被用於任何事物從工具提示到OS X的放大版DOCK。在虛擬現實中，懸停狀態以視線方向的形式又回歸了。看著一個物體或控制住，可以透露出你可能不知道的更多信息，就像一個縮略版的視頻預覽。

另一件事我在第一個原型里嘗試的，是一個用「看著並且保持住」或「長時間注視」的交互方式去激活內容而不需要任何形式的輸入。這是一個在Kinect界面里重度使用並且總是讓我感覺很好的交互方式，我想它可能會在VR領域裡更好用，因為這比在空氣中搖頭的準確度更高。不幸的是，當其他輸入方式允許你看著一個事物不需要交互，「看著並且保持住」則讓你的目光休息變得有些難，事實上在閱讀中還要擔心什麼東西會被觸發。

當我開始第一個項目，第一件我想要試試的事（還有些JOE的推動）就是為用游標作為菜單導航的視頻遊戲，模擬一個普通的交互方式：直接貼近最接近的互動區域來補償不準確的游標控制。在虛擬現實中，游標事實上是相當準確的，但是它依然比只做必要的確切精準動作要難一些。

我發現增加熱區去處理5~10度間的視線夾角是一個好的經驗法則（拇指規則）。這意味著某些事物你可以只通過視覺設計，就像視頻進程欄一樣做的很窄，卻依然可以舒適的擦過而不再需要滑離控制。

另一件事我發現當用Quartz Composer做一個游標動效的時候，隱藏游標（或對它進行動畫處理，看起來它就像是貼近到控制項的懸停狀態）實際上降低了游標與特定控制項間對齊的難度。

虛擬現實設計中結束時的思考

在「hack-a-month」的最後，我以一個非常立體的原型和新的交互方式為結尾，給了我工作的團隊一些靈感。所有的原型都用Quartz Composer做到了高保真的效果，在相對較短的時間裡（「hack-a-month」實際上只有2.5周）。不幸的是，我不能在旁邊經歷實現出的效果，但是我很興奮的看到了設計是如何應用到實際使用中的。

下一個是什麼：工具

在過去的幾年裡作為一個產品設計師，一件讓我越來越清晰的事就是：設計和代碼的相互作用對我有著強烈的激發。通過我的設計經歷，我最喜歡的時刻就是那些當我遇到的技術障礙檢驗了設計方向的時候。不管是學習Objective C來攻克時間點，還是在JS中度過數據人生。

虛擬現實的工作進一步證明，我依然享受思考產品和設計在三維空間中的新的交互方式，我最喜歡的事就是搭建工具來幫助證明設計決策。這就是為什麼我和Brandon Walkin對我們在FACEBOOK的設計工具開啟了一個嚴肅而長遠的審視，他領導了Origami的開發。如果你喜歡設計工具的工作，並且在紐約生活也在你的日程中，就聯繫吧！

----------------------------------------分割符---------------------------

qq群：

http://qm.qq.com/cgi-bin/qm/qr?k=i70vfJ44qMkTqj423-1Jakyrdw1w9qw7 (二維碼自動識別)