Microsoft Teams 应用的设计过程
有多个工具和资源用于设计 Microsoft Teams 应用。 以下步骤介绍在设计过程中何时以及如何使用这些内容。 (某些步骤可能在技术上超出了设计过程,但包含在其他上下文中。)
计划应用
设计高质量的 Teams 应用需要了解你希望应用执行的操作以及你认为用户会如何使用它。 但是,在开始设计之前,请回答以下问题:
- 你的用户是谁?
- 他们有什么问题?
- 你的应用如何解决他们的问题?
- 应用的使用频率是多少?
- 有多少人会使用你的应用?
- 你的应用可以提供什么样的投资回报?
有关详细信息,请参阅 了解应用的用例 ,并将 用例映射到 Teams 。
获取 Teams 设计工具
Microsoft 提供了一些工具用来简化 Teams 应用的设计。 强烈建议至少使用 Microsoft Teams UI 工具包。
获取 Microsoft Teams UI 工具包
Microsoft Teams UI 工具包可以帮助在最短的时间内开发出有效的 Teams 应用。 UI 工具包包含你在这些文档中看到的与 Teams 应用设计相关的所有内容,包括大量的示例和变体。
UI 工具包还具有预生成的模板和组件,你可以根据需要复制和修改这些模板和组件,因此你可以花更多的时间设计最佳用户体验,而不是担心按钮应该是什么样子。
提示
UI 工具包是否适合我? 如果你参与创建 Teams 应用,是的,适合。 了解如何制作 Teams 应用不仅对设计者有帮助,而且对产品经理、使用 IDE 的开发人员以及使用低代码工具(如 Microsoft Power Platform)的开发者也有帮助。
- 转到 Microsoft Teams UI 工具包 Figma 页面 。
- 选择“ 重复 ”,打开 UI 工具包。 (可能需要先创建 Figma 帐户。)
试用示例应用
可以上传示例应用,了解应用在 Teams 客户端中的外观和行为。
了解 Teams 设计系统
深入了解或至少熟悉 Teams 应用设计的基础知识 ,包括布局、配色方案等。
选择应用功能
在规划阶段之后,可以确定哪些 Teams 功能适合应用的用例。 例如,如果要主动通知用户,机器人可能是合适的功能。
UI 工具包具有预生成设计,可向你展示用户通常如何添加、设置、使用和管理每个功能。 作为快速参考,此信息也在这些文档中,但使用 UI 工具包,可以将这些设计中的任何一种复制并粘贴到应用的设计中。
- 在 UI 工具包的左侧导航栏中,转到“ 应用功能 ”并选择所需的应用功能。
- 从该页面复制所需的内容来设计应用。
例如,如果应用支持使用单一登录进行身份验证,请复制并粘贴设计来处理这种情况。
设计 UX 流程
有了基本的应用设计后,可以通过从 UI 工具包复制 Teams UI 模板和基本组件来根据需要进行修改和优化。
使用 UI 模板进行设计
UI 模板是复杂的高保真设计,适用于常见的 Teams 用例和工作流。 建议使用这些模板来简化和加快设计过程,而不是从基本组件开始。
- 在 UI 工具包的左侧导航栏中,转到“ UI 模板 ”。
- 复制对应用设计有意义的模板。
例如,如果要设计一款个人应用,可能需要使用“仪表板”模板。
使用基本 UI 组件进行设计
根据 Fluent UI,这些是创建熟悉的 Teams 界面的核心元素。 如果 UI 模板缺少所需的内容或只想从头开始设计应用,请使用这些组件。
- 在 UI 工具包的左侧导航栏中,转到“ 基本 UI 组件 ”。
- 复制应用设计所需的组件(例如按钮或开关)。
实施设计
设计完成后,即可开始构建。 以下工具可以帮助简化应用的前端开发。
使用 UI 模板进行构建
如果在设计中使用了 UI 模板,则可以使用 Microsoft Teams UI 库来实现这些模板(基于 Fluent UI 的 React 组件库)。
目前,并非 UI 工具包中列出的所有模板都可以在库中使用。
使用基本 UI 组件进行构建
与设计阶段不同,如果 UI 模板缺少所需的内容,或者只想从头开始构建应用,则可以在应用项目中使用这些 Fluent UI 组件。
注意
如果发现缺少某些内容或对模板有想法,请考虑为 Teams UI 库存储库做出贡献。
查看设计资源
无论是刚开始使用应用还是已经接近生产就绪的应用,建议定期查看以下资源:
- Microsoft Teams 应用商店验证指南:提供所有 Teams 应用都应遵循的标准,而不仅仅是 Teams 应用商店中列出的应用。 有关详细信息,请参阅 指南 。
- 设计最佳做法 :这些文档和 UI 工具包提供了设计高质量应用的最佳做法。 例如,请参阅 设计机器人的最佳做法 。
另请参阅
反馈
https://aka.ms/ContentUserFeedback。
即将发布:在整个 2024 年,我们将逐步淘汰作为内容反馈机制的“GitHub 问题”,并将其取代为新的反馈系统。 有关详细信息,请参阅:提交和查看相关反馈