Office 外接程序的颜色准则

颜色通常用于强调品牌和强化可视化层次结构。 它可以帮助标识接口,也可以指导客户完成体验。 在 Office 中,颜色用于相同的目标,但它是有目的的和最小的应用。 它不会过度使用客户内容。 即使每个 Office 应用都使用其自己的主导颜色进行品牌打造,也会谨慎使用。

Office、Excel、Word 和 PowerPoint 的配色方案。Office 的主要颜色是黑色和白色,次要颜色是浅灰色、深灰色和橙色。Excel 的主导颜色为绿色,Word为蓝色,PowerPoint 为橙色。

Fluent UI ReactFabric Core 包括一组默认主题颜色。 将这些库应用于 Office 外接程序的组件或布局时,相同的目标适用。 颜色应传达层次结构,有目的地指导客户操作而不会干扰内容。 Fluent UI React 或 Fabric Core 中的主题颜色可以向整个界面引入新的主题色。 这些主题色可能会与 Office 应用品牌和层次结构冲突。 寻找避免冲突和干扰的方法。 使用中性主题颜色或覆盖主题颜色,以匹配 Office 应用品牌或你自己的品牌颜色。

在 Office 应用程序中,客户通过应用 Office UI 主题来个性化其界面。 客户在四个 UI 主题之间进行选择,以改变 Excel、Outlook、PowerPoint、Word 和 Office 套件中其他应用中的背景和按钮样式。 若要让你的外接程序感觉成为 Office 的自然组成部分并响应个性化,请使用我们的 主题 API。 例如,任务窗格背景颜色在某些主题中切换到深灰色。 使用主题 API 时,请遵循并调整前台文本以确保 可访问性

提示

  • 若要确保外接程序在其 UI 中应用正确的颜色组合,请使用所有四个 Office 主题(包括 “使用系统设置 ”选项)对其进行测试。
  • 有关如何将 PowerPoint 外接程序的设计与当前文档或 Office 主题动态匹配的指导,请参阅 在 PowerPoint 外接程序中使用文档主题

对颜色应用以下一般准则。

  • 尽量少使用颜色来显示层次结构和强调品牌。
  • 过度使用单个应用于交互式和非交互式元素的个性色可能会导致混乱。 例如,避免将相同颜色用于导航菜单中的选定和未选定项。
  • 避免与 Office 品牌应用颜色产生不必要的冲突。
  • 使用自己的品牌颜色来生成与服务或公司的关联。
  • 确保所有文本都是 可访问的。 请确保前景文本和背景之间的对比度为 4.5:1。
  • 注意色盲群体。 不要仅使用颜色指示交互性和层次结构。
  • 若要详细了解如何使用 Office 图标调色板设计外接程序命令图标,请参阅 图标指南