トマシープが学ぶ

Mac/Unity/AR好きのミーハー初心者 記事内容は自分用のメモ。何も求めないで

VRのUI&UXの事例研究

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

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

xR.design: AR & VR Interaction Examples

どうやって分類するのがいいのかいまいちわからないので手探りです。

選択・メニュー

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

スライドバー

f:id:bibinbaleo:20180206185947p:plain

f:id:bibinbaleo:20180206185951p:plain

f:id:bibinbaleo:20180206172415p:plain

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

f:id:bibinbaleo:20180206192035p:plain

文字入力

難しいUI

 

Youtube VR

死ぬほどやりにくい。ちなみにテレビ版Youtubeもこんな感じのキーボードで、リモコンの左右上下キーで選択させる。Youtubeはもっとがんばって。

f:id:bibinbaleo:20180206171451p:plain

Recroomは実際に押す。楽しい。これが正解なのでは???

f:id:bibinbaleo:20180206191730p:plain

MermaidVR

f:id:bibinbaleo:20180206170159p:plain

bigscreen

文字が大きい。

f:id:bibinbaleo:20180206192316p:plain

Altscape

f:id:bibinbaleo:20180206194517p:plain

SYMMETRY は音声入力のみ。マイクがないときはどうするんだ

f:id:bibinbaleo:20180206220804p:plain

移動

基本的に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

動画

Morgan~

f:id:bibinbaleo:20180206172429p:plain

Mermaid VR

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

f:id:bibinbaleo:20180206170237p:plain

Youtube VR

f:id:bibinbaleo:20180203143203p: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

最後に

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

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

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

部屋の大きさとか

 

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

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

www.moguravr.com

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

dmiyamo3.hateblo.jp

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

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

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

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