设计 Microsoft Teams 应用

  • 项目

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

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

创建有凝聚力的体验

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

这些准则和资源可帮助你实现这种平衡。 在设计 Teams 应用 (（如选项卡) 中的多级导航）时，你将知道该做什么以及应避免哪些操作。

Teams 应用设计原则

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

协同

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

可信

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

全局包容性

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

轻负载

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

本机或非独有

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

有用

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

易于使用

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

快速响应

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

辅助功能

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

很好描述

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

Teams 设计系统

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

应用功能

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

UI 模板

使用模板为常见 Teams 用例和工作流创建复杂且高保真的设计。 应用 playbook 和 UI 模板也可用于帮助你开始使用 跨 Microsoft 365 扩展的应用。

基本 UI 组件

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

工具和示例

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

Microsoft Teams UI Kit

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

获取 UI 工具包 (Figma)

Fluent UI 文档

获取代码示例并了解构造 Teams 体验时使用的基本 Fluent UI 组件的实现细节。

尝试 Teams UI 组件 (Fluent UI)

示例应用

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

获取示例应用 (GitHub)

自适应卡设计器

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

适用自适应卡设计器

另请参阅