VR Design

shihyingru

12/8/2017 - 9:09 AM

VR UI Design VR Fonts

兩個mac vr建置軟體 https://medium.com/rodinvr/getting-started-with-rodin-io-3476a3bd3a25 https://hologram.cool/

BINAURAL SOUND

VR Fonts

Rendered
Source

VR Fonts

ARTICLE URL.(內附所有要點的程式範例)
(https://github.com/coob113)
(https://medium.com/inborn-experience/10-rules-of-using-fonts-in-virtual-reality-da7b229cb5a1)

Size

*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.

*Typeface

>In VR better work sans typefaces.

*Weight

>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

>Alignment of fonts in virtual realty depends on context.

*Color and Contrast

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

*Animation

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

Use to attract user's attention is nice.

*Actions

>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.
(但像是按鈕類的UI就依然適用)

VR UI Design