PC端VR界面設(shè)計(jì)思路

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

VR 的界面設(shè)計(jì)不同于電腦端和移動(dòng)端的設(shè)計(jì)，后兩者大都以平面設(shè)計(jì)軟件和像素單位為基礎(chǔ)，但當(dāng)我們?cè)谠O(shè)計(jì) VR 界面時(shí)，你可能會(huì)遇到如下的一些問(wèn)題：

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

如何解決問(wèn)題

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

我們知道，在現(xiàn)實(shí)生活中，由于近大遠(yuǎn)小的關(guān)系，相同畫面，不同尺寸的面板，調(diào)整他們的遠(yuǎn)近距離，在某個(gè)位置時(shí)，它們看起來(lái)會(huì)變得大小相同。這其實(shí)是因?yàn)樗鼈冇邢嗤慕嵌瘸叽纭Q言之，角度尺寸相同，它們看起來(lái)尺寸大小也相同，不管它們的距離如何。這樣我們用平面軟件做設(shè)計(jì)時(shí)，就完全不需要考慮物件距離這個(gè)變量因素了。

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

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

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

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

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

如何制定規(guī)范

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

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

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

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

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

Daydream 團(tuán)隊(duì)給出了當(dāng)前屏幕分辨率下，字體的可讀性與 PPD 關(guān)系如下：

若按三星 S7 在 Gear 4 下的 PPD 為 12.6 來(lái)計(jì)算，那么舒適文字的高度是 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è)計(jì)軟件里，最小需要 20 號(hào)字。

以下是 Daydream 設(shè)計(jì)團(tuán)隊(duì)推薦的文字和點(diǎn)擊尺寸，可供參考。

如何實(shí)際操作

說(shuō)了這么多概念和理論，下面來(lái)看看如何實(shí)際操作

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

然后，輸出切圖以及尺寸標(biāo)注。再將切圖導(dǎo)到 Unity 中，在 Unity 中，我們需要建立三個(gè)層級(jí)關(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 的概念中，物體的長(zhǎng)度單位是 mm, 而 Unity 以 m 為單位的，所以在 Unity 中需要將其換算成 0.001m。

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

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

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

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

廣告

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