12/8/2017 - 9:09 AM

VR Design

VR UI Design VR Fonts

兩個mac vr建置軟體


VR Fonts

ARTICLE URL.(內附所有要點的程式範例)


*Position in Space

>The font should be faced perpendicularly to the observer.

User Average height:1.6 meters.
Text Rotation:
text1 x:45 text2 x:22 text6 text7 text3 text8 text9 : y:45 y:22 0 y:-22 y:-45 text4 x:-22 text5 x:45

<a-entity position="0 1.611 -1" text__header="height:2;wrapCount:11;value:Rotated Text;color:#000000;width:0.36;align:center;font:exo2semibold;letterSpacing:2;lineHeight:40;tabSize:5"></a-entity> <a-entity position="0 2.3 -0.7" text__header="align:center;color:#000000;font:exo2semibold;height:2;letterSpacing:2;lineHeight:40;tabSize:5;value:Rotated Text;width:0.36;wrapCount:11" rotation="45 0 0"></a-entity> <a-entity position="0.37 1.611 -0.93" text__header="value:Rotated Text/;align:center;color:#000000;font:exo2semibold;height:2;letterSpacing:2;lineHeight:40;tabSize:5;width:0.36;wrapCount:11" rotation="0 -22 0"></a-entity> <a-entity position="0.7 1.611 -0.7" text__header="value:Rotated Text;align:center;color:#000000;font:exo2semibold;height:2;letterSpacing:2;lineHeight:40;tabSize:5;width:0.36;wrapCount:11" rotation="0 -45 0"></a-entity> <a-entity position="-0.37 1.611 -0.93" text__header="value:Rotated Text;color:#000000;wrapCount:11;width:0.36;align:center;font:exo2semibold;height:2;letterSpacing:2;lineHeight:40;tabSize:5" rotation="0 22 0"></a-entity> <a-entity position="-0.7 1.611 -0.7" text__header="value:Rotated Text;color:#000000;wrapCount:11;width:0.36;align:center;font:exo2semibold;height:2;letterSpacing:2;lineHeight:40;tabSize:5" rotation="0 45 0"></a-entity> <a-entity position="0 1.23 -0.93" text__header="value:Rotated Text;color:#000000;wrapCount:11;width:0.36;align:center;font:exo2semibold;height:2;letterSpacing:2;lineHeight:40;tabSize:5" rotation="-22 0 0"></a-entity> <a-entity position="0 0.9 -0.7" text__header="value:Rotated Text;color:#000000;wrapCount:11;width:0.36;align:center;font:exo2semibold;height:2;letterSpacing:2;lineHeight:40;tabSize:5" rotation="-45 0 0"></a-entity> <a-entity position="0 1.97 -0.93" text__header="value:Rotated Text;align:center;color:#000000;font:exo2semibold;height:2;letterSpacing:2;lineHeight:40;tabSize:5;width:0.36;wrapCount:11" rotation="22 0 0"></a-entity>

*Line Length

>Line length in VR should be around 20–40 symbols per line. With bigger font line should be shorter.


>In VR better work sans typefaces.


>Fonts in VR should be bolder than on screens.

*Line Height

>Line height for VR font should be around 1–1.5.

Line spacing shifting this window to 1~1.3, and avoid less than 1.


>Alignment of fonts in virtual realty depends on context.

*Color and Contrast

>Make sure fonts have sufficient color contrast(足夠的顏色對比) in VR.


>To attract user attention font can be animated in VR.

Use to attract user's attention is nice.


>It should be easy to define when text is actionable.

For now let’s keep in mind that some concepts that had established for years in desktop don’t work in VR, for example, blue link.(超連結的藍色文字不適用在VR世界)
Also, things that moved to UI from physical world can be useful in VR as well, as buttons.

VR Design


VR applications are made up of two types of components: environments(環境) and interfaces(介面).



2.Visual Design



1.Canvas Size
當要建置VR這類360度的手持裝置APP,Canvas size設置怎樣的大小是合理的是一個大問題。
(iphone:1334x750 pixel / android:1280x720)

上圖360度的圖片呈現的為水平360度和垂直180度,因此我們可以推論將尺寸訂為 3600x1800.

根據 Mike Alger關於360度環境要如何擁有舒適的觀看區,我們應該將UI呈現在360度環境中的九分之一。
UI View的尺寸約為1200x600 pixel並大致座落於等距長方圓柱中間。

"360 View":3600 x 1800 pixel
"UI View" :1200 x 600 pixel