XR中的設(shè)計(jì)規(guī)范
在XR設(shè)計(jì)中,有一些設(shè)計(jì)規(guī)范需要我們注意。本文我們主要關(guān)注空間中ui組件的尺寸和可見性,希望對(duì)你有所幫助。
致敬:Siddarth Kengadaran
第一部分我們主要關(guān)注空間中ui組件的尺寸和可見性。
要了解 AR 中的尺寸設(shè)定,我們應(yīng)該了解像素?cái)?shù)(分辨率)、空間像素密度(PPI )和角度像素密度(PPD )的概念。
為了便于理解,這里以兩臺(tái)分辨率相同的 1920×1080 設(shè)備舉例,一臺(tái) 49 英寸顯示器和一臺(tái) 5 英寸的移動(dòng)設(shè)備。
一、像素?cái)?shù)
像素?cái)?shù)或分辨率是屏幕長、寬的像素?cái)?shù)。
像素?cái)?shù)=水平像素?cái)?shù)*垂直像素?cái)?shù)
Pixel Count= Horizontal Number of Pixels * Vertical Number of Pixels
在我們的例子中,長度為 1920 像素,高度為 1080 像素。
所以像素?cái)?shù) = 1920*1080 = 2073600 (~2 MP)
二、空間像素密度
像素密度是指有多少像素被壓縮到物理空間中。
像素密度= √((水平像素?cái)?shù)2) + (垂直像素?cái)?shù)2))/屏幕尺寸
在我們的示例中,1920×1080 像素分布在 5 英寸(移動(dòng)設(shè)備)和 49 英寸(顯示器)的屏幕中。
所以像素密度分別為:
移動(dòng)設(shè)備 = √((1920*1920)+(1080*1080))/5 = 440.58 PPI
顯示器 = √((1920*1920)+(1080*1080))/49 = 44.96 PPI
三、角像素密度
在遠(yuǎn)處呈現(xiàn)給眼睛的每度像素?cái)?shù)。
度像素是一種同時(shí)包含了用戶到顯示器的距離和顯示器分辨率的方法。
對(duì)于 HMD 顯示器來說,這是一種更合適的像素密度表示方式。
Pixel Density= 2*Distance*PPI*tan(0.5°)
在之前的案例中:
角像素密度:
移動(dòng)設(shè)備 = 2*12*440.58*tan(0.5) = 92.28 PPD
顯示器 = 2*72*44.96*tan(0.5) = 56.5 PPD
也通過用水平/垂直像素?cái)?shù)除以角度來計(jì)算 PPD。
像素密度 = 水平分辨率 / 水平 FoV
像素密度 = 垂直分辨率 / 垂直 FoV
在 34 度水平視野下觀看 1920×1080 的屏幕將具有 1920/34 = 56.5 PPD。
四、視力(20/20 視力)
20/20 視力:表示在 20 英尺 (6.1m) 距離處測(cè)量的正常視力。
20/20 的視力,表示可以正??辞?20 英尺處的東西。20/100 的視力,表示在 20 英尺處才能看到正常人在 100 英尺處就可以看到的東西。在這些情況下,要戴眼鏡將視力提高到 20/20。
20/20 的視力并不一定意味著完美的視力。 20/20 視力僅表示遠(yuǎn)處視力的清晰度或清晰度。不包括其他視覺能力,側(cè)面視覺、眼睛協(xié)調(diào)、深度知覺、聚焦能力和色覺等。
視力為 20/20 的人大約在 1 英尺(0.3m)的距離處可以看到 720 PPI。人類在 2.5 英尺 (0.76m) 的距離內(nèi)最多可以看到 300 PPI。在距顯示器 3 到 4 英尺(0.91m — 1.22m)的距離之外,人眼無法看到單個(gè)像素。角像素密度上,人類將能夠分辨高達(dá)每度 60 像素 (PPD)。
距離在空間像素封裝中起著至關(guān)重要的作用,他需要和視力進(jìn)行匹配。比如,電視的計(jì)劃使用距離是其尺寸的 1.5-2.5 倍,在我們的 49 英寸示例中,觀看距離大致為 6-10 英尺。而手機(jī)的觀看距離約為 1 到 2 英尺。所以,在 3 英尺以下的距離內(nèi)看到的屏幕應(yīng)該有更高的像素密度。
五、XR空間
如何在XR空間中代入上面的基本元素?
HMD設(shè)備的最佳區(qū)域在4.1 英尺 (1.25m) 至 16.4 英尺 (5m)之間。建議將用作觀看和交互的擴(kuò)展平面放在?6.56 英尺 (2m)?處。
相較之下,直接用手進(jìn)行觸控的區(qū)域應(yīng)該放置在?2.13 英尺左右,小于 3.28 英尺 (1m),因?yàn)槿祟惖钠骄直坶L度為 2.08 英尺。
和電視、手機(jī)屏幕不同,xr中的界面是變化和移動(dòng)的,所以對(duì)象的大小不能用像素進(jìn)行定義。XR空間中的對(duì)象應(yīng)當(dāng)隨著距離的變化而變化。
雖然屏幕尺寸會(huì)隨著距離的增加而增加,但人們對(duì)物體的感知尺寸還是會(huì)隨著距離的增加而減小。這種范式是XR體驗(yàn)中最重要的視覺線索之一,它可以給用戶提供物體的定位線索。以真實(shí)比例查看對(duì)象,是XR體驗(yàn)與屏幕體驗(yàn)的關(guān)鍵區(qū)別。
六、空間中UI的計(jì)算
要了解 XR 空間的像素密度,我們應(yīng)該知道 HMD 設(shè)備的像素?cái)?shù)(分辨率)、長寬比和視野。
計(jì)算水平和垂直視野:
FoV 是指通過眼睛或光學(xué)設(shè)備看到的可觀察區(qū)域。
讓我們用之前的設(shè)備(1920*1080單眼)舉例,比例為 16:9,Diagonal(對(duì)角) FoV 為 40°。
從DFov計(jì)算HFoV和VFoV,我們需要計(jì)算對(duì)角線縱橫比(Da)。
使用勾股定理:
Da = sqrt(Ha2+Va2)
Da = sqrt((16*16)+(9*9)) = 18.36
利用對(duì)角線縱橫比,我們可以計(jì)算水平視野為:
HFoV = atan( tan(Df/2) * (Ha/Da) ) * 2
HFoV = atan(tan(40/2)*(16/18.36))*2 = 35.49°
垂直視野為:
VFoV = atan( tan(Df/2) * (Va/Da) ) * 2
VFoV = atan(tan(40/2)*(9/18.36))*2 = 20.41°
計(jì)算 XR 空間的像素密度:
Pixel Density = Horizontal Resolution / Horizontal FoV
Pixel Density = 1920/35.49 = 54.1 PPD
Pixel Density = Vertical Resolution / Vertical FoV
Pixel Density = 1080/20.41 = 52.92 PPD
約53 PPD,低于人類“正常”視力每度 60 個(gè)像素(60ppd)。
七、計(jì)算 XR 空間中的實(shí)際尺寸
使用角直徑計(jì)算:
(Real Size = 2*distance*tan(angle/2))
Length = 2*distance*tan(horizontal angle/2)
Breadth = 2*distance*tan(vertical angle/2)
在我們的示例中,水平角 = 35.49°,垂直角 = 20.41°,因此 2m 距離處的屏幕尺寸如下:
Length = 2*2*tan(35.49/2) = 1.28m
Breadth = 2*2*tan(20.41/2) = 0.72m
這個(gè)公式也可以來計(jì)算交互的目標(biāo)大小。
空間元素的最小目標(biāo)大小約為 1 到 1.5 度,當(dāng)我們需要更快的交互時(shí),可以達(dá)到?3 度。
到目前為止,2m 處的可交互元素最小尺寸應(yīng)當(dāng)是:
Size = 2*2*tan(1.5/2) =?0.05 m
Size = 2*2*tan(3/2) =?0.1 m
5 – 10 cm 是 2m 處交互元素的最小目標(biāo)尺寸。
八、計(jì)算設(shè)計(jì)PPI
Pixel Density= √((Horizontal Number of Pixel2) + (Vertical Number of Pixel2))/Screen Size
Pixel Desnity = √((1920*1920)+(1080*1080))/28.74 = 76.65 PPI
第二部分我們來看看空間中的幾種元素類型—Diegesis理論。
界面設(shè)計(jì)在沉浸式空間中起著至關(guān)重要的作用。一般我們提起交互設(shè)計(jì)中的界面,大家想到的都是前端平面上的視覺表達(dá)。但在空間世界中,沉浸式設(shè)計(jì)并不只停留在視覺表達(dá)上。
要為這種空間媒體創(chuàng)造內(nèi)容,我們可以利用“Diegesis”概念(來自希臘的劇院)。
為了更好地理解“Diegesis”概念。我們?cè)谶@里引入一個(gè)概念:“第四面墻”。劇院中有三面墻,兩邊分別有一面,背后有一面。第四面墻是一個(gè)假想的邊界,將舞臺(tái)與觀眾隔開。當(dāng)演員和觀眾發(fā)生交互的時(shí)候,這面墻就會(huì)被打破。
第四面墻是一個(gè)存在于想象中的,虛擬內(nèi)容和觀眾之間的邊界。
理解了“Diegesis”概念,我們來看看空間中的元素??臻g里的元素可以分為兩類:Diegesis和非Diegesis。
Diegesis元素是空間場(chǎng)景中的一部分。非Diegesis元素存在于場(chǎng)景之外。用音樂舉例,Diegesis元素是場(chǎng)景中角色演奏的一段音樂(劇情相關(guān)),而非Diegesis元素則是畫外音(劇情無關(guān))。Diegesis 理論常被用于分析游戲行業(yè)中的用戶界面。交互元素可以根據(jù)他們出現(xiàn)在哪來進(jìn)行分類:在空間中,或在故事情節(jié)中,又或者兩個(gè)都是。
九、非Diegesis元素
非Diegesis元素一般是2D的,是故事空間外的元素。沉浸空間中,非Diegesis元素應(yīng)當(dāng)謹(jǐn)慎使用,它們不受用戶位置和方向的影響,會(huì)大幅降低沉浸感。典型例子包括用戶注視的視線元素、必須接收的彈出消息或告警。
十、Diegesis元素
Diegesis元素是環(huán)境(空間)中的一部分。他們可以增強(qiáng)沉浸感和真實(shí)感。它們是空間設(shè)計(jì)中最好的形式。不過有一個(gè)限制需要注意,如果元素不夠直觀,反而會(huì)降低沉浸感。
十一、Space元素
空間元素是漂浮在空間中的交互元素,它們存在于空間中,但又不屬于真實(shí)場(chǎng)景和情節(jié)。他們是虛擬的。這些元素一般是不符合空間物理特性的平面 2D 或 3D 元素,雖然他們降低了體驗(yàn)沉浸感,但清晰度強(qiáng)并且易于識(shí)別。
十二、Meta元素
Meta元素屬于故事情節(jié),但不在空間中。一般是用于描述故事的特效,例如抖動(dòng)、模糊和變色。不過Meta元素會(huì)降低用戶的可見性,因此在空間 UI 中并不常用。
原文參考:https://siddarth.design/designi
本文由 @人機(jī)交互小學(xué)生 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自 Unsplash,基于 CC0 協(xié)議
該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
- 目前還沒評(píng)論,等你發(fā)揮!