UI設計師結合自身實踐 分享VR界面設計思路

我們在進行 PC 端的 UI 設計時，不難把控設計內容的寬度、文字大小、排版布局等頁面元素，而當我們去做移動端的設計時，就很容易出現(xiàn)文字太小看不清，點擊區(qū)域太小不易操作等排版布局的問題。為什么呢？因為設備的分辨率，屏幕尺寸等硬件參數(shù)發(fā)生了變化，VR 設計同樣也會遇到這個問題。在 VR 世界中，顯示媒介不再是平面化的了，顯示范圍也似乎變得不受局限。這時的界面設計自由度變高了，但這種變化也給設計師帶來了前所未有的挑戰(zhàn)。應該如何去設計 VR 界面呢？今天我們來探討下這個問題。

VR 的界面設計不同于電腦端和移動端的設計，后兩者大都以平面設計軟件和像素單位為基礎，但當我們在設計 VR 界面時，你可能會遇到如下的一些問題：

? VR 是 360 度的，那我在 PS 或 Sketch 中畫布應該設置多大才合適？

? 文字字號多大才能保證在 VR 眼鏡中的可讀性？

? 滿足用戶舒適的點擊區(qū)域需要多大？

? 如何拿捏物件遠近的 Z 軸信息？

? 在 2D 設計軟件里是以像素為單位，在 3D 設計軟件里以米為單位，他們之間如何換算？

? 如何與開發(fā)工程師溝通還原設計稿？

? 。。。

如何解決問題

怎么很好的解決這些問題？Daydream 團隊給出了答案，下面結合他們的方法以及我們自己的研究給大家一起分享下。

我們知道，在現(xiàn)實生活中，由于近大遠小的關系，相同畫面，不同尺寸的面板，調整他們的遠近距離，在某個位置時，它們看起來會變得大小相同。這其實是因為它們有相同的角度尺寸。換言之，角度尺寸相同，它們看起來尺寸大小也相同，不管它們的距離如何。這樣我們用平面軟件做設計時，就完全不需要考慮物件距離這個變量因素了。

然而，角度尺寸這個單位與二維、三維軟件單位并不通用，而且也不方便記憶，我們需要將它轉換成通用的長度尺寸。那如何轉換呢？這里引入一個全新的概念單位，dmm（distance-independent millimeter，也叫距離無關毫米）。我們把在 1m 遠距離下，觀看 1mm 長度的物體，定義為 1dmm。因此，目距 2m 遠的 2mm 長度，也為 1dmm，3m 遠的 3mm 長度，也為 1dmm。

舉個例子，一個寬 50dmm, 高 100dmm 的物體，就表示在目距 1m 遠，它的寬是 50mm，高是 100mm。當把它移動到目距 2m 的位置，為了大小看起來一樣，它的寬則需要變成 100mm，高變成 200mm。同理，在 3m 遠時，寬高分別得變成 150mm 和 300mm。這樣，當我們設計了一個 UI 元素，即使在 VR 中需要調整它的距離，也能快速知道如何縮放這個 UI 元素。dmm 解決了 2D，3D 空間組件尺寸的換算問題。因此，設計的操作步驟就變成了如下 3 步：

1. 根據(jù)實際屏幕參數(shù)和人機工程學方法測量確定各組件的最小與舒適尺寸，制定設計規(guī)范；

2. 在二維設計軟件里進行 UI 界面設計，規(guī)定 1px=1dmm，按 dmm 單位輸出設計文檔；

3. 根據(jù) UI 設計稿 dmm 尺寸與距離倍率在 Unity3D 中還原設計。

如何制定規(guī)范

那設計畫布應該設置多大， UI 界面應該放在什么區(qū)域呢？在此之前，我們需要知道人體工程學方面的一些結論：在不轉動脖子的情況，大約 60 度視野范圍是人眼舒適觀看的區(qū)域。若轉動脖子，那這個范圍大致在水平 120 度內。這就是說，需要用戶頻繁觀看操作、重要的界面元素需要放置在如下圖的圓形區(qū)域內，次要些的信息元素可在 120 度區(qū)域以內，用戶輕微轉動頭部便可獲取。另外，正常人眼的視覺焦點不是在水平線上，而是在水平線往下 6 度到 15 度之間。

那文字和各組件應該設計多大呢？

這里需要介紹一個 PPI 與 PPD 的概念。對于電腦顯示器、平板和手機屏幕，我們習慣用 PPI，（Pixel Per Inch，每英寸像素）來表達屏幕分辨率，PPI 越高，屏幕像素顆粒感越小。當顯示屏的分辨率足夠高時，人眼視網(wǎng)膜便無法分辨其上的像素顆粒，這種屏幕我們稱之為視網(wǎng)膜屏。

在 VR 中，畫面是 360 度呈現(xiàn)的，這時用 PPD 來衡量畫面的細膩程度，則會更方便。 PPD，指每一度所包含的像素，Pixel Per Degree（像素每度），在透鏡觀察系下 PPD= px / fov。其中，fov 是指視場角，PPD 大于 60 度的顯示屏，才能稱之為視網(wǎng)膜屏（可根據(jù)視網(wǎng)膜 PPI 換算得出）。 也就是說，在視場角中的 1 度需要看到 60 個像素，才能分辨不出像素感，60 度才能達到“視網(wǎng)膜”級別的體驗。

遺憾的是，目前市場上的 VR 設備 PPD 只有 10 多。比如，HTC Vive 和 Oculus Rift 的屏幕分辨率都是雙眼 2160×1200 ，單眼有效分辨率為 1080 x 1200，F(xiàn)OV 都是 110 度。由此得出它們的 PPD 為 9.8。目前移動端表現(xiàn)最好的三星 S7 在 Gear4 下的 PPD 也才12.6，所以要達到“視網(wǎng)膜”級別體驗還有很長路要走。

Daydream 團隊給出了當前屏幕分辨率下，字體的可讀性與 PPD 關系如下：

若按三星 S7 在 Gear 4 下的 PPD 為 12.6 來計算，那么舒適文字的高度是 12.6*1.6= 20.16px，最小文字高度是 12.6*1.15=14.49px

假定在目距為 1m 的情況下，根據(jù) h= 2*d*tan(px/2*PPD) 得出，最小文字高度為 20.07mm。結合我們前文講的 dmm 的概念，可以得出最小文字約等于 20 dmm，在二維設計軟件里，最小需要 20 號字。

以下是 Daydream 設計團隊推薦的文字和點擊尺寸，可供參考。

如何實際操作

說了這么多概念和理論，下面來看看如何實際操作

首先，在 Sketch 中，設計基礎界面，讓重要的 UI 元素在 60 度眼球舒適區(qū)內，假設我們設計了如下的界面布局，除了左右兩邊淺紅色的次要面板外，其余重要元素均在舒適區(qū)內。 （Sketch 文件放在文末附件里）

然后，輸出切圖以及尺寸標注。再將切圖導到 Unity 中，在 Unity 中，我們需要建立三個層級關系：

1. 最外 Base 層，用于調整所有 UI 元素的視距，以及整體的縮放關系。Transform 面板中的 Position.Z 軸即為視距，Scale 為縮放比例。根據(jù)前文講的 dmm 概念，若要調整視距，這兒的縮放參數(shù)也做相應調整，則可讓顯示效果一致。

2. 中間 Canvas 層，用于讓各單位統(tǒng)一。在 dmm 的概念中，物體的長度單位是 mm, 而 Unity 以 m 為單位的，所以在 Unity 中需要將其換算成 0.001m。

3. 內部 UI 各元素層，這一層的各物件的尺寸屬性和二維軟件中的一樣。例如，你在 Sketch 里設計了一個 270x150 的矩形，那么到 Unity 里這一層的長寬尺寸也直接寫 270x150，完全不用管距離、縮放、單位換算之類的問題了。因為上面兩層已經(jīng)把這些問題解決了。這樣一來，工程師則可完全按原始設計標注尺寸來開發(fā)。文字字號也一樣，設計稿里選的多大，在這里也設置成多大。是不是覺得 So easy。

有時，我們需要精確的將 UI 界面置于到場景的某個位置，通過這種方法，可以推算出場景的相應比例大小，就不用老是反復調整修改了。建立好這樣的一種層級結構后，則可任性的做設計，和工程師也成好基友了。