次の方法で共有


高度な UI コンポーネントを使用してMicrosoft Teams アプリを設計する

次のコンポーネントは、ナビゲーションなどの一般的な Teams 設計状況に使用できる 基本的な UI コンポーネント の組み合わせです。

Microsoft Teams UI Kit

Fluent UI に基づいて、Microsoft Teams UI Kit には、Teams アプリをビルドするために特別に設計されたコンポーネントとパターンが含まれています。 UI キットでは、ここに記載されているコンポーネントを直接デザインに取り込んで挿入し、各コンポーネントの使用方法の他の例を確認できます。

階層リンクは、アプリの階層を伝えるナビゲーション支援です。 ユーザーは、表示しているページが全体的なエクスペリエンスにどのように適合しているかを理解し、その階層内の上位レベルへのワンクリック アクセスを許可するのに役立ちます。

上位のユース ケース

  • 通信階層
  • ナビゲーション

Mobile

例は、モバイルでの階層リンク テンプレートを示しています。

Desktop

例は、デスクトップ上の階層リンク テンプレートを示しています。

左側のナビゲーション

左側のナビゲーションを使用して、Teams タブ内の複数のページを参照します。次の例では、左側のナビゲーションはチャネル リストとタブ コンテンツの間にあります。

上位のユース ケース

  • [Teams] タブ内の複数のページを参照します。
  • 複雑なアプリを複数のページに分割します。

Mobile

例は、モバイル上の左側のナビゲーション テンプレートを示しています。

Desktop

例は、デスクトップ上の左側のナビゲーション テンプレートを示しています。

通知バー

通知バーは、ユーザーが直ちにアクションを実行する必要のない、簡単で重要なメッセージを表示するための専用領域です。 特定の背景色とアイコンは、特定の種類のメッセージに関連付けられます (以下を参照)。

Fluent UI アラート コンポーネントを使用して通知バーを実装できます。

上位のユース ケース

  • 重要なメッセージ、エラー、警告
  • 成功メッセージ
  • 情報メッセージまたはプロモーション メッセージ

Mobile

モバイル上の通知バー UI テンプレートの例を示します。

Desktop

例は、デスクトップ上の通知バー UI テンプレートを示しています。

Stageview

Stageview を使用すると、ユーザーはコンテキストを切り替えることなく、Teams の大きな画面に画像、ファイル、Web サイトなどのコンテンツを表示できます。 このコンポーネントは、主にコンテンツを表示するためのコンポーネントです。 複雑な操作には使用しないでください。

Stageview を実装する方法を参照してください。

上位のユース ケース

  • 別のアプリやブラウザーではなく Teams 内の大きな画面にコンテンツを表示する
  • スポットライト メディアまたはその他のリッチ コンテンツ

Mobile

アプリは、アダプティブ カード、共有リンク、またはビジュアル コンポーネント (グラフなど) からステージを起動できます。

例は、モバイル上のステージ テンプレートを示しています。

Desktop

例は、デスクトップ上のステージ テンプレートを示しています。

ツールバー

ツール バーは、コントロールのセットをグループ化するためのコンテナーです。

上位のユース ケース

  • アプリ コンテンツに対するコンテキスト アクション。
  • コンテキスト フィルターと検索。
  • ナビゲーションと階層リンク。

Mobile

例は、モバイル上のツール バー テンプレートを示しています。

Desktop

例は、デスクトップ上のツール バー テンプレートを示しています。