What is PLX Outlook Addin

Outlook 外接 程序 设计 准则 Outlook add-in design guidelines

    外接 程序 是 一种 可供 合作 伙伴 在 我们 的 核心 功能 集 之外 进一步 扩展 Outlook 功能 的 绝佳 方式。 通过 外接 程序 程序 , 用户 无需 离开 收件 箱 箱 即可 访问 第三方 体验 、 任务 和 内容。 安装 后 , Outlook 外接 程序 将 在 所有 平台 和 设备 上 可用 。Add-ins are a great way for partners to extend the functionality of Outlook beyond our core feature set. Add-ins enable users to access third-party experiences, tasks, and content without needing to leave their inbox. Once installed, Outlook add-ins are available on every platform and device.

    以下 高级 指南 将 有助于 设计 和 生成 引人注目 的 加载 项 , 可 将 应用 的 最佳 功能 直接 引入 Windows 、 Web 、 iOS 、 Mac 和 Android 设备 上 的 Outlook。The following high-level guidelines will help you design and build a compelling add-in, which brings the best of your app right into Outlook — on Windows, Web, iOS, Mac, and Android.

    原则 Principles

    1. 重点 关注 几个 关键 任务 ; 并将 其 做好Focus on a few key tasks; do them well

      设计 一流 的 加载 项 易于 使用 、 目标 明确 并且 可 为 用户 带来 实际 价值。 由于 加载 项 将 在 Outlook 内部 运行 , 因此 这一 原则 额外 额外 重要 。Outlook 是 生产力 应用 , 人们 使用 此 应用 来 完成 工作 。The best designed add-ins are simple to use, focused, and provide real value to users. Because your add-in will run inside of Outlook, there is additional emphasis placed on this principle. Outlook is a productivity app — it's where people go to get things done.

      你 将 成为 我们 体验 的 扩展 测试 人员 , 请 务必 确保 启用 方案 就像 是 在 Outlook 内部 进行 操作 一样 自然 恰当。。 认真 考虑 你 的 哪些 常用 用 例 通过 与 这些 方案 挂钩 可以 从 我们 的 电子邮件 和 日历 体验 中 获 获益 最大。 You will be an extension of our experience and it is important to make sure the scenarios you enable feel like a natural fit inside of Outlook. Think carefully about which of your common use cases will benefit the most from having hooks to them from within our email and calendaring experiences.

      外接 程序 不应 尝试 执行 应用 所 执行 的 一切 操作。 重点 应 放在 Outlook 内容 的 上下文 中 使用 最 频繁 的 恰当 操作。 考虑 操作 调用 并 并 明确 任务 窗格 打开 时 用户 应 执行 什么 操作 。An add-in should not attempt to do everything your app does. The focus should be on the most frequently used, and appropriate, actions in the context of Outlook content. Think about your call to action and make it clear what the user should do when your task pane opens.

    2. 使其 尽可能 类似于 本 机 模式Make it feel as native as possible

      应 使用 正在 运行 Outlook 的 平台 上 的 本 机 模式 设计 外接 程序。 若要 实现 这 一点 , 务必 尊重 尊重 并 实现 各个 平台 平台 规定 的 交互 和 外观 准则 。Outlook 具有 自己 的 准则 , 同样 设计 必须 考虑 这些。。。 必须 考虑 这些。。。 必须 考虑 这些。。 必须 考虑 这些。。的 外接 程序 将 恰当 地 融合 体验 、 平台 和 Outlook。Your add-in should be designed using patterns native to the platform that Outlook is running on. To achieve this, be sure to respect and implement the interaction and visual guidelines set forth by each platform. Outlook has its own guidelines and those are also important to consider. A well-designed add-in will be an appropriate blend of your experience, the platform, and Outlook.

      这 就是说 , 加载 项 在 iOS 版 Outlook 与 在 Android 版 Outlook 上 运行 时 的 外观 必须 不同。 我们 建议 不妨 使用 Framework7 作为 样式 设置 选项 。This does mean that your add-in will have to visually be different when it runs in Outlook on iOS versus Android. We recommend taking a look at Framework7 as one option to help you with styling.

    3. 确保 使用 体验 令人满意 , 并 正确 设置 详细 信息Make it enjoyable to use and get the details right

      人们 喜欢 使用 实用 且 外观 吸引人 的 产品。 在 已 仔细 考虑 每个 交互 和 外观 细节 的 情况 下 精心 构建 体验 有助于 有助于 确保 加载 项 成功 成功。 完成 任务 的 必要 步骤 必须 清楚 并 相互 关联。 理想 情况 下 ,操作 不应 超过 一次 或 两次 单击。 People enjoy using products that are both functionally and visually appealing. You can help ensure the success of your add-in by crafting an experience where you've carefully considered every interaction and visual detail. The necessary steps to complete a task must be clear and relevant. Ideally, no action should be further than a click or two away.

      尽量 不要 使 用户 脱离 上下文 来 完成 操作。 Try not to take a user out of context to complete an action. 用户 应 可以 轻松 进入 和 退出 加载 加载 项 并可 轻松 返回 至 至 用户 之前 正在 执行 的 操作 。A user should easily be able to get in and out of your add-in and back to whatever she was doing before. 不 应对 加载 项 花费 大量 的 时间 , 它 主要 用于 增强 核心 功能。 。An add-in is not meant to be a destination to spend a lot of time in — it is an enhancement to our core functionality. 如果 处理 得当 , 加载 项 将 有助于 实现 使 用户 更 高效 的 目标 。If done properly, your add-in will help us deliver on the goal of making people more productive.

    4. 明智 地 进行 品牌 打造Brand wisely

      我们 非常 重视 品牌 打造 , 同时 我们 知道 向 用户 提供 唯一 体验 至关重要 。We value great branding, and we know it is important to provide users with your unique experience. 但是 我们 认为 确保 加载 项 成功 的 最佳 方式 是 生成巧妙 整合 品牌 元素 的 直观 体验 , 而非 显示 重复 或 突兀 的 品牌 元素 , 它们 只会 分散 用户 无 阻碍 进入 系统 的 注意力 。But we feel the best way to ensure your add-in's success is to build an intuitive experience that subtly incorporates elements of your brand versus displaying persistent or obtrusive brand elements that only distract a user from moving through your system in an unencumbered manner.

      有效 地 整合 品牌 的 良好 方式 是 使用 品牌 颜色 、 图标 和 声音 (假定 这些 与 首选 的 平台 模式 或 辅助 功能 要求 不 冲突)。 A good way to incorporate your brand in a meaningful way is through the use of your brand colors , icons, and voice — assuming these don't conflict with the preferred platform patterns or accessibility requirements. 努力 将 重点 集中 在 内容 和 任务 完成 方面 , 而非 品牌 关注。 。Strive to keep the focus on content and task completion, not brand attention.


      iOS 或 Android 上 的 加载 项 中 不应 显示 广告。 Ads should not be shown within add-ins on iOS or Android.

    设计 模式 Design patterns


    上述 准则 适用 于 所有 端点 / 平台 , 但 以下 模式 和 示例 特定 于 iOS 平台 上 的 移动 外接 程序 。While the above principles apply to all endpoints / platforms, the following patterns and examples are specific to mobile add-ins on the iOS platform.

    我们 提供 了 包含 适用 于 Outlook Mobile 环境 的 iOS 移动 模式 的 模板 , 以 帮助 创建 设计 良好 的 外接 程序。 利用 这些 特定 模式 模式 有助于 确保 外接 程序 如同 在 在 iOS 平台 和 Outlook Mobile 本 机 自带 一般。 下面 详细介绍 了 这些 模式。 虽不 全面 , 但这 只是 构建 库 的 开始 , 在 我们 发现 合作 伙伴 希望 纳入 其 外接 程序 的 其他 范例 时 我们 将 继续 构建 此 此 库 。To help you create a well-designed add-in, we have templates that contain iOS mobile patterns that work within the Outlook Mobile environment. Leveraging these specific patterns will help ensure your add-in feels native to both the iOS platform and Outlook Mobile. These patterns are also detailed below. While not exhaustive, this is the start of a library that we will continue to build upon as we uncover additional paradigms partners wish to include in their add-ins.

    概述 Overview

    典型 的 外接 程序 由 下列 组件 组成。 A typical add-in is made up of the following components.

    加载 Loading

    用户 点击 外接 程序 后 , UX 应 尽快 显示。 如果 出现 任何 延迟 , 则 使用 进度 栏 或 活动 指示器。 时间 量 可 确定 确定 使用 使用 进度 栏 , 时间 量 不可 确定 时应 使用 活动 指示器 。When a user taps on your add-in, the UX should display as quickly as possible. If there is any delay, use a progress bar or activity indicator. A progress bar should be used when the amount of time is determinable and an activity indicator should be used when the amount of time is indeterminable.

    iOS 上 的 加载 页 示例An example of loading pages on iOS

    Android 上 的 加载 页 示例An example of loading pages on Android

    登录 / 注册 Sign in / Sign up

    使 登录 (和 注册) 流程 简单 易用。 Make your sign in (and sign up) flow straightforward and simple to use.

    iOS 上 的 登录 和 注册 页 示例An example sign in and sign up page on iOS

    Android 上 的 登录 页 示例An example sign in page on Android

    品牌 栏 Fire bar

    外接 程序 的 第 一个 屏幕 应 包含 品牌 元素。 品牌 栏 用于 进行 识别 , 同时 也 有助于 为 为 用户 设置 上下文。 由于 导航 栏 包含 公司 / 品牌 的 名称 , 因此 没有 必要 在 后续 页面 上 重复 品牌 栏 。The first screen of your add-in should include your branding element. Designed for recognition, the brand bar also helps set context for the user. Because the navigation bar contains the name of your company / brand, it's unnecessary to repeat the brand bar on subsequent pages.

    iOS 上 的 品牌 打造 示例An example of branding on iOS

    Android 上 的 品牌 打造 示例An example of branding on Android

    边距 Margins

    移动 电话 边距 每侧 应 设置 为 15px (屏幕 的 8%) , 与 Outlook iOS 一致 ; 每侧 应 设置 为 16px 以 与 Outlook Android 一致 。Mobile margins should be set to 15px (8% of screen) for each side , to align with Outlook iOS and 16px for each side to align with Outlook Android.

    版式 Typography

    版式 使用 与 Outlook iOS 对齐 并 尽量 简单 以 保证 易于 浏览 。Typography usage is aligned to Outlook iOS and is kept simple for scannability.

    iOS 上 的 版式Typography on iOS

    Android 上 的 版式Typography on Android

    调色板 Color palette

    颜色 使用 在 Outlook iOS 中 比较 微妙。 我们 要求 颜色 使用 本地化 到 操作 和 错误 状态 , 以 保证 一致 , 仅 品牌 品牌 栏 使用 唯一 的 颜色 。Color usage is subtle in Outlook iOS. To align, we ask that usage of color is localized to actions and error states, with only the brand bar using a unique color.

    单元 格 Cells

    由于 导航 栏 不能 用于 标记 页面 , 因此 使用 节 标题 标记 页面。 Since the navigation bar cannot be used to label a page, use section titles to label pages.

    iOS 上 的 单元 格 示例Examples of cells on iOS

    Android 上 的 单元 格 示例Examples of cells on Android

    操作 Actions

    即使 应用 要 处理 大量 操作 , 也要 考虑 想要 外接 程序 执行 的 最 重要 的 操作 , 并 重点 关注 这些 操作。 Even if your app handles a multitude of actions, think about the most important ones you want your add-in to perform, and concentrate on those.

    iOS 上 的 操作 示例Examples of actions on iOS

    Android 上 的 操作 示例Examples of actions on Android

    按钮 buttons

    存在 以下 其他 UX 元素 时 使用 按钮 (相 对于 操作 , 其中 操作 是 屏幕 上 的 最后 一个 元素) 。Buttons are used when there are other UX elements below (vs. actions, where the action is the last element on the screen) .

    iOS 上 的 按钮 示例Examples of buttons on iOS

    Android 上 的 按钮 示例Examples of buttons on Android

    选项 ​​卡 tabs

    选项 ​​卡 可 帮助 组织 内容 。Tabs can aid in content organization.

    iOS 上 的 选项 卡 示例Examples of tabs on iOS

    Android 上 的 选项 卡 示例Examples of tabs on Android

    图标 Icons

    图标 应 尽可能 遵循 当前 Outlook iOS 的 设计。 使用 标准 大小 和 颜色 。Icons should follow the current Outlook iOS design when possible. Use our standard size and color.

    iOS 上 的 图标 示例Examples of icons on iOS

    Android 上 的 图标 示例Examples of icons on Android

    端到端 示例 End-to-end examples

    为了 推动 v1 Outlook Mobile 外接 程序 的 启动 , 我们 已 与 正在 生成 外接 程序 的 合作 伙伴 密切 合作。 作为 展示 其 外接 程序 在 Outlook Mobile 上 的 潜力 的 方式 , 我们 的 设计 人员 使用 我们 的 准则 和 模式 将 每个外接 程序 的 端到端 流 组合 在一起。 For our v1 Outlook Mobile Add-ins launch, we worked closely with our partners who were building add-ins. As a way to showcase the potential of their add-ins on Outlook Mobile, our designer put together end-to-end flows for each add-in, leveraging our guidelines and patterns.


    这些 示例 旨在 强调 同时 处理 加载 项 的 交互 和 可视 化 设计 的 理想 方法 , 可能 与 加载 项 发布 版本 中 的 准确 功能 集 不 匹配 。These examples are meant to highlight the ideal way to approach both the interaction and visual design of an add-in and may not match the exact feature sets in the shipped versions of the add-ins.


    iOS 上 的 GIPHY 示例An example of GIPHY on iOS

    Android 上 的 GIPHY 示例An example of GIPHY on Android


    iOS 上 的 Nimble 示例An example of Nimble on iOS

    Android 上 的 Nimble 示例An example of Nimble on Android


    iOS 上 的 Trello 示例An example of Trello on iOS

    Android 上 的 Trello 示例An example of Trello on Android

    Dynamics CRMDynamics CRM

    iOS 上 的 Dynamics CRM 示例An example of Dynamics CRM on iOS

    Android 上 的 Dynamics CRM 示例An example of Dynamics CRM on Android