トマシープが学ぶ

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

Holo2アプリの設計デザイン(1/n)【公式ドキュメント読むシリーズ】

公式ドキュメントを見て粛々と勉強していくシリーズ、設計デザイン編。

たぶん操作やUXやフォントについて

https://partner.microsoft.com/ja-JP/asset/collection/designing-a-quality-hololens-2-application#/

操作

docs.microsoft.com

入力モデル

・音声

・手

・視線

の3つがある。

アプリのターゲットシチュエーションに応じてこの入力モデルのどれかを選択し、そのアプリでは一貫してそのモデルを使う

f:id:bibinbaleo:20200406114339p:plain

手がふさがっている人には、音声や視線入力をお勧めする

アフォーダンス

今どの入力モデルなのか、どうやって操作できるのかを、ユーザーに伝える手がかり(=アフォーダンス)の一覧。大事なのでテストに出ます!

f:id:bibinbaleo:20200407101154p:plain

 音声入力

docs.microsoft.com

ボタンだと何回か押さないといけない操作も、音声だと一つのコマンドでできるよ!

 

カーソルを表示させた後、「選択」というとボタンを押せる。

視線入力と音声入力の組み合わせ。

 

  • 「コルタナさん」
  • 「選択する」
  • 「Go to Start」

はOSで使われているから、自分のアプリで使うなよ!

 

音声入力を受け付けているときは、マイクマークを揺らしたり、入力された音声をテキストで表示するなどのフィードバックを与えよう!

f:id:bibinbaleo:20200407103727p:plain

 

MRTKでオブジェクトに音声ラベルを付けることができるよ!

Speech | Mixed Reality Toolkit Documentation

f:id:bibinbaleo:20200407105746p:plain

対話型オブジェクト

クリックできるオブジェクトのこと。ボタンに限らないよ。

docs.microsoft.com

3つの状態で表示を変えよう

f:id:bibinbaleo:20200407104211p:plain

スタートメニューはこんな感じにしているよ。

f:id:bibinbaleo:20200407104755p:plain

アウトラインを出したり、オブジェクトの大きさを変化させたり、色を変えたりしよう!

 

上の3つの状態だけでなく

・default

・ホバー

ボタンに指が近づく

指が触れた

・押されている

指が離された

の6つの状態で表現を変えれると良い?

 

指が近づくとき、ボタンにライトの光が当たるけど、あれは指との距離を示すためにしているんだって!なるほど!おしゃれなだけじゃなかったのか。

f:id:bibinbaleo:20200407105329p:plain

ライティングなんてコスト高いことなんでするんだろ~と思っていた。

 

音もつけよう

 

オブジェクトのサイズと距離

ここ大事!テストに出ます!

基本的に角度固定で、距離が近づいたらオブジェクトの大きさも変わると良い。

ここで計算できる。

elvers.us

大きさ、距離、角度のどれか二つを入れてcalculateを押したら、

f:id:bibinbaleo:20200407122429p:plain

残りの数値を計算してくれる。

f:id:bibinbaleo:20200407122426p:plain

 

手でタッチ操作するとき

f:id:bibinbaleo:20200407105957p:plain

手の届く範囲は45cm。45cm地点に1.6cm*1.6cmの触れるもの?を作る。

でも総合的なボタンのサイズは3.2cm以上がいい。(文字を含めるため?)

f:id:bibinbaleo:20200407122231p:plain

ポインター操作するとき

f:id:bibinbaleo:20200407122656p:plain

2m 1度以上

快適性

docs.microsoft.com

両眼視差に配慮した距離

2mあたりの位置に置いたほうがいい。Holoのディスプレイは2.0mの距離にピントが合っている?

目とオブジェクトの距離を変えないほうがいい。

近づいたり離れたりすると目が疲れる。

f:id:bibinbaleo:20200407131452p:plain

 

ホログラムの最適な配置ゾーンは 1.25 m から 5 m

40 cm 未満の距離にホログラムを表示するな

コンテンツを 40 cm の距離でフェードアウトを開始し、30 cm の距離にレンダリング クリッピング プレーンを配置して、それよりも近い対象物を避けることをお勧めします。

Z軸方向(自分に向かってくる方向)でオブジェクトが動くと目が疲れる。そういう動きを1m以内の距離でするなら、その体験時間は全体の25%以内に抑えるなど決めたほうがいい。

フレームレート

60fps以上!

フレームレート測定には以下などが使える

  • GPUView
  • Visual Studio Graphics Debugger
  • Unity の Frame Debugger などの 3D エンジンに組み込まれたプロファイラー

ユーザーの移動

ユーザー(カメラ)を勝手に動かすと酔うよ。

特に垂直方向は絶対ダメ。

ユーザーが自発的に動かすのはあり。

推奨する移動方法

MR:ワールド全体を小さくして全体表示し、ワールドを動かすことで移動させる。

VR:ワープ移動

ヘッドアップ ディスプレイ (HUD)

頭についてくるUI

完全に頭の動きに追従するのではなく、視界から消えたら視界内に入るような追従の仕方がいい。(Holoのスタートメニューのような動き)

MRTKだとSolverコンポーネントCanvasにつけたらできる。↓参照

MRTK2でuGUI入力とシステムキーボード呼び出し【Hololens1】 - トマシープが学ぶ

 

テキスト

白背景に黒だと読みやすい。黒背景に白だと現実が透けるので読みにくいかも!

Holo1

最小サイズ:0.35度

快適サイズ:2mのとき0.5度(1.75cm)

Holo2

最小サイズ

45 cmで 0.4 度~0.5 度 (0.3cm~0.4cm) 8.9 – 11.13 pt
2.0 m で 0.35 度~ 0.4 度(1.2cm~1.4cm) 35~40 pt

快適サイズ

45 cmで 0.65 度~0.8度 (0.5cm~0.6cm) 15-18 pt
2.0 m で 0.6 度~ 0.75 度(2cm~2.6cm) 60-74 pt

視線の方向

アプリ操作中は頭が少し下に傾くので、水平より10~20度ぐらいにコンテンツを出すと一番いい

f:id:bibinbaleo:20200407144506p:plain

上10度以上、下60度以上は避ける。

首の横振りの角度は45度以上を避ける。

腕をずっとあげさせない

腕をずっとあげると疲れるので、タップジェスチャは休み休み入れる。

もしくは音声入力を組み合わせる。

文字スタイル

docs.microsoft.com

3D文字は見にくいから使うな

Type Ramp

Type rampを作って確認しよう。

f:id:bibinbaleo:20200407153704p:plain

microsoftにおけるType rampとは下のような画像のことらしい。多分一般的な名前ではない)

f:id:bibinbaleo:20200407153554p:plain

UWP アプリの文字体裁 - UWP applications | Microsoft Docs

種類 

フォントの種類は一つにしろ

HoloではSegoeUI使ってるよ。

Windowsには入っている

f:id:bibinbaleo:20200407154336p:plain

Macの人も↓からダウンロードできる

Windows アプリ用の設計ツールキットとサンプル - UWP applications | Microsoft Docs

 

細いフォントは使わない。

42pt以下の時はウェイトのlightやsemilightを選ばない。ArialやHelvetixaはそのままでもとても読みやすい。

f:id:bibinbaleo:20200407154933p:plain

白い文字が読みやすい。白文字だけでも読めるけど背景色があったほうがいいかも。

f:id:bibinbaleo:20200407155201p:plain

黒は透明になるから、黒文字にするときは明るい背景を置く。

f:id:bibinbaleo:20200407155251p:plain

フォントサイズ

上にも書いたけど

最小サイズ

45 cmで 0.4 度~0.5 度 (0.3cm~0.4cm) 8.9 – 11.13 pt
2.0 m で 0.35 度~ 0.4 度(1.2cm~1.4cm)  35~40 pt

快適サイズ

45 cmで 0.65 度~0.8度 (0.5cm~0.6cm) 15-18 pt
2.0 m で 0.6 度~ 0.75 度(2cm~2.6cm) 60-74 pt

Hololensフォントなるものが配布されていた。記号が出るらしいけどどうやって出すんだろう?

f:id:bibinbaleo:20200407161922p:plain

XDで文字打ったら全部□になる

f:id:bibinbaleo:20200407162230p:plain

番外編:Unityでの設定

UnityでのuGUIやTextMeshでのtext設定が書いてある!!!神か???

docs.microsoft.com

Canvasの下にテキストを置くときのキャンバスの設定。

CanvasScalerを3にするときれいになる。

f:id:bibinbaleo:20200407160926p:plain

f:id:bibinbaleo:20200407161426p:plain

3DTextの場合はサイズを0.005にしてFontSizeを大きくするときれい

f:id:bibinbaleo:20200407161424p:plain

サウンド

触覚フィードバックがないからより音が重要だよ

docs.microsoft.com

ユーザーによって開始されてないイベント(=通知)に使う

ユーザーが開始したイベントも、その段階やステージを教えるために補助的に使う。

・通知サウンドを使うとき、他のサウンドの音量を一時的に下げる

サウンドがオフになってても使えるように設計する(サウンドに依存しすぎない)

 

・鳴らすべきタイミング

握ったとき離したとき(muffled=くぐもった音、whoosh=ぴゅーんなど)

 

スクロールなど手が動いている間は音が鳴り続けないといけないので、ループさせる

 

ボタンを押したとき、押せないボタンを押したとき

 

音声認識の確認(正の音)、失敗、認識中

 

移動中(ぴゅーん)

 

着信音(電話と同じように)

接続(短い正の音)

切断音(短いニュートラサウンド

 

3Dサウンド

空間を飛び回るヘリコプターのような空間で位置が紐づけられている音声は3Dサウンドにする必要がある。

反対に音声認識など空間が関係ないものはしない。

3DサウンドはCPU食うから気を付ける。

 

距離減衰

遠く離れている場所の音は静か

オーディオエンジンの既定の曲線は、非常に大きいスペース用なことが多いので、実際の空間サイズに合わせて減衰曲線を調整する。

ボタンなどは減衰させない。

最後に

めちゃくちゃ勉強になるよ!みんなも読もう!

 

公式ドキュメント、画面をスクロールして一番左下に言語選択があるんだけど、新しいページを開くたびに選択しないといけないので大変。

f:id:bibinbaleo:20200407104721p:plain

なんで上にないんだろう・・・

日本語選択した後は上で英語切り替えができるのに

f:id:bibinbaleo:20200407104724p:plain

urlに/ja-jpを入れたほうが早いかも

https://docs.microsoft.com/ja-jp/windows/mixed-reality/comfort

【CC0】自分で組み合わせて使える人物イラスト

Adobe先生のこのツイート見て面白そうだと思った

キャラクターメーカーみたいにボタンでぽちぽち組み合わせられるのかと思ったけど違った。 

OpenPepps

www.openpeeps.com

こんな感じの独特のシンプルな人物イラストがいっぱいある。

f:id:bibinbaleo:20200406221817p:plain

ダウンロードしてみた。

f:id:bibinbaleo:20200406222552p:plain



XDファイルを開く

dropboxで配布してた

www.dropbox.com

f:id:bibinbaleo:20200406221804p:plain

開いたらこんな感じ

f:id:bibinbaleo:20200406221810p:plain

組み合わせてみたけど、胴体と顔の位置関係が難しい

f:id:bibinbaleo:20200406222427p:plain

 

AdobeStockに素材投稿して一定数ダウンロードされたらAdobeCCが無料

AdobeStock

AdobeStockというAdobeの素材サイトがある

stock.adobe.com

そこで素材提供者(コントリビューター)になって、素材が150ダウンロード以上されたらAdobeCCのうち一つが1年無料になるらしい!

500DLだとコンプリートプランが無料だって!!!

contributor.stock.adobe.com

神じゃん。

イラストだけじゃなくて写真も投稿できるからAdobe製品持ってなくても余裕だろうし!

写真は私もPIXTAにアップしたことあるから、高品質素材のラインや提供の仕方はなんとなくわかる。

ガイド

helpx.adobe.com