web-dev-qa-db-ja.com

HUD UIデザイン-線と透明度のテーマを推進するもの

HUDソフトウェアに共通することが1つあります。それは、ラインのような(細い境界線、ラインポインティング)、半透明のUIです。いくつかのアイコンでさえ、現物の輪郭です。 Google Glassを試したことはありませんが、写真によるとUIは似ているようです。

  • それはどこから来たの?このタイプのUIデザインのきっかけは何ですか?
  • その背後にあるUXは何ですか?グーグルはそれを使うので、それは良いものでなければなりません。
  • それらがHUDである場合、それらを明確に表示するために少し不透明にすべきではありませんか?実世界の画像とは対照的に、線はほとんど見えませんか?

私たちのシステム設計インストラクターが「UIはそこにないかのように、ユーザーに対して透過的である必要があります」と言ったことを覚えています。 (UIは直感的で使いやすいはずです)が、このHUD UIは文字通りそれを採用しました。

グーグルグラス

Google Glass

鉄人

Iron Man

マイノリティレポート

enter image description here

質量効果

Mass Effect

ハロー

Halo

ストライクベクトル

Strike Vector

3
Joseph

偽のHUDがワイヤーフレームを使用する理由

ゲームや映画の例は、元のHUD(軍用および(後の)民間航空用)を模倣しています。彼らは単にスタイルの問題としてそれを行っていると私は推測します。 「実際の」HUDは細線のワイヤフレームシンボルを使用するため、信頼性の高いHUDは、使いやすさを特に考慮せずに本物に見えるようにします。

本当のHUDがワイヤーフレームを使用する理由

それらのような航空HUD ロックウェルコリンズによって生成 は、ウィンドウで起こっている(または起こり得る)ことが、ディスプレイに表示されているものよりも気づくことがほとんど常に重要であるため、ワイヤーフレームを使用します。航空HUDがより洗練され、より象徴的になったので、HUDがパイロットの注意を「捕らえ」、ケースの中でパイロットが文字通り目の前の窓の外で重要な何かに気づかないようにした(地面のようなものが本当に実際になっているような)閉じる)。 Fisher、Haines、and Price(1980) による独創的な研究により、HUDは実際には、直観に反して、ウィンドウ外のイベントに対するパイロットの反応を遅らせることができることが実証されました。シミュレーターの研究では、2人のパイロットが気づかずに飛行機を別の飛行機の上に着陸させました!

この現象の解決策の1つは、視覚的な混乱を最小限に抑えることでした。できるだけ少ないピクセルまたは蛍光体でシンボルを作成してください。それは、とりわけ、薄いかすかな線で行くことを意味しました。このように設計されたHUDは、ウィンドウ外のイベントに対する反応を改善します。

すべてのHUDでワイヤーフレームを使用する必要がありますか?

では、航空以外の状況でのHUDはワイヤフレームを使用する必要がありますか?マスエフェクト、マイノリティレポート、および(私は)アイアンマンの例では、違います。ユーザーが注意しなければならないディスプレイの背後では何も起こりません。壁がユーザーに突っ込むことはありません。実際、使いやすさのために、ディスプレイはまったく透明であってはなりません。彼らはそうではなかったそれを読みやすくなります。未来の軍事的雰囲気を呼び起こすのは、そこだけです。また、SF映画製作者はHUDが大好きだと思います。なぜなら、視聴者はディスプレイに何が表示されているのか、それに対するキャラクターの反応を同時に見ることができるからです。キャラクターのためではなく、聴衆の利益のためです。

Google Glassは違います。ウォーキング中(またはスキー、カヤック、または、あえて言うと、運転中)に使用することを目的としています。航空の場合と同様に、通常、ディスプレイの向こうで何が起こっているかは、Glassが表示しているものよりも重要です。ブルックリンブリッジの長さを知ることは、衝突しようとしていることを知ることほど重要ではありません。

ワイヤーフレームの適切な使用と非使用はどちらも、比例表示と同じ基本的なユーザビリティの原則を適用したものです。最も重要な情報(リアルまたはデジタル)を最も明白にします。重要性の低い情報を犠牲にして。

5

どこから来たのですか? /何がそれを動かしていますか?

研究者たちが人々がどのように、どこでテクノロジーと相互作用したかを説明し始めたのは60年代後半でした。ただし、航空機メーカーのボーイングがエンジニアを支援するために拡張現実ゴーグルを使い始めたのは、90年代初頭まで拡張現実(AR)という造語が作られた時でした飛行機の組立工程。

ウェアラブル技術とHUDにより、ユーザーはいつでもどこでもオンラインリソースにアクセスできます。この柔軟性により、ユーザーの周囲のコンテキストを利用する新しい種類のアプリケーションが可能になります。このタイプの位置認識コンピューティングにより、ユーザーが目にする現実の世界を仮想情報のレイヤーにリンクできます。この傾向により、文字通り、ユーザーの物理的な世界のビューに注釈を付けることができます。光学またはビデオ混合シースルーディスプレイ(つまり、Google Glass)を介して、ユーザーは物理的な世界に接続された電子情報をその場で表示します。

その背後にあるUXは何ですか?

前述のように、実際のオブジェクトまたは物理空間はこれらのインターフェースの基本的なキャンバスであり、UIが組み込まれているため、コンテキストデータを追加して、対象の理解を深めることができます。重要な要素の1つは、これらの体験が人間の視覚と空間認識の力を利用することです。全体的なユーザーエクスペリエンスの目標は、現在の視覚的コンテキストに基づいてインターフェイスがサポート情報を表示できるようにすることです。

組立て、メンテナンス、手術などの複雑なタスクは、ARテクノロジーを使用して追加の有用な情報を挿入することで簡略化できます。複雑な修理作業の中には、AR情報に完全に依存して、作業の完了をサポートするものがあります。

HUDの場合、はっきりと見えるように少し不透明にすべきではありませんか?実世界の画像とは対照的に、線はほとんど見えませんか?

あなたが紹介したインプレースムービーHUDに関しては、それらは主に魅力的なものです。これらのファンタジーインターフェースは通常、問題の俳優が何らかの形式の情報と相互作用していることを視聴者に伝える方法として見なされることに注意してください。コンピューターで作業している俳優のスクリーンショット、または後ろからのショットを表示することは、視覚的に逮捕されることも、「素晴らしく技術的」に見えることもありません。

HUDを適切に実行すると、インターフェイスとの対話中に、何らかの形の不透明な背景が統合されます。ユーザーが実世界の何かとやり取りする必要がある場合、不透明な性質が失われ、ユーザーの実世界のコンテキストが示されます。

実際のインスタンスでは、ARインターフェースから提供される情報は二次的かつ補足的なものです。

Google Glassでは、デバイスを管理しているUI画面の背景が完全に不透明で黒いです。実際のデバイス自体とのほとんどのやり取りはこのように処理され、読みやすさと使いやすさが向上します。現実の世界とやり取りしているとき、いくつかの小さな視覚的なキューを除いて、UIはほとんど存在しません。 Glassはイマージョンと呼ばれるものもサポートしていますが、これらは主にタイムラインよりも優先してコンテキスト外のUIを表示する場合に予約されています。

タイポグラフィは非常に軽量なフォントで実行されます。これは、目からの距離が原因です(網膜は、これらの解像度で必要な線の太さと密度が少なくなります)。可視性を制御する主な特性は、インターフェイスアイテムのライトバランスです。

出典:

拡張現実技術におけるビジュアルWebユーザーインターフェイスデザイン

Google Glassの設計原則

•私はGoogle Glass Explorerです

4
Courtny

拡張現実感のようなインスタンスでは、プログラムの通知とフィードバックよりも、どこに行くのかを見ることの方が重要です。細いフォントと透明な背景により、焦点を当てていないときに背景にフェードインし、作業しているものに焦点を合わせることができます。逸話的なポイントですが、HUDが画面スペースに数えられない場合、ゲームでそれはかなり大きな競争力のあるエッジであることを知っています。

それに応えて、見た目がきれいなカーゴカルトに応用されていると思います。例:マイノリティレポート、壁は見る必要はありません。アイアンマンでは、それは部屋の真ん中に浮かんでいるので、画面を介して人と話すことを可能にします。

もちろん映画では、主人公がしているクールなものを見せ、彼らが新しい情報を発見するときに彼らの顔を見せ、彼らの感情を伝えているという利点があります。

3
VoronoiPotato

Iron ManやMinority Reportなどのmoviesの場合、このUIは基本的に「cool」に見えます。 Tom Cruiseが不透明であれば、彼のデバイスとやり取りできると思います。そして、Gwyneth Paltrowが彼女の画面を非常に効率的に読み取ることができるかどうかはわかりません。

HaloやStrike Vectorのようなビデオゲームの場合、HUDの透明度は機能です。どちらもいつでもアクセスできる必要がある有用な情報を提供しますが、透明性によりビューポートが乱雑になりすぎないようにします。情報は必要なときにそこにありますが、邪魔になりません。

その他の例:PESのレーダー。

enter image description here

ほんの少しの透明度でも、背後や周囲で起こっていることを視覚化できるのは驚くべきことです。

Google Glassの場合、表示される情報は通常、表示されるcontextに関連しています。透明なHUDを通して見ることができる視覚的要素が関連しています。

1
jgthms