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