设计 Microsoft Teams 会议扩展

项目
03/15/2023

你可以创建应用来提高会议效率。例如，要求人们在会议期间完成调查，或发送不会中断会议流的快速提醒。

Microsoft Teams UI Kit

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

获取 Microsoft Teams UI Kit（用户）

添加会议扩展

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

在会议之前添加

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

在会议期间添加

移动设备

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

示例演示如何在移动设备上的会议期间添加会议扩展。

桌面

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

会议前

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

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

计数器	说明
1	选项卡名称: 选项卡的导航标签。
2	选项卡溢出: 打开选项卡操作，如重命名和删除。
3	iframe: 显示应用内容。

使用 UI 模板进行设计

使用以下 Teams UI 模板之一来帮助设计会议选项卡：

列表: 列表可以以可扫描的格式显示相关项，并允许用户对整个列表或单个项目执行操作。
任务板: 任务板 (有时称为看板或泳道) 是通常用于跟踪工作项或票证状态的卡片集合。
仪表板: 仪表板是包含多个卡片的画布，可提供数据或内容的概述。
表单: 表单是用于收集、验证和提交用户输入的结构化方式。
空状态: 空状态模板可用于许多方案，包括登录、首次运行体验、错误消息等。
左侧导航: 如果选项卡需要导航，左侧导航组件可提供帮助。通常，应将导航保持在最低限度。

使用会议内选项卡

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

用例

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

提供详细的反馈。例如，评估应聘者。
为会议参与者创建投票、调查或任务项。
显示与会议相关的笔记。例如，有关销售线索的信息。

移动设备

示例演示如何在移动设备上的会议内选项卡中显示投票内容。

桌面

剖析：会议内选项卡

计数器	说明
1	应用图标 (所选) ：16 像素透明应用徽标。
2	应用名称
3	标头：包括应用名称。
4	“关闭”按钮：关闭选项卡。始终使用右上方的关闭图标，而不是页脚中的操作。
5	通知栏：错误警报直接显示在标头下方，并将 iframe 的其余内容向下推送 20 像素。
6	iframe: 显示应用内容。

Spacing

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

示例显示会议内选项卡间距维度。

滚动

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

iframe 内容中的内容应仅垂直滚动。
用户只能看到他们滚动到的内容， () 上方或下方的内容。
滚动条是 iframe 内容的一部分。

示例显示会议内选项卡的滚动方式。

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

使用会议内对话

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

用例

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

提供简短的反馈。
进行简短的调查或投票。
提交审批。
获取提醒。

移动设备

示例演示如何在移动设备上使用会议内对话。

桌面

剖析：会议内对话框

示例显示了会议内对话的结构剖析。

计数器	说明
1	标头：包括应用图标、名称、操作字符串和关闭图标。
2	iframe: 显示应用内容。

有两个标头变体。如果可能，请将变体与头像一起使用，以强化对话来自某个人。

计数器	说明
1	虚拟形象：启动会议内对话的人员。
2	应用图标
3	应用名称
4	“关闭”按钮：关闭对话框。
5	操作字符串：通常描述启动对话的人员。

响应行为：会议内对话

会议内对话的大小可能有所不同，以考虑到不同的方案。请确保保持填充和组件大小。

宽度：可以在支持的大小范围内任意位置指定对话框 iframe 的宽度。
高度：可以在支持的大小范围内任意位置指定对话框 iframe 的高度。如果应用内容超过最大高度，还可以允许用户垂直滚动。

使用共享会议阶段

你可以允许用户在会议舞台上共享你的部分或所有应用内容并与之交互。下面是人们在会议期间如何使用此功能的示例：

编辑文档。
白板
查看仪表板。
观看视频。
玩游戏。

共享到会议阶段的应用占用与共享屏幕相同的空间。舞台也以相同的方式重新定位所有会议参与者。

用例

共享会议阶段与协作和参与有关。下面是帮助你入门的一些示例方案。

编辑和查看：与会议中的每个人一起深入了解仪表板和规划。

白板：在共享画布上一起绘制和构思。

测验：通过交互式材料测试知识并获取见解。

计数器	说明
1	应用图标：突出显示的图标指示应用的会议中选项卡已打开。
2	“共享到会议”按钮：用于将应用共享到会议的入口点。显示是否将应用配置为使用共享会议阶段。
3	iframe: 显示应用内容。
4	“停止共享”按钮：停止将应用共享到会议阶段。仅针对启动共享的参与者显示。
5	演示者属性：显示共享应用的参与者的姓名。

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