Microsoft Teams アプリのダイアログのデザイン

ダイアログ (TeamsJS v1.x のタスクモジュールと呼ばれます) を使用して、Teams アプリでモーダルポップアップエクスペリエンスを作成できます。この機能を使用して豊富なメディアと情報を表示し、複雑なタスクを完了します。

Microsoft Teams UI Kit

Microsoft Teams UI Kit では、必要に応じて取得および変更できる要素など、より包括的なダイアログ設計ガイドラインを確認できます。

ダイアログは、アプリ内のほぼすべての場所から起動できます。

タブ: タブ内の任意のリンクからダイアログを起動できます。ユーザーが操作に集中するシナリオで使用します。
ボット: ボットメッセージ内のリンクからダイアログを起動できます。
アダプティブカード: ユーザーがボタンを選択すると、アダプティブカード (メッセージ拡張機能またはボットによって送信) からダイアログを起動できます。
メッセージ拡張機能 (アクションコマンド): メッセージ拡張機能を使用すると、メッセージコンテンツに対して特定のアクションを実行できます。アクションを選択すると、ダイアログが開きます。
メッセージ拡張機能 (compose box context): 作成ボックスで、一般的なポップアップではなくダイアログを開くメッセージ拡張機能を設計できます。フォームの完成など、複雑な操作のダイアログを予約します。

ダイアログは、ホストされているアプリエクスペリエンスのための柔軟な画面を提供します。これらは iframe (デスクトップ) または Webview (モバイル) を使用して構築されているため、UI テンプレート (推奨) またはゼロからダイアログを設計できます。

また、アダプティブカードフレームワークを使用して構築することもできます。これは、一般的なシナリオ (フォームなど) を促進する、より簡単で迅速な方法です。

モバイルでのダイアログの UI 構造を示す図。

カウンター	説明
1	ヘッダー: ヘッダーを明確かつ簡潔にします。ユーザーに完了させたいタスクについて説明します。
2	アプリ名: アプリのフルネーム
3	[閉じる] ボタン: ダイアログを閉じます。アプリコンテンツに保存されていない変更は適用されません。
4	Web ビュー: アプリコンテンツをホストする応答性の高いスペース。
5	アクション (省略可能): アプリコンテンツに関連するボタン。

ダイアログの UI 構造を示す図。

カウンター	説明
1	アプリアイコン
2	アプリ名: アプリのフルネーム
3	ヘッダー: ヘッダーを明確かつ簡潔にします。ユーザーに完了させたいタスクについて説明します。
4	[閉じる] ボタン: ダイアログを閉じます。アプリコンテンツに保存されていない変更は適用されません。
5	IFRAME: アプリコンテンツをホストする応答性の高いスペース。
6	アクション (省略可能): アプリコンテンツに関連するボタン。