通过

为移动设备上的 Outlook 设计加载项

移动设备上的 Outlook 为加载项提供了独特的环境，具有适用于 Android 和 iOS 的平台特定设计模式。 本文提供指南和视觉示例，可帮助你创建在保持一致的品牌体验的同时，每个移动平台都感觉原生的加载项。

提示

Office 外接程序设计原则适用于 Outlook 移动加载项。除了本文中概述的特定于移动的模式外，还请查看这些指南。

加载项组件和模式

典型的移动加载项由以下组件组成。

  • 品牌区域
  • 导航栏
  • 节标题
  • 单元格或输入字段
  • 操作

下图显示了 Android 版 Outlook 和 iOS 上每个组件的显示方式。

Android上任务窗格的基本 UX 模式的 Android 关系图。

iOS上任务窗格的基本 UX 模式示意图。

后续部分概述了移动版 Outlook 的 UX 设计模式。 若要详细了解 Office 外接程序的设计模式，请参阅 Office 外接程序的 UX 设计模式。

正在加载页面

当用户点击加载项时，请尽快显示 UI。 如果有任何延迟，请使用进度栏或活动指示器。 当持续时间已知时，请使用进度栏，在持续时间未知时使用活动指示器。

在 Android 上加载页面的示例 Android 上的进度栏和活动指示器示例。

在 iOS 上加载页面的示例 iOS 上的进度栏和活动指示器的示例。

登录或注册页

使登录和注册流变得简单且易于使用。

Android 上的登录页面示例 Android 上的登录页示例。

iOS 上的登录和注册页面示例 iOS 上的登录和注册页面示例。

品牌栏

在外接程序的第一个屏幕上添加品牌元素。 品牌栏提供识别并帮助用户设置上下文。

执行：

  • 使用白色版本的徽标，并将背景横幅设置为主品牌颜色。
  • 保持在规定的 边距 和 60% 的覆盖范围内。

不要：

  • 转到页边距之外。
  • 在后续页面上重复品牌栏。 导航栏已包含公司或品牌的名称。

Android 上的品牌示例 Android 上的品牌栏示例。

iOS 上的品牌示例 iOS 上的品牌栏示例。

注意

不应在 iOS 版 Outlook 或 Android 上的加载项中显示广告。

边距

建议的移动边距因 Outlook 客户端而异。

  • Android：每端 16px
  • iOS：15px (每侧屏幕) 的 8%

下面是 iOS 版 Outlook 中设置边距的示例。

iOS 上的边距示例。

版式

使用简单的版式使内容易于扫描。 下表概述了 Android 版和 iOS 版 Outlook 版式指南。

组件 Android iOS
标题 1 中等 20pt 浅色 28pt
标题 2 半曲 24pt 常规 22pt
Subheader 中等 14pt 常规 15pt
正文 1 常规 16pt 常规 17pt
正文 2 常规 14pt 不适用
Caption 常规 12pt 常规 12pt
Footnote 不适用 常规 13pt
按钮 中等 14pt 中等 14pt

Android 版式上的版式示例。

适用于 iOS 的 iOS版式示例的版式。

调色板

在 Outlook 移动版中巧妙地使用颜色。 将颜色的使用限制为作和错误状态，并且仅对品牌栏使用唯一的颜色。

下表概述了 Outlook 移动版上加载项组件的建议调色板。 颜色代码以十六进制格式显示。

颜色 组件
#222222 大多数头线类型
#545454 辅助头线类型
#8E8E93 仅图标
#999999 辅助图标类型
#E1E1E1 分隔符或禁用状态
#F8F8F8 窗体背景或分区标题栏
#0075DA 操作
#E63237 错误状态或破坏性作

移动设备上的 Outlook 调色板。

Cells

单元格（如节标题和输入字段）显示加载项的内容。

节标题

执行：

  • 使用分区标题来标记页面，因为导航栏不能用于标记页面。
  • 使用彩色分区标题来吸引注意力并维护内容层次结构。
  • 使用页面顶部的彩色部分显示帐户信息或设置。
  • (iOS 仅) 如果标题出现在两个可选元素之间，则使用高版本的分区标题。 高版本提供的空间可确保选择正确的元素。

不要：

  • 将居中对齐方式应用于分区标题。
  • (Android 仅) 在选项卡上方添加分区标题。
  • (iOS 仅) 如果标题出现在两个可选元素之间，请使用小版本的分区标题。 这会增加选择错误元素的可能性。
  • (iOS 仅) 如果小版分区标题显示在选项卡上方，则使用小版本。

Android 上的分区标题示例适用于 Android 的分区标题示例。

适用于 Android 的部分标题“dos”。

适用于 Android 的部分标题“请勿”。

iOS 上小节和高节标题的示例 iOS 小节和高节标题示例。

适用于 iOS 的节标题“dos”。

适用于 iOS 的节标题“不要”。

输入字段

为内容使用适当的输入字段类型。 例如，当用户应仅选择一个选项时，请使用单选按钮。

执行：

  • 堆叠多个输入字段时，请注意项数。 根据需要将项目组合在一起，并在适当时使用分区标题来标识组。
  • (iOS 仅) 堆叠多个项目时，将分隔线与文本的左边缘对齐。 不要将它们与左侧的项图标对齐。

Android 上的输入字段的示例输入字段，包括单选按钮和复选框。

Android 上的文本输入字段。

iOS 上的输入字段示例选中 iOS 上的选项。

操作

即使加载项处理许多作，也请专注于最重要的作。

执行：

  • 最多堆叠两个作。
  • 当内容长度未知或超出一页时，将作定位到页面底部。
  • 当内容适合单个页面时，浮点作。
  • (iOS 仅) 实现 后退 作以帮助导航。 将 “后退” 作定位到页面顶部。

Android中 Android作和单元格的作示例。

适用于 Android 的操作“待办事项”。

iOS作和 iOS 中的单元格的作示例。

适用于 iOS 的操作“待办事项”。

按钮

当其他 UI 元素显示在按钮下方时，请使用按钮。 例如，当指向服务条款和隐私策略的链接显示在登录页上时，请使用该按钮。 相反，当作是页面上最后一个元素（定位到底部）时，请使用这些作。

执行：

  • 使用适当的按钮样式来指示按钮状态。 例如，使用禁用状态 (灰显的按钮) 当选项不可用时。
  • 如果按钮下方显示其他 UI 元素（如文本），则为该按钮浮动。

Android 上的按钮示例 Android 按钮示例。

iOS 上的按钮示例 iOS 按钮示例。

选项卡

使用选项卡来组织加载项的内容。

Android 上的选项卡示例 Android选项卡示例。

iOS 上的选项卡示例 iOS 的选项卡示例。

图标

如果可能，请遵循当前的 Outlook 移动图标设计。 使用标准大小和颜色。

Android 上的图标示例 Android 图标示例。

iOS 上的图标示例 iOS 图标示例。

加载项示例

推出 Outlook 移动加载项时，我们与构建外接程序的合作伙伴密切合作。为了展示其外接程序在 Outlook 移动版上的潜力，我们的设计人员使用这些指南和模式为每个加载项创建了端到端流。

重要

这些示例旨在强调同时处理加载项的交互和可视化设计的理想方法，可能与加载项发布版本中的准确功能集不匹配。

GIPHY

Android 上的 GIPHY 外接程序的 GIPHY 端到端设计示例。

iOS 上的 GIPHY 加载项的 GIPHY 端到端设计示例。

Nimble

Android 上 Nimble 加载项的 Nimble 端到端设计示例。

iOS 上 Nimble 加载项的 Nimble 端到端设计示例。

Dynamics CRM

Android 上的 Dynamics CRM 外接程序的端到端设计示例。

iOS 上的 Dynamics CRM 外接程序的端到端设计示例。

另请参阅

  • Last updated on