ウィジェットの状態と組み込みの UI コンポーネント

Note

一部の情報はリリース前の製品に関する事項であり、正式版がリリースされるまでに大幅に変更される可能性があります。 Microsoft はここに示されている情報について、明示か黙示かを問わず、一切保証しません。

重要

このトピックで説明する機能は、ビルド 25217 以降の Windows の Dev チャネル プレビュー ビルドで使用できます。 Windows のプレビュー ビルドについては、「Windows 10 Insider プレビュー」を参照してください。

ウィジェットの状態

ウィジェット ボードにウィジェットが表示される場合、ウィジェット ボードとアプリの現在の状態に応じて、ウィジェットを読み込んでいる場合、ウィジェットがエラー状態の場合、ユーザーがウィジェット レイアウトをカスタマイズした場合など、さまざまな状態があります。 一部の状態はアプリによって設計および実装され、他の状態はウィジェット ホストに組み込まれています。 このセクションでは、各ウィジェットの状態を示して説明します。 ウィジェットは淡色テーマと濃色テーマの両方をサポートしているため、組み込みの状態とカスタマイズした状態は、現在のテーマによって異なる可能性があることに注意してください。

既定の状態

A screenshot of a widget in the default state

既定の状態は、ウィジェットを正常に実行している場合のように表示されます。 これは、ウィジェットの主要なユーザー エクスペリエンスです。 ウィジェットの既定の状態のレイアウトを設計します。 ウィジェットの既定の状態の UI はユーザー構成に応じて変更される場合がありますが、ウィジェットの既定の状態は完全に実装する必要があり、ユーザー構成を行う前に空にしないでください。 ウィジェットでユーザーがサインインする必要がある場合は、以下で説明するサインアウト状態を実装できます。 ウィジェットの既定の状態を作成するための設計ガイダンスについては、「ウィジェット設計の基礎」を参照してください。

推奨

  • 既定では、アクティブな状態の場合、ウィジェットは個人用と見なされ、ユーザーに接続されている必要があります。
  • ウィジェットには、今この瞬間にユーザーに価値をもたらす魅力的なコンテンツが表示されます。
  • ユーザーがウィジェットとの対話処理をすぐに開始できるようにします。
  • 一貫性を最大限に高め、学習曲線を小さくするために、アプリの UI を反映する UI をウィジェットの設計上の制約内に留めるように指定します。
  • ユーザーの場所を使用して、汎用データの代わりに追加するスポーツや推奨されるカレンダーなどのコンテンツのデータを事前入力することを検討してください。
  • 要素間でひと息つけるようにします。

非推奨

  • 汎用商用オファーにはウィジェットを使用します。 コンテンツには、ユーザーの要望と意図が反映されている必要があります。
  • ごちゃごちゃして複雑なレイアウトを避けます。

一目でモデルを見つけられるように、快適な情報密度と各ウィジェット サイズ内の正常なネガティブ スペースを目的にします。 含める情報が多い場合は、より多くのコンテンツを表示するために次のサイズを検討してください。 また、ユーザーが一目見て使用するようになるコンテンツの困難さや簡単さについても検討してください。

エクスペリエンスを向上させるために、ウィジェットに驚きや喜びを得られる瞬間を追加することを検討してください。 たとえば、[家族] ウィジェットや [カレンダー] ウィジェットでは、さまざまな視覚処理を介して子供の誕生日を強調表示できます。

これは、設計の柔軟性が最も高い状態です。 この記事のガイドラインに加え、ウィジェットの原則ウィジェット設計の基礎ウィジェットの対話式操作の設計のガイダンスを使用して、コンテンツのレイアウト方法を設計します。

サインアウト状態 (認証が必要なウィジェットの場合)

A screenshot of a widget in the signed-out state

一部のウィジェット シナリオでは、ユーザーがサインインするか、他のアクションを実行して、カスタマイズしたウィジェット コンテンツを表示する必要がある場合があります。 ユーザーがサインインしていない場合は、カスタマイズしていないコンテンツを提示することを検討する必要があります。

エラー状態 - システム提供

A screenshot of a widget in the error state

何らかの理由でウィジェット ボードでウィジェットのレイアウトまたはデータを取得できない場合は、エラー状態が表示されます。 Windows では、ウィジェットのヘッダーにエラー メッセージと再読み込みボタンが表示されます。 このメッセージは、すべてのウィジェットで同じように表示されます。

キャッシュされたコンテンツを表示できる場合、ウィジェットのヘッダーには、データが最後に更新された日時が次の形式で表示されます。

  1. 1 時間未満の場合は分数
  2. 1 時間以上の場合は最も近い時間に丸め処理

キャッシュされたメッセージを最大 15 文字で表示すると、長いウィジェット パートナー名が切り詰められます。

カスタマイズ状態

Windows アプリ SDK 1.4 以降では、ウィジェットは、ウィジェットの外観やウィジェットによって表示されるデータをカスタマイズするための制御をユーザーに付与するカスタマイズ テンプレートを提供できます。 カスタマイズ UI は JSON テンプレートで定義されます。

組み込みのウィジェット UI コンポーネント

ウィジェットの一部の UI 要素はウィジェット エクスペリエンスに組み込まれており、これらの要素はウィジェット プロバイダーによってカスタマイズできませんが、これらの要素の内容と動作に注意することが重要です。

コンテキスト メニュー (システム提供)

Context menu

ユーザーが右上の 3 点アイコンをクリックすると、コンテキスト メニューが表示されます。 このメニューを使用すると、ユーザーは好みのウィジェット サイズを選択し、ウィジェットの構成状態にアクセスできます。 パートナーは、同じテンプレート ウィジェット登録 "powered by ___" を使用します。

帰属領域

A screenshot of a widget with a red box and label calling out the attribution area at the top of the widget containing the widget name and icon.

帰属領域は、ウィジェットの登録時に指定されるウィジェット名とアイコンに基づいて、ウィジェット ボードでレンダリングされます。 ウィジェットの登録の詳細については、「ウィジェット プロバイダー パッケージ マニフェスト XML 形式」を参照してください。