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

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

• VR 是 360 度的，那我在 PS 或 Sketch 中畫布應(yīng)該設(shè)置多大才合適?
• 文字字號多大才能保證在 VR 眼鏡中的可讀性?
• 滿足用戶舒適的點擊區(qū)域需要多大?
• 如何拿捏物件遠近的 Z 軸信息?
• 在 2D 設(shè)計軟件里是以像素為單位，在 3D 設(shè)計軟件里以米為單位，他們之間如何換算?
• 如何與開發(fā)工程師溝通還原設(shè)計稿?

如何解決問題

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

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

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

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

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

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

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

如何制定規(guī)范

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

那文字和各組件應(yīng)該設(shè)計多大呢

這里需要介紹一個 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 設(shè)備 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 關(guān)系如下：

若按三星 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。結(jié)合我們前文講的 dmm 的概念，可以得出最小文字約等于 20 dmm，在二維設(shè)計軟件里，最小需要 20 號字。

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

如何實際操作

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

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

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

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

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

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

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

網(wǎng)站題目：PC端VR界面設(shè)計思路
分享鏈接：http://www.rwnh.cn/news29/160279.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、建站公司、全網(wǎng)營銷推廣、網(wǎng)站導(dǎo)航、面包屑導(dǎo)航、網(wǎng)站改版

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)