通知设计基础

通过提供个性化、可操作的和有用的app通知(也称为toast通知),增加用户的app参与度。 App 通知是 Windows 通知,显示在用户屏幕右下角和通知中心(在 Windows 10 中称为操作中心)。 本文提供设计指南,当你规划和实现app 通知app体验时要考虑的事项。

一个显示通知的屏幕截图,通知位于任务栏上方。通知是事件提醒。显示 app 名称、事件名称、事件时间和事件位置。选择框显示当前选定的值:“参加”。有两个按钮,分别标记为“RSVP”和“忽略”

Note

当前正在将术语“toast notification”替换为“app notification”。 这些术语都指的是 Windows 的相同功能,但随着时间的推移,我们将逐步取消使用文档中的“toast 通知”。

通知应具有信息性和价值

将通知设计为具有明确意向,以便用户可以快速了解通知的目的并保留在其流中。 请考虑您的通知 app 支持的用户场景,并在通知中添加适合每个场景的元素。 通知应允许用户节省时间,但不应分散注意力或创建更多工作。

选择正确的通知 UI 元素

考虑哪些 UI 元素为用户方案提供最大的价值。 通知的目的是允许用户完成任务,还是只是获取新信息? 以下部分显示了可在通知中使用的 app 一些示例元素。

裁剪的桌面屏幕截图,其中显示了带有按钮元素的通知。

Buttons

按钮会触发即时作用。 通过添加按钮,用户可以完成通知中的任务。

一张包含内联图像通知的桌面截图,已被裁剪。

Images

图像可以是 app 徽标替代内联hero。 通过添加图像,用户可以更快地分析内容。 示例包括向聊天或电子邮件通知添加 app 描述发件人个人资料图像的徽标替代图像。

显示带有快速回复框的通知的裁剪桌面屏幕截图。

Quick replies

快速答复框使用户能够在不打开 app的情况下回复邮件。 示例包括向聊天通知添加快速答复框。

显示带有上下文菜单的通知的裁剪桌面屏幕截图。

上下文菜单按钮

上下文菜单按钮可让用户在右键单击通知或选择上下文菜单图标时提供更多选项。 示例方案是添加一个选项来将群组聊天静音一小时。

显示带有进度栏的通知的裁剪桌面屏幕截图。

Progress bars

进度条传达长时间运行的操作的状态。 通过添加进度栏,用户无需再回到 app 查看更新。 示例包括通过进度条通知传达文件下载或游戏更新。

若要查看可在通知中使用的所有 UI 元素,请参阅 App 通知内容

通知不应太嘈杂

用户很容易被过多的信息重载,如果他们在试图集中注意力时被打断,他们就会感到沮丧。 太多的干扰可能导致用户关闭您app的此关键通讯渠道。

  • 不中断用户但仍传达有价值的信息的一种方法是禁止通知,这意味着通知会自动直接放置在通知中心,而不会发出警报。
  • 在 Windows 11 上,焦点会话允许用户取消多余的通知。 可以使用 FocusSessionManager API 检测用户是否处于焦点会话中,并相应地调整 app通知行为。

响应用户的意向

与通知 UI 的设计一样,当用户单击通知或通知中的 UI 元素时的行为应是有意和一致的,并且应该让用户参与明确的任务或方案。

  • 如果用户单击通知以启动它,您的app 应在通知的上下文中启动。
  • 如果用户单击通知中的按钮,您的 app 应在适合按钮操作的上下文中启动。
    • 但是,如果该操作旨在是一个后台任务(例如快速回复),那么app 不应启动。

提供一致的通知中心体验

显示通知中心的裁剪桌面屏幕截图,其中包含多个通知。

通知中心允许用户在显示通知后或在收到通知但未显示通知后查看和响应通知。 通过清除旧通知来保持通知中心整洁非常重要。 在删除通知时,还应确保提供一致的体验,以便用户确信他们不会丢失信息。 遵循通知删除的标准约定使通知体验可预测且直观。

下面是一些演示从通知中心清除旧通知的策略的示例方案:

  • 用户收到 10 封新电子邮件,从而收到 10 个新通知。 用户转到电子邮件 app 并查看 10 封电子邮件,而无需与 10 个通知交互。 用户查看 10 封电子邮件后,该电子邮件 app 将从通知中心删除 10 条通知。 如果用户在其他地方(如手机或网站)查看了 10 封电子邮件,则这也适用。
  • 用户从一个用户接收 10 条新聊天消息,从而收到 10 条新通知。 用户选择其中一个聊天通知,以启动聊天。 用户查看聊天后,将从 app 通知中心删除剩余的 9 条通知。

通知的开发人员指南