トマシープが学ぶ

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

VRのUI&UXの事例研究

2020/05/27 ambr,ViveSyncを追加しました。

2020/05/14 Spatialを追加しました。

既存のVRコンテンツのUIのスクショをとるだけ。

このサイトにもかなりまとまっています。

xR.design: AR & VR Interaction Examples

OculusGoのキーボードはこちらで更新しています。

bibinbaleo.hatenablog.com

選択・メニュー

ViveSync

レーザー

f:id:bibinbaleo:20200529195329p:plain



ambr

GoとSteamによるPCVR対応

レーザーで選択。PCVRでも3dofっぽい動きをする。

f:id:bibinbaleo:20200527210350p:plain

Spatial(OculusQuest)

レーザーもでるし、ハンド方コントローラーで押し込みもできる

f:id:bibinbaleo:20200514205400p:plain

f:id:bibinbaleo:20200514205524p:plain

f:id:bibinbaleo:20200514205546p:plain

PorkerStarsVR(OculusQuest)

腕時計からメニューが出て右手で押す。

f:id:bibinbaleo:20190711151028j:plain

NeosVR

メニューは自由に移動できる。

f:id:bibinbaleo:20190209161002p:plain

Maquette

空間プロトタイプソフト。

右のコントローラーからのレーザーで選ぶ

f:id:bibinbaleo:20181102222004p:plain

詳しくはこちらの動画を

www.youtube.com

 

bibinbaleo.hatenablog.com

Vカツ

タッチ

f:id:bibinbaleo:20180811115123p:plain

服や顔はキャラにカードを差し込む。

f:id:bibinbaleo:20180811115122p:plain

youtu.be

Cluster

左手の腕時計からメニューが出る。

f:id:bibinbaleo:20180811113821p:plain

f:id:bibinbaleo:20180811113703p:plain

メニューを押すと右側にウィンドウが出る。

手でタッチ

f:id:bibinbaleo:20180811113659p:plain

f:id:bibinbaleo:20180811113642p:plain

ウィンドウは全部出したままにできる!かっこいい!!

f:id:bibinbaleo:20180811113630p:plain

動画にしました。

youtu.be

バーチャルキャスト

自分の周りに円状にメニューが出る。

少し離れたところからでも選択できる。メニューをつかんで上にあげたら選択。

左右に引っ張ると新しいメニューが出てくる。

f:id:bibinbaleo:20180430115720p:plain

f:id:bibinbaleo:20180430115722p:plain

なんで上にあげたら選択ってわかったんだっけ?チュートリアルにあった?

少し離れたところからでも選択できるのはすごい。

ただ左右のメニューの候補がオブジェクトに隠れてしまい、気づかなかったり選択しにくいときがある。

The Blu

目線+クリック

f:id:bibinbaleo:20180430115849p:plain

Luckys Tale

遠くから指差しクリック

f:id:bibinbaleo:20180430120329p:plain

透明なコントローラーが表示されている。

f:id:bibinbaleo:20180430120324p:plain

キャラに近づくと手に変わる?

f:id:bibinbaleo:20180430120331p:plain

Oculus First Contact

選択肢をロボットが渡してくれる。

f:id:bibinbaleo:20180430120932p:plain

それを機械に差し込んだら、そのアイテムが生成される。

f:id:bibinbaleo:20180430120933p:plain

使い方とか誘導はアイコンの動くイラストとロボットがジェスチャーで教えてくれる。

f:id:bibinbaleo:20180430121124p:plain

Avator Rditor

アイコンをタッチしたら選択できる。

f:id:bibinbaleo:20180430121229p:plain

f:id:bibinbaleo:20180430121231p:plain

背景フレームもタッチで選択

f:id:bibinbaleo:20180430122154p:plain

Tilt Brush

ポインタで選択

f:id:bibinbaleo:20180430142036p:plain

Google Light Field

普通

f:id:bibinbaleo:20180430122157p:plain

シーンは球で選べる

f:id:bibinbaleo:20180430122200p:plain

Disney movie VR

手から出るおしゃれビームで選択

f:id:bibinbaleo:20180430123040p:plain

Ready Player One

普通にポインタ

f:id:bibinbaleo:20180430133455p:plain

f:id:bibinbaleo:20180430133703p:plain

シーン選択がかっこいい

f:id:bibinbaleo:20180430133704p:plain

 

WindowsMRのホーム

Hololensと同じUI

Windows8からのフラットデザインで統一している。

だがよくみるとUIが背後の黒いパネルからちょっと浮いてる(気がする)

f:id:bibinbaleo:20180206170147p:plain

Morgan lives in a Rocket House in VR

パネル式

f:id:bibinbaleo:20180206170153p:plain

 

SYMMETRY alfa

左のコントローラーの上に出て、右のコントローラーのポインターで選択。

f:id:bibinbaleo:20180206170201p:plainf:id:bibinbaleo:20180206170203p:plain

STYLY

f:id:bibinbaleo:20180206172431p:plain

NEUTRANS

f:id:bibinbaleo:20180206170158p:plain

Spatial Gate

球をグリップボタンを押しながら選択で、遠隔で手元に持ってこれる。

トリガーボタンで発射して、その球の写真の中に入れる。

f:id:bibinbaleo:20180206170215p:plain

Live2D VR Girls

視線操作。ずっと見つめて丸が一周したら選択

f:id:bibinbaleo:20180206185217p:plain

f:id:bibinbaleo:20180206185226p:plain

Mermaid VR

小さくてやりにくい。

f:id:bibinbaleo:20180206185213p:plain

VRchat

最初に出てくる文字だけのメニューは小さいが、

f:id:bibinbaleo:20180206185530p:plain

アバターやワールド選択など画像付きのメニューはでかい。

視線の先に出る。

f:id:bibinbaleo:20180206185525p:plain

steamVR

f:id:bibinbaleo:20180206190001p:plain

RecRoom

立体的。右手の腕時計を見る動作をするとメニューが現れる。

基本的にボタンを押す動作をする。

f:id:bibinbaleo:20180206191712p:plain

カメラはつかむ

f:id:bibinbaleo:20180206191717p:plain

Blocks

左のコントローラーにメニューが出てくる。

f:id:bibinbaleo:20180206210152p:plain

選択すると項目が少し浮き上がるf:id:bibinbaleo:20180206210151p:plain

Bigscreen Beta

一番小さいメニュー画面

f:id:bibinbaleo:20180206192336p:plain

Altscape

f:id:bibinbaleo:20180206194543p:plain

メニューは丸くてかわいい。ちょっと小さい

f:id:bibinbaleo:20180206194544p:plain

Facebook Spaces

4つのボタンが両腕についている。

f:id:bibinbaleo:20180207145116p:plain

ボタンは押し込む。

f:id:bibinbaleo:20180207145111p:plain

f:id:bibinbaleo:20180207160553p:plain

VRカノジョ

目線で選んで、トリガーで決定。

f:id:bibinbaleo:20180207160322p:plain

頭の動きで選択。

f:id:bibinbaleo:20180207160319p:plain

VRTK

f:id:bibinbaleo:20180216135506p:plain

Holotour

視線か音声認識。決定はトリガー

f:id:bibinbaleo:20180220200630p:plain

f:id:bibinbaleo:20180220200633p:plain

f:id:bibinbaleo:20180220200714p:plain

視線誘導で移動させる。

f:id:bibinbaleo:20180220200721p:plain

f:id:bibinbaleo:20180220200729p:plain

スライドバー

ViveSync

f:id:bibinbaleo:20200529201021p:plain

NeosVR

f:id:bibinbaleo:20190209161030p:plain

Clusterは手でスライド。

f:id:bibinbaleo:20180811113635p:plain

f:id:bibinbaleo:20180206185947p:plain

f:id:bibinbaleo:20180206185951p:plain

f:id:bibinbaleo:20180206172415p:plain

VRカノジョは頭で動かす。

f:id:bibinbaleo:20180207160415p:plain

スライドバーではないけど、recroomは届いたアイテム箱の開封を実際に手をスライドさせている。

f:id:bibinbaleo:20180206192035p:plain

 スライドバーじゃないけどHolotourは音量などを+-ボタンで調整。10ずつ変わる。

f:id:bibinbaleo:20180220200757p:plain

本をめくるのはほんの右端を押す。ただし本の外側を押すと閉じてしまうので何回か失敗した。

f:id:bibinbaleo:20180220200804p:plain

tily brushは普通

f:id:bibinbaleo:20180430142432p:plain

Maquetteはスライドバーじゃないけど、大きさを変えるのにタッチパッド長押しだった

f:id:bibinbaleo:20181102223305p:plain

f:id:bibinbaleo:20181102223256p:plain

文字入力

キーボードはこちらにまとめました(随時更新)

2020/05/14追記

bibinbaleo.hatenablog.com

移動

トラックパッド上倒し

f:id:bibinbaleo:20200529194652p:plain

Spatial

スティック押し込み

WinMR

基本的にwinMRだと上を長押しでワープ

f:id:bibinbaleo:20180206171348p:plain

STYLY

f:id:bibinbaleo:20180206172326p:plain

SteamVR

f:id:bibinbaleo:20180206190040p:plain

回したら着地後の方向も指定できるようになってた。

Recroom

f:id:bibinbaleo:20180206191745p:plain

Altscape

f:id:bibinbaleo:20180206194501p:plain

NEUTRANS

これは地面に向かってトリガーで移動

f:id:bibinbaleo:20180206172308p:plain

Reasy Player One

シンプル。普通

f:id:bibinbaleo:20180430133853p:plain

tilt brush

メニューで移動マークを押したら移動モードになる。

f:id:bibinbaleo:20180430142507p:plain

Cluster

矢印キーで進む。移動しているときは周りにガイドの線が出る。

 

バーチャルキャスト

上下ボタンで移動。左右で回転。

向いている方向にしか進まない。

移動するときに回りが黒くなる。

動画

ViveSync

再生ボタンはなく自動で始まる

f:id:bibinbaleo:20200529200926p:plain

Morgan~

f:id:bibinbaleo:20180206172429p:plain

Mermaid VR

アイコンが小さくてやりずらい。

f:id:bibinbaleo:20180206170237p:plain

Youtube VR

f:id:bibinbaleo:20180203143203p:plain

色選択

ViveSyncは固定6色と、自由にカラーサークルから選べる。

f:id:bibinbaleo:20200529195539p:plain

ペン先も変わる

f:id:bibinbaleo:20200529195548p:plain


Oculusは選択肢の中から選び、

f:id:bibinbaleo:20180430121234p:plain

自分に球を投げると変わる

f:id:bibinbaleo:20180430121236p:plain

tilt brushはカラーピッカーの押した場所

f:id:bibinbaleo:20180430142548p:plain

スライダー

f:id:bibinbaleo:20180206185947p:plain

一覧から選ぶ

f:id:bibinbaleo:20180206191804p:plain

 

 選ぶ

f:id:bibinbaleo:20180206194436p:plain

Bigscreen Betaはペンキ一覧の中から漬ける。

f:id:bibinbaleo:20180206192347p:plain

NEUTRANSもカラーパレットはあるがf:id:bibinbaleo:20180206170158p:plain

ペンを付ける方式

f:id:bibinbaleo:20180206201040p:plain

メニューの裏側のパレットから筆に絵の具を付ける方式

f:id:bibinbaleo:20180206210255p:plain

facebook space

f:id:bibinbaleo:20180207163035p:plain

めっちゃ書きやすい。

f:id:bibinbaleo:20180207163041p:plain

Maquetteはカラーパレットが豊富

f:id:bibinbaleo:20181101103417p:plain

写真を撮る

ViveSync

コントローラーにくっつく方式

f:id:bibinbaleo:20200529195730p:plain

クリックしたらプレビューウィンドウが出る

f:id:bibinbaleo:20200529195734p:plain

PorkerStarsVRは自撮り棒方式

写真を撮ったらチェキみたいに横からびよーんって出てくる。

いろいろアニメーションがすごい。

f:id:bibinbaleo:20190711155917j:plain

地鶏モードになったときもわかりやすい。

f:id:bibinbaleo:20190711155920j:plain


Maquetteは左腕にウィンドウが出て、右手のレーザーでシャッター

f:id:bibinbaleo:20181101103458p:plain

Clusterはウィンドウとして出る。

f:id:bibinbaleo:20180811113655p:plain

セルフィーにもボタンで変えられる。

f:id:bibinbaleo:20180811113650p:plain

コントローラーの左側にカメラが出てくる

f:id:bibinbaleo:20180430142702p:plain

鏡の前、カメラボタンを押す。

f:id:bibinbaleo:20180430121749p:plain

3・2・1でシャッター

f:id:bibinbaleo:20180430121808p:plain

写真が出てくる

f:id:bibinbaleo:20180430121751p:plain

facebook spacesはこのジェスチャー。

f:id:bibinbaleo:20180207145404p:plain

すごい!ちゃんと手の大きさに合わせた写真が撮れる。しかもこれ、説明とかを見ずたまたまこのジェスチャーを初めて2分ぐらいで見つけれたことに驚き。

多分指の折り曲げを変えれることとかがそうさせたんだと思う。

 自撮り棒方式もある

f:id:bibinbaleo:20180207163126p:plain

ほかにも縦長と横長のフレームがある。たぶんfacebooklive用

f:id:bibinbaleo:20180207163223p:plain

SYMMETRY はメニューで選んで右コントローラーの上にカメラが出る。

f:id:bibinbaleo:20180207145923p:plain

 Recroomはカメラをつかみ、

f:id:bibinbaleo:20180206191717p:plain

右手に出てくる。f:id:bibinbaleo:20180207153540p:plain

自撮り棒方式

f:id:bibinbaleo:20180207160500p:plain

 

追記:公式のガイドライン

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

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

そういえばsketchとかで作ったUIの配置をUnityに取り込むのってどうやるんだろう?

このskrych>unity使って見たけど動かなかった。

github.com

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

vr-lab.voyagegroup.com

 

ちょっと違うけどARkitでappleが出しているガイドラインもある

bibinbaleo.hatenablog.com

 

MicrosoftのMR部門のデザインについて

https://developer.microsoft.com/en-us/windows/mixed-reality/mixed_reality

最後に

ここからどう研究していったらいいのでしょうね・・・

自分で考えた方法と既存手法を比較するとか、すでにあるものを比べて最も良い距離や大きさを導き出すとか?

それかもっと別のとこに注目してもいいかも。

部屋の大きさとか

 

個人的にはキーボードが気になります。

キーボードは物理のキーボードをVR内に持ち込む商品もあります

www.moguravr.com

あとtwitterで見た、腕につけるミニキーボードでコントローラー外の操作をするとか

dmiyamo3.hateblo.jp

文字入力なら、入力速度で数値化が簡単そう。

あと音声入力との兼ね合いもありますね・・・

 

追記:若干ばずった。

f:id:bibinbaleo:20180207150141p:plain

Goromanさんがspaces、lone echo、Mediumをお勧めしてくれた。

 

lone echoとMediumはoculus専用かつ有料っぽいので実況動画を見ます。

www.youtube.com

記事

www.roadtovr.com

www.youtube.com

spacesは最近Vive版が出たのでWinMRでも行けるのでは?と思いやってみたら無事できた。

最初はいつものように頭の位置がすごく高くなるけど、一回テーブルを非表示して、再表示したら治った。

 

というわけでどんどん新しい(無料)VRやって、このページに追加していきます。

本当は有料のもやったほうがいいんだろうな~

 

bibinbaleo.hatenablog.com

この本の最後にVRのUIについても触れられていました。

f:id:bibinbaleo:20180220214326p:plain

 

www.youtube.com

www.youtube.com