为 Microsoft Teams 应用设计对话框

可以在 Teams 应用中创建模式弹出体验，这些对话框 (TeamsJS v1.x) 中称为任务模块。 使用此功能可显示丰富的媒体和信息，或完成复杂的任务。

Microsoft Teams UI Kit

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

获取 Microsoft Teams UI Kit（用户）

打开对话框

对话框几乎可以从应用中的任意位置启动。

• 选项卡：可以从选项卡中的任何链接启动对话框。在希望用户专注于交互的情况下使用。
• 机器人：可以从机器人消息中的链接启动对话。
• 自适应卡片：当用户选择按钮时，可以从自适应卡片 (使用消息扩展或机器人) 发送对话框。
• 消息扩展 (操作命令) ：消息扩展允许对消息内容执行特定操作。 选择操作将打开一个对话框。
• 邮件扩展 (撰写框上下文) ：在撰写框中，可以设计消息扩展以打开对话框，而不是典型的浮出控件。 保留用于复杂交互（例如完成表单）的对话。

解剖

对话框为托管应用体验提供了灵活的图面。 它们使用 iframe (桌面) 或 webview (移动) 生成，因此你可以使用我们的 UI 模板 (建议) 或从头开始设计对话框。

它们也可以使用自适应卡片框架生成，这可以是更简单、更快地促进常见的方案(如表单)。

移动设备

计数器	说明
1	标题: 让标题清晰简洁。 描述希望用户完成的任务。
2	应用名称：应用的全名。
3	关闭按钮: 关闭对话框。 不应应用内容中未保存的更改。
4	webview: 托管应用内容的响应空间。
5	操作(可选): 与应用内容相关的按钮。

桌面

计数器	说明
1	应用图标
2	应用名称：应用的全名。
3	标题: 让标题清晰简洁。 描述希望用户完成的任务。
4	关闭按钮: 关闭对话框。 不应应用内容中未保存的更改。
5	iframe: 托管应用内容的响应空间。
6	操作(可选): 与应用内容相关的按钮。

使用 UI 模板进行设计

请考虑使用模板在对话框中使用常见布局。 每个组件都由较小的组件组成，可创建一个精致的响应式设计，该设计可以现成地使用或根据方案或品牌外观进行自定义。

• 列表: 列表可以以可扫描的格式显示相关项，并允许用户对整个列表或单个项目执行操作。
• 表单: 表单是用于收集、验证和提交用户输入的结构化方式。
• 空状态: 空状态模板可用于许多方案，包括登录、首次运行体验、错误消息等。

示例

列出

列表在对话框中运行良好，因为它们易于扫描。

移动设备

桌面

表单

对话框是显示具有顺序用户输入和内联验证的表单的绝佳位置。 可以利用自适应卡片作为嵌入表单元素的方法。

移动设备

桌面

登录

使用一系列对话创建重点登录或注册流，让用户轻松完成顺序步骤。

移动设备

桌面

媒体

在对话框中嵌入媒体内容，获得重点观看体验。

移动设备

桌面

空状态

用于欢迎、错误和成功消息。

移动设备

桌面

图像库

在 iframe(桌面)或 Webview(移动版)中嵌入库轮播。

移动设备

桌面

投票

此示例显示从自适应卡启动的投票结果。 也可以将投票置于对话中。

移动设备

桌面

最佳做法

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

可用性

执行：一次显示一个对话框

目标是让用户专注于完成一项任务！

不要：弹出对话框顶部的对话框

这会创造一种无重点且混乱的用户体验。

快速响应

请执行: 确保内容快速响应

虽然对话中托管的自适应卡片在移动设备上呈现良好，但如果你选择使用 iframe 来托管应用内容，请确保 UI 具有响应性，并且可以跨设备正常运行。

请勿执行: 使用水平滚动条

最佳做法是使内容保持专注，且不会过长。 如果需要滚动，请垂直滚动，而不是水平滚动。

简单

请执行: 保持简短。

可以轻松创建多步骤向导，但这并不一定意味着应该这么做！ 多屏幕对话框可能会有问题，因为传入的消息会分散注意力并诱使用户退出。 如果任务确实涉及，请弹出到完整网页，而不是对话框。

请勿执行: 具有长交互

尽量使交互简短而有针对性。

错误消息

执行: 使用内联错误信息

有关内联错误处理的指南，请参阅表单 UI 模板。

请勿执行: 将错误信息放在对话框中

不要在对话框顶部的对话框中弹出错误消息。 这会造成混乱的用户体验。