设计 Microsoft Teams 应用

介绍 Microsoft Teams 设计指南的概念图。

无论你是使用低代码工具的设计者、产品经理、开发人员还是制造商,这些指南都可以帮助你快速为 Microsoft Teams 应用做出正确的设计决策。

创建有凝聚力的体验

设计 Teams 应用就像设计传统的 Web 应用一样,但也略有不同。 有效的设计突出显示了应用的独特特性,同时自然地适合 Teams 功能和上下文。

这些准则和资源可帮助你实现这种平衡。 你将了解在设计 Teams 应用时应执行的操作以及应避免的操作(例如选项卡中的多级导航)。

Teams 应用设计原则

Teams 应用可帮助人们共同实现更多目标。 使用这些原则指导你的设计。

协同

Teams 应用通过用户之间的协调和共享活动促进协作。

可信

应用安全且合规。 用户可以轻松找到有关隐私的信息。

全局包容性

所有背景、技能组和学科的人员都可以使用该应用。 它反映了文化、种族和社会意识。

轻负载

该应用侧重于融合 Teams 工作流的核心场景。

本机或非独有

应用使用本机 Teams 设计组件或你自己的组件。 没有配色方案、控件等混合。

有用

该应用基于用户在 Teams 中需要执行的方案。

易于使用

UI 易于理解,外观和语气令人愉快,使人们更有效率。

快速响应

该应用与设备和屏幕无关。

辅助功能

应用在颜色对比度、导航替代项等方面满足 Teams 辅助功能要求。

很好描述

文本、图标和图像可明确应用的用途以及如何使用它。

Teams 设计系统

了解 Teams 应用设计的基础知识,包括布局、配色方案等。

应用功能

了解用户如何添加、使用和管理 Teams 应用,以充分利用设计中的每个功能。

UI 模板

使用常用 Teams 用例和工作流的模板快速创建复杂、高保真度设计。

基本 UI 组件

根据 Fluent UI,可以使用这些 核心元素 从头开始创建 Teams 体验。

工具和示例

以下工具可帮助设计人员和开发人员入门:

Microsoft Teams UI Kit

使用 UI 组件、模板和示例设计 Teams 应用,你可以根据需要进行拖放和修改。 UI 工具包还包括有关应用在不同 Teams 场景中外观和行为的详细信息。

Microsoft Teams UI 库

Microsoft Teams UI 库可帮助你在浏览器中查看和测试单个 Teams UI 模板和相关组件。

将这些模板和相关组件直接导入 Teams 应用项目。

示例应用

可以上传示例应用,了解应用在 Teams 客户端中的外观和行为。

其他资源

若要了解详细信息,请尝试以下资源之一:

Fluent UI 文档

获取用于生成 Teams 体验的基本 Fluent UI 组件代码示例和操作详细信息。

自适应卡设计器

在基于 Web 的工具中设计自适应卡片。

另请参阅