设计 Microsoft Teams 邮件扩展

邮件扩展是是插入应用内容或处理邮件而不离开对话的快捷方式。 为指导应用设计，以下信息描述并说明用户可以如何在 Teams 中添加、使用和管理邮件扩展。

Microsoft Teams UI Kit

可在 Microsoft Teams UI Kit 中查看全面的邮件扩展设计指南，包括可根据需要获取和修改的元素。

获取 Microsoft Teams UI Kit (用户)

添加邮件扩展

可以在以下 Teams 上下文中添加邮件扩展：

• 从 Microsoft Teams Store。
• 在频道、聊天或会议（会议之前、期间和之后）中的撰写框旁边。 值得注意的是，如果在这些位置之一添加邮件扩展，则只能在该上下文中使用。

以下示例演示如何在频道中添加邮件扩展。

移动设备

桌面

设置邮件扩展

身份验证不是强制性的，但如果应用类似于票证跟踪工具，则需要用户登录才能使用邮件扩展。

为确保 Teams 应用的一致性，你无法自定义登录屏幕。 如果使用单一登录 (SSO) 身份验证，则用户会自动登录。

移动设备

桌面

邮件扩展类型

邮件扩展可以包含搜索命令、操作命令或两者兼有。 命令取决于应用的功能以及这些功能如何适合 Teams 用例。

搜索命令

借助搜索命令，用户可以使用邮件扩展来快速查找外部内容并插入到邮件中。 搜索命令通常在撰写框中可用。 例如，你可以通过共享一段内容来开始讨论或添加到讨论中，而无需离开 Teams。

移动设备

桌面

撰写框布局选项

有多种选项显示邮件扩展搜索结果，包括列表和网格视图。

操作命令

操作命令允许用户在 Teams 中触发外部服务的操作和流程请求。 例如，如果应用跟踪订单，则用户可以直接从聊天中，使用同事的消息内容新建订单。

基于操作的邮件扩展通常要求用户填写某个模式中的一个表单或一些其他类型的配置。 可以使用 TeamsJS v1.x) 中称为任务模块的对话 (创建这些体验。

打开邮件扩展

撰写框和邮件或帖子是用户使用邮件扩展的主要上下文。

从撰写框

添加后，用户可以选择撰写框下方的应用图标来打开邮件扩展。 在这些示例中，扩展同时拥有搜索和操作命令。

移动设备

桌面

从聊天消息或频道帖子

添加后，用户可以在聊天消息或频道帖子中选择 “更多 ”图标来查找扩展的操作命令。 根据使用情况，扩展可能列在更多操作的下方。

聊天消息

频道帖子

使用邮件扩展

以下场景介绍了用户使用邮件扩展的主要方式。

在消息中插入内容

1.选择邮件扩展。 用户可以从撰写框中搜索要共享的内容。

移动设备

桌面

2. 插入内容。 发布内容后，其他人可以回复或选择内容，查看应用中的详细信息。

移动设备

桌面

对消息执行操作

1.选择邮件扩展。 应用可以包含一个或多个操作命令。

2. 完成操作。 应用可以接收和处理消息操作发送的任何内容或数据。 用户在继续对话时完成应用中的操作。

预览链接

邮件扩展还允许将识别到的 URL 中极具特色的链接插入到邮件中（此功能称为“链接展开”。）

1. 在撰写框中粘贴识别到的链接。

移动设备

桌面

2. 插入内容。 如果应用识别撰写框中的 URL，则会将链接呈现为提供 Web 内容内容丰富的预览卡片。 （有关详细信息，请参阅自适应卡设计准则。）

移动设备

桌面

管理邮件扩展

用户可以通过右键单击图标来固定、删除或配置邮件扩展。

解剖

撰写框中的邮件扩展

以下示例展示了从撰写框打开的邮件扩展。

移动设备

计数器	说明
1	应用名称：应用的全名。
2	操作命令菜单图标（可选）：打开邮件扩展的操作命令列表（如果指定）。
3	搜索框：允许用户查找要插入的应用内容。
4	选项卡菜单（可选）：提供多个内容类别。
5	操作命令菜单（可选）：显示操作命令列表（如果指定）。
6	应用内容：主要用于显示搜索结果。

桌面

计数器	说明
1	应用徽标：应用徽标的彩色图标。
2	应用名称：应用的全名。
3	操作命令菜单图标（可选）：打开邮件扩展的操作命令列表（如果指定）。
4	搜索框：允许用户查找要插入的应用内容。
5	选项卡菜单（可选）：提供多个内容类别。
6	操作命令菜单（可选）：显示操作命令列表（如果指定）。
7	应用内容：主要用于显示搜索结果。 此处的示例使用的是列表布局（另一个选项是网格布局）。
8	应用徽标：应用徽标的大纲图标。

邮件扩展管理菜单

计数器	说明
1	取消固定：如果用户已固定应用，则可用。
2	删除：从频道、聊天或会议中删除邮件扩展。

最佳做法

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

设置和一般用途

建议：与单一登录集成

单一登录可使登录过程更轻松、更快速、更安全。 此外，如果用户已登录到你的个人应用，则无需再次登录即可访问消息扩展。

不建议：让用户离开对话

邮件扩展是旨在减少上下文切换的快捷方式。 例如，你的扩展不应将用户定向到 Teams 外部的网页。

建议：突出显示邮件扩展

若要查找邮件扩展通常并不容易。 在应用详细信息页面中包含如何使用教程屏幕截图。 如果应用还包括机器人，则可以在机器人欢迎教程中包含邮件扩展帮助文档。

模板化

建议：如果可能，让 Teams 处理一些设计工作

如果对用例有意义，请考虑创建基于搜索的邮件扩展。 Teams 使用内置主题和辅助功能来呈现这一类型的扩展。

不要：在对话框中嵌入整个应用

如果消息扩展需要操作命令，请保持对话框简单，并仅显示完成操作所需的组件。

主题

建议：充分利用 Teams 颜色令牌

每个 Teams 主题都有自己的配色方案。 若要自动处理主题更改，请在设计中使用颜色令牌 (Fluent UI)。

不建议：硬编码颜色值

如果不使用 Teams 颜色令牌，则设计将无法缩放，并需要更多时间进行管理。

操作

建议：包含上下文中有意义的操作命令

消息操作应与用户正在查看的内容相关。 例如，为用户提供使用某人帖子中的文本创建问题或工作项的快捷方式。

不建议：包含与上下文无关的操作命令

用于查看仪表板的消息操作，可能似乎与绝大多数对话都没有关联。

搜索

建议：键入时显示搜索结果

当用户键入时，提供建议的搜索结果。 用户可以用最少的字符数量，更快地查找到所需内容。

不建议：要求用户提交查询

可以让用户按一个键或选择一个按钮将查询发送到应用。 虽然从应用服务来看，这样做可能更容易，但用户可能会感到困惑，因为他们在键入时并不能看到实时搜索结果。

建议：考虑零关键词查询

例如，当用户在搜索框中写入任何内容之前，显示他们上次在应用中查看的内容。 这些可能正是他们希望插入到对话中的内容。