文/Kingyo（知乎授權(quán)轉(zhuǎn)載） 我們在進(jìn)行 PC 端的 UI 設(shè)計(jì)時(shí)，不難把控設(shè)計(jì)內(nèi)容的寬度、文字大小、排版布局等頁面元素，而當(dāng)我們?nèi)プ鲆苿佣说脑O(shè)計(jì)時(shí)，就很容易出現(xiàn)文字太小看不清，點(diǎn)擊區(qū)域太小不易操作等排版布局的問題。為什么呢？因?yàn)樵O(shè)備的分辨率，屏幕尺寸等硬件參數(shù)發(fā)生了變化，VR 設(shè)計(jì)同樣也會遇到這個(gè)問題。在 VR 世界中，顯示媒介不再是平面化的了，顯示范圍也似乎變得不受局限。這時(shí)的界面設(shè)計(jì)自由度變高了，但這種變化也給設(shè)計(jì)師帶來了前所未有的挑戰(zhàn)。應(yīng)該如何去設(shè)計(jì) VR 界面呢？今天我們來探討下這個(gè)問題。 VR 的界面設(shè)計(jì)不同于電腦端和移動端的設(shè)計(jì)，后兩者大都以平面設(shè)計(jì)軟件和像素單位為基礎(chǔ)，但當(dāng)我們在設(shè)計(jì) VR 界面時(shí)，你可能會遇到如下的一些問題： ? VR 是 360 度的，那我在 PS 或 Sketch 中畫布應(yīng)該設(shè)置多大才合適？ ? 文字字號多大才能保證在 VR 眼鏡中的可讀性？ ? 滿足用戶舒適的點(diǎn)擊區(qū)域需要多大？ ? 如何拿捏物件遠(yuǎn)近的 Z 軸信息？ ? 在 2D 設(shè)計(jì)軟件里是以像素為單位，在 3D 設(shè)計(jì)軟件里以米為單位，他們之間如何換算？ ? 如何與開發(fā)工程師溝通還原設(shè)計(jì)稿？ ? 。。。 如何解決問題 怎么很好的解決這些問題？Daydream 團(tuán)隊(duì)給出了答案，下面結(jié)合他們的方法以及我們自己的研究給大家一起分享下。 我們知道，在現(xiàn)實(shí)生活中，由于近大遠(yuǎn)小的關(guān)系，相同畫面，不同尺寸的面板，調(diào)整他們的遠(yuǎn)近距離，在某個(gè)位置時(shí)，它們看起來會變得大小相同。這其實(shí)是因?yàn)樗鼈冇邢嗤慕嵌瘸叽?。換言之，角度尺寸相同，它們看起來尺寸大小也相同，不管它們的距離如何。這樣我們用平面軟件做設(shè)計(jì)時(shí)，就完全不需要考慮物件距離這個(gè)變量因素了。 然而，角度尺寸這個(gè)單位與二維、三維軟件單位并不通用，而且也不方便記憶，我們需要將它轉(zhuǎn)換成通用的長度尺寸。那如何轉(zhuǎn)換呢？這里引入一個(gè)全新的概念單位，dmm（distance-independent millimeter，也叫距離無關(guān)毫米）。我們把在 1m 遠(yuǎn)距離下，觀看 1mm 長度的物體，定義為 1dmm。因此，目距 2m 遠(yuǎn)的 2mm 長度，也為 1dmm，3m 遠(yuǎn)的 3mm 長度，也為 1dmm。 舉個(gè)例子，一個(gè)寬 50dmm, 高 100dmm 的物體，就表示在目距 1m 遠(yuǎn)，它的寬是 50mm，高是 100mm。當(dāng)把它移動到目距 2m 的位置，為了大小看起來一樣，它的寬則需要變成 100mm，高變成 200mm。同理，在 3m 遠(yuǎn)時(shí)，寬高分別得變成 150mm 和 300mm。這樣，當(dāng)我們設(shè)計(jì)了一個(gè) UI 元素，即使在 VR 中需要調(diào)整它的距離，也能快速知道如何縮放這個(gè) UI 元素。dmm 解決了 2D，3D 空間組件尺寸的換算問題。因此，設(shè)計(jì)的操作步驟就變成了如下 3 步： 1. 根據(jù)實(shí)際屏幕參數(shù)和人機(jī)工程學(xué)方法測量確定各組件的最小與舒適尺寸，制定設(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)動脖子的情況，大約 60 度視野范圍是人眼舒適觀看的區(qū)域。若轉(zhuǎn)動脖子，那這個(gè)范圍大致在水平 120 度內(nèi)。這就是說，需要用戶頻繁觀看操作、重要的界面元素需要放置在如下圖的圓形區(qū)域內(nèi)，次要些的信息元素可在 120 度區(qū)域以內(nèi)，用戶輕微轉(zhuǎn)動頭部便可獲取。另外，正常人眼的視覺焦點(diǎn)不是在水平線上，而是在水平線往下 6 度到 15 度之間。 那文字和各組件應(yīng)該設(shè)計(jì)多大呢？ 這里需要介紹一個(gè) PPI 與 PPD 的概念。對于電腦顯示器、平板和手機(jī)屏幕，我們習(xí)慣用 PPI，（Pixel Per Inch，每英寸像素）來表達(dá)屏幕分辨率，PPI 越高，屏幕像素顆粒感越小。當(dāng)顯示屏的分辨率足夠高時(shí)，人眼視網(wǎng)膜便無法分辨其上的像素顆粒，這種屏幕我們稱之為視網(wǎng)膜屏。 在 VR 中，畫面是 360 度呈現(xiàn)的，這時(shí)用 PPD 來衡量畫面的細(xì)膩程度，則會更方便。 PPD，指每一度所包含的像素，Pixel Per Degree（像素每度），在透鏡觀察系下 PPD= px / fov。其中，fov 是指視場角，PPD 大于 60 度的顯示屏，才能稱之為視網(wǎng)膜屏（可根據(jù)視網(wǎng)膜 PPI 換算得出）。 也就是說，在視場角中的 1 度需要看到 60 個(gè)像素，才能分辨不出像素感，60 度才能達(dá)到“視網(wǎng)膜”級別的體驗(yàn)。 遺憾的是，目前市場上的 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，所以要達(dá)到“視網(wǎng)膜”級別體驗(yàn)還有很長路要走。 Daydream 團(tuán)隊(duì)給出了當(dāng)前屏幕分辨率下，字體的可讀性與 PPD 關(guān)系如下： 若按三星 S7 在 Gear 4 下的 PPD 為 12.6 來計(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 號字。 以下是 Daydream 設(shè)計(jì)團(tuán)隊(duì)推薦的文字和點(diǎn)擊尺寸，可供參考。 如何實(shí)際操作 說了這么多概念和理論，下面來看看如何實(shí)際操作 首先，在 Sketch 中，設(shè)計(jì)基礎(chǔ)界面，讓重要的 UI 元素在 60 度眼球舒適區(qū)內(nèi)，假設(shè)我們設(shè)計(jì)了如下的界面布局，除了左右兩邊淺紅色的次要面板外，其余重要元素均在舒適區(qū)內(nèi)。 （Sketch 文件放在文末附件里） 然后，輸出切圖以及尺寸標(biāo)注。再將切圖導(dǎo)到 Unity 中，在 Unity 中，我們需要建立三個(gè)層級關(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è)計(jì)了一個(gè) 270x150 的矩形，那么到 Unity 里這一層的長寬尺寸也直接寫 270x150，完全不用管距離、縮放、單位換算之類的問題了。因?yàn)樯厦鎯蓪右呀?jīng)把這些問題解決了。這樣一來，工程師則可完全按原始設(shè)計(jì)標(biāo)注尺寸來開發(fā)。文字字號也一樣，設(shè)計(jì)稿里選的多大，在這里也設(shè)置成多大。是不是覺得 So easy。 有時(shí)，我們需要精確的將 UI 界面置于到場景的某個(gè)位置，通過這種方法，可以推算出場景的相應(yīng)比例大小，就不用老是反復(fù)調(diào)整修改了。建立好這樣的一種層級結(jié)構(gòu)后，則可任性的做設(shè)計(jì)，和工程師也成好基友了。