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

[アーティクル]
10/06/2023

Note

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

重要

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

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

既定の状態

既定の状態のウィジェットのスクリーンショット

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

推奨

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

非推奨

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

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

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

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

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

サインアウト状態のウィジェットのスクリーンショット

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

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

エラー状態のウィジェットのスクリーンショット

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

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

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

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

カスタマイズ状態

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

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

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

帰属領域

ウィジェットの名前とアイコンを含むウィジェットの上部にある属性領域を呼び出す赤いボックスとラベルが表示されたウィジェットのスクリーンショット。

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

次の方法で共有