Mixed Realityデザイン言語 — MRTK3

Button Main

ここ数年、さまざまな種類のディスプレイ、解像度、ユーザー エクスペリエンスを備えたさまざまなデバイスとフォーム ファクターが出荷されました。 Mixed Reality で優れたエクスペリエンスを設計するための一連のベスト プラクティスを開発しましたが、これらのベスト プラクティスは、さまざまな製品やデバイス間で設計をテストおよび評価する際に進化し続けています。

MRTK の構成要素を通じて一般にHoloLensするためのMesh アプリで紹介されている最新のMixed Realityデザイン言語を紹介することに興奮しています。 新しい設計変更は、開発者がより美しく、使いやすく、移植可能な運用対応のアプリケーションを構築することを目的としています。

機能強化

  • マルチモーダル入力の視覚的フィードバックの改善
  • 伝統的なHoloLens虹色の外観とモダンなFluentデザインを組み合わせた美しい丸みのあるデザイン要素
  • 明確で使用可能な複雑なレイアウトを構築するためのモジュラーバックプレートシステム
  • 視覚的ノイズを減らし、流動的な視線入力による操作を可能にするように、境界ボックスビジュアルを再設計しました
  • RectTransform と Canvas を使用した動的レイアウト

重要な要素

ジオメトリ

Geometry

Geometry は、UI 要素の図形、サイズ、位置を表します。 これらの基本的なデザイン要素は、デザイン システム全体でエクスペリエンスの一貫性を持たせるのに役立ちます。 新しいデザイン言語では、角が丸いジオメトリが導入され、より近くて魅力的でモダンなエクスペリエンスが生み出されます。 ジオメトリも完全に 3 次元であり、実際の設計を接地するのに役立つ具体的な厚さがあります。 また、これらの要素は実際の物理オブジェクトであり、3D 空間内に存在し、オブジェクトにアタッチしてグラブ、移動、または操作できることをユーザーに通知します。

Color

Backplate color

色は、ユーザー インターフェイス要素間の視覚的階層と構造を示して、ユーザーがタスクに集中できるようにします。 新しいデザイン言語では、より暗い配色を使用して目の疲れを最小限に抑え、加法ディスプレイで十分に明るく不透明なままにして、直接手の操作を行うときのユーザーの自信を高めます。

光と材料

Light

光と材料は、空間相互作用で視覚的なフィードバックを提供する上で不可欠な役割を果たします。 コンテキスト 3D 照明を使用すると、特にデバイスの加法ディスプレイが深度の混乱を引き起こす可能性があるときに、ユーザーが深度と相互作用の状態を認識するのに役立ちます。 たとえば、ユーザーの指先がボタンの押し付け可能な表面に微妙な輝きを放ち、ホログラムからの指の距離に対するユーザーの認識が向上します。

Layering and Elevation

レイヤーは、あるサーフェスを別のサーフェスと重ね合わせするという概念です。 Mixed Realityデザイン言語では、レイヤーと昇格を使用して、空間相互作用の操作の品質と使いやすさを向上させ、ユーザーの入力に対する美しく直感的な応答をユーザーに提供する容積測定 UI を作成します。

図像

Iconography

アイコンとは、ユーザーがアプリを理解して移動するのに役立つ、一連の視覚的画像とシンボルのことです。 Mixed Realityデザイン言語では、Windows 11の図像が使用されます。 システム アイコン フォントのすべてのグリフは、より柔軟な配置と最新のメタファーを受け入れるよう再設計されました。

文字体裁

Typography

言語の視覚的表現である文字体裁において、何よりも重要な役割は情報を伝達することです。 デザイン言語の型ランプは、UI の読みやすさと読みやすさを最大限に高めるために、コンテンツに構造と階層を作成するのに役立ちます。

MRTK3 のMixed Realityデザイン言語

MRTKv3 Tearsheet

Mixed Realityデザイン言語の使用例

実際のMixed Reality設計言語の例について説明します。

HoloLens 2用のMicrosoft Mesh アプリ

Mesh app for HoloLens 2