トマシープが学ぶ

Unity/VR/AR/デザイン好きのミーハー 記事内容は自分用のメモです

VR/ARのUI知見リンクをまとめる

2023/12/04

Oculus、AppleのVisionOS追加

2020/12/07

MESONさんの神まとめ。

scrapbox.io

2020/05/11追記

仮想空間のUX記事追加

2020/05/07追記

Unityの記事追加

2019/12/25追記

ambr,Clusterさんの記事を追加しました

こちらのツイートのリンクを追加しました

 

AppleVisionOS

HIGドキュメント
・visionOS向けのデザイン

https://developer.apple.com/jp/design/human-interface-guidelines/designing-for-visionos


・空間レイアウト

https://developer.apple.com/jp/design/human-interface-guidelines/spatial-layout


Figma

www.figma.com


動画
デザイン系は20分×5つぐらい

developer.apple.com

bibinbaleo.hatenablog.com

 

Oculus

昔からあった気がするけどリストに入れていなかった

developer.oculus.com

UX Planet

距離や視野角

uxplanet.org

Vket

note.com

MR+HandTracking

ハンドトラッキング操作でのメニューの場所や動作、そのほかもろもろめっちゃ面白い

medium.com

 

Apple-AugumentedReality

AppleのARガイドライン

日本語pdf

https://developer.apple.com/jp/documentation/HiG-AR.pdf

英語の元サイト

developer.apple.com

Appleは現実感重視

陰影は現実環境を反映する

60fps

テキストの量は最低限に

スマホ画面のUIは半透明と不透明を切り替える

開発者向けの言葉は使わない。ARKit、物理世界の検出、追跡(トラッキング)など

Google-Augmented Reality Design Guidelines

designguidelines.withgoogle.com

f:id:bibinbaleo:20191225210811p:plain

Microsoft

bibinbaleo.hatenablog.com

 

docs.microsoft.com

microsoft.github.io

MagicLeap

developer.magicleap.com

f:id:bibinbaleo:20191225210246p:plain

www.gizmodo.jp

この記事良かった

MRの新しい経験に関する考慮事項

仮想物体を出すときの位置とか、こっちだよって教える仕組みとか

Nreal

デザインガイドライン

developer.nreal.ai

Cluster

UIじゃないけど・・・アバターデザインの話めっちゃ参考になる!面白い!

blog.cluster.mu

ambr

足元に電池残量や時計があるの面白い!

note.com

Unity

この記事は新しい(2020.2)

blogs.unity3d.com

unity3d.com

ヒストリア

www.slideshare.net

Vケット2

note.mu

ホロラボ

 

www.slideshare.net

遠近感などで空間を表現
視線誘導は左上から
45cm~3.6mのところにコンテンツを置くと心地いい距離
水平は30度いない

NEUTRANS

www.slideshare.net

手元に操作パネルを置く

ボタンの文字の大きさなどは空港の表示や高速道路の表示を参考にした。

 

Google-daydream

自分の昔の記事から

bibinbaleo.hatenablog.com

daydreamもといgoogleのUX担当の人ががVRのUIについて語っている動画。

www.youtube.com

具体的な数値がいっぱいでわかりやすい。

f:id:bibinbaleo:20180206232656p:plain

f:id:bibinbaleo:20180206232906p:plain

最後の方にUnityのCanvasについても語ってた。よくわからないけど、canvas自体の大きさは0.001ぐらい小さくしておいて、それを大きさ1の空オブジェクトの子にしたらスケール変更がしやすいよ的な感じかな??

f:id:bibinbaleo:20180206232652p:plain

 

ここでsketchファイルを配布していた。

Google VR  |  Google Developers

sketchは無料期間が切れてひらけないのでfigmaで開いた。

f:id:bibinbaleo:20180206232256p:plain

UIの距離の話や、アイコン、パネルの並びなどの例があった。

f:id:bibinbaleo:20180206233450p:plain

コピペして使っていいのかな

 

GoogleCardBoardの時のUIガイドラインもあるそうです。翻訳してくださってる。

vr-lab.voyagegroup.com

DiegeticUI

私が書いたこちらの記事が詳しいです

qiita.com

DigeticUIはストーリーに入り込んでいるUI。例えば主人公が持っているiPadや腕時計内のボタンを押すとか、VR内のパソコンに入力するとか。

自分の作品であれですが、こんな感じ

f:id:bibinbaleo:20180528211754p:plain

NonDigeticUIはストーリーに入り込んでいないUI

つまり一般的な、空中に浮いているUIなど

f:id:bibinbaleo:20180528211926p:plain

 

最後に

最後の方ごちゃごちゃしてるけど、一度書いた文を消したくないので許して