设计会议扩展 - Teams | Microsoft Learn

Microsoft Teams UI Kit

可以在 Microsoft Teams UI 工具包中找到更全面的设计准则，包括可以根据需要抓取和修改的元素。

获取 Microsoft Teams UI Kit（用户）

添加会议扩展

用户可以在会议之前和会议期间添加会议扩展。他们还可以直接从 Teams 应用商店为特定会议添加应用。

在会议之前添加

在会议详细信息中，用户可以选择“ 添加选项卡 +” 以打开应用浮出控件并查找针对会议优化的应用。

在会议期间添加

(添加应用后，例如，在桌面) 上，用户可以通过选择“ 更多 ”来访问会议中的应用。

在会议中，用户可以选择“ 更多 > 添加应用 ”，然后选择所需的应用。

在会议之前，你的应用在选项卡中可供用户使用。以下示例演示了人们将在会议期间回答的草稿调查问题。

剖析：会议前后 (“会议”选项卡)

列表 : 列表可以以可扫描的格式显示相关项，并允许用户对整个列表或单个项目执行操作。

任务板 : 任务板 (有时称为看板或泳道) 是通常用于跟踪工作项或票证状态的卡片集合。

仪表板 : 仪表板是包含多个卡片的画布，可提供数据或内容的概述。

表单 : 表单是用于收集、验证和提交用户输入的结构化方式。

空状态 : 空状态模板可用于许多方案，包括登录、首次运行体验、错误消息等。

左侧导航 : 如果选项卡需要导航，左侧导航组件可提供帮助。通常，应将导航保持在最低限度。

使用会议内选项卡

会议内选项卡是用于在会议期间增强协作的画布。与会者可以通过共享或基于角色的视图在会议舞台外的专用空间中查看应用内容并与之交互。

人员可以使用会议内选项卡来：

提供详细的反馈。例如，评估应聘者。

为会议参与者创建投票、调查或任务项。

显示与会议相关的笔记。例如，有关销售线索的信息。

剖析：会议内选项卡

Spacing

优化会议内选项卡，使其适合 280 像素宽的 iframe 区域中的边缘到边缘。 iframe 的左右两侧以及选项卡标题之间有 20 像素的填充。 iframe 已完全出血到选项卡底部。

如果允许滚动，请记住以下事项：

iframe 内容中的内容应仅垂直滚动。

用户只能看到他们滚动到的内容， () 上方或下方的内容。

滚动条是 iframe 内容的一部分。

对于导航层或内容繁重的方案，我们建议允许用户转到第二层。用户必须能够返回到上一层。

使用会议内对话

会议内对话框显示在 Teams 会议舞台上。它们需要用户的注意、确认或交互，但很微妙，不会中断会议。应谨慎使用这些内容，并且适用于轻型和面向任务的场景。

会议内对话由用户 (触发，例如会议组织者) 谁可能希望参与者：

提供简短的反馈。

进行简短的调查或投票。

提交审批。

获取提醒。

剖析：会议内对话框

“共享到会议”按钮 ：用于将应用共享到会议的入口点。为了获得一致的体验，请始终使用标准 Teams 共享图标。建议使用默认文本 “共享到会议 ”，但你也可以根据用例自定义它。例如，对游戏应用 一起玩游戏 ，或一 起观看 视频应用。无论哪种方式，请明确操作将创建与会议中的每个人共享的交互式体验。 iframe : 显示应用内容。 “停止共享”按钮 ：停止将应用共享到会议阶段。仅针对启动共享的参与者显示。 演示者属性 ：显示共享应用的参与者的姓名。

响应行为：共享会议阶段

共享到会议阶段的应用的大小因会议状态和用户调整窗口大小而异。保持导航和控件的填充和响应式布局，就像在浏览器中一样。

侧面板 ：用户可以在会议期间随时打开侧面板来聊天、查看名单或使用应用 (即会议内选项卡) 。当面板打开时，阶段会动态重新排列。

视频和音频网格 ：视频和音频网格始终可见以显示会议参与者。当用户聚焦或固定会议中的某人时，这会增加参与者网格的高度或宽度，具体取决于方向。

没有侧面板) 的会议阶段 (

当侧面板未打开时，会议舞台默认为 994x678 像素，最小可为 792x382 像素。

带有侧面板) 的会议阶段 (

当侧面板打开时，会议舞台默认为 918x540 像素，最小可为 472x382 像素。

可以在会议结束后返回到会议并查看应用内容。在此示例中，会议组织者可以在“ Contoso ”选项卡中查看投票结果。 (注意：从设计的角度来看，会议前和会议后选项卡体验之间没有区别。)

使用上述建议打造优质应用体验。