小组件概述

Windows 小组件是显示文本和图形的小型 UI 容器,这些文本和图形与设备上安装的应用有关。 已安装的小组件显示在小组件板的网格中:当用户单击任务栏上的“小组件”图标、使用 Windows+W 快捷方式或从屏幕左边缘滑动时,覆盖 Windows 桌面的弹出式平面。 小组件通过聚合用户所用应用中的个性化内容和快速操作,帮助他们掌握对他们很重要的内容。 它们可快速使用且可操作。 这并不意味着小组件会取代应用和网站,相反,它们提供对用户可以立即读取/触发的最需要的信息或常用功能的无障碍访问。 在设计小组件时,需要考虑它将给使用者带来什么样的价值。 

Screenshot of the Widgets Board. The board is a rounded rectangle with the time displayed at the top, followed by a search bar. The rest of the board is a grid of rounded rectangles each representing a widget. The individual widgets show top news stories, current weather, current traffic, etc.

小组件术语

术语 定义
小组件主机 显示和管理 Windows 小组件的应用程序。 在当前版本中,唯一的小组件主机是内置于 Windows 11 的小组件板。
小组件板 小组件板是一个 Windows 11 系统组件,当用户单击任务栏上的“小组件”图标、使用 Windows+W 快捷方式或从屏幕左边缘滑动时,该组件将显示在桌面上。 小组件板显示小组件,并管理其在板上的布局。
小组件 小组件是一种自适应卡片,它显示应用中的重要内容或操作。 它使用户能够立即访问所需信息,而无需启动相关的应用或网站。 小组件内容全天动态刷新,以便为用户提供可以一目了然的最新且有趣的内容。 小组件提供基本的交互功能,使用户能够启动相关应用实现更深入的参与。 小组件不用于取代应用和网站。
小组件提供程序 小组件提供程序是一种 Windows 应用,它提供要在小组件中显示的内容。 小组件提供程序拥有小组件的内容、布局和交互元素。

小组件设计指南

小组件的视觉体验包括使用自适应卡片 JSON 格式定义的视觉元素和交互元素。 自适应卡片设计器提供了一个实时编辑器,用于设计自适应卡片以及支持的小组件大小和主题的模板。 重要的是,小组件的设计遵循 Windows 小组件设计原则,以帮助确保小组件板为所有小组件提供一致且熟悉的体验。

有关小组件的视觉元素的高级演练,请参阅小组件状态和内置 UI 组件

小组件原则

若要创建出色的 Windows 小组件,在设计和开发小组件时,需要考虑以下原则:

简单明了

用户可以快速查看,以最大限度地利用小组件的价值。 如果他们想要了解更丰富的细节或进行更深入的交互,只需单击该小组件即可。

可靠

即时显示常用信息,以节省用户重复这些步骤的时间。 推动对应用的一致重新参与。

有用

提升最有用和最相关的信息。

个人

提供个性化内容并与客户建立情感联系。 小组件不应包含广告。 由客户控制其小组件内容和布局。

已设定焦点

每个小组件通常应专注于一个主要任务或场景。 小组件不用于取代应用和网站。

新鲜

内容应根据可用上下文动态刷新。 它是最新的,并且在正确的时间提供正确的内容。

规划应用的小组件体验

  1. 根据你对客户的了解,确定用户希望在不打开应用或网站的情况下快速访问的最重要的内容或最有用的操作。 考虑小组件原则部分中枚举的原则,并考虑它们如何应用于应用。
  2. 应用可以支持多个单独的小组件。 确定要支持的单独小组件的数量,以便每个小组件都专注于特定的用途。
  3. 确定每个小组件要包含的内容。 单个小组件可以支持三种不同的大小:小、中、大。 对于每个小组件,考虑什么内容会为用户和业务需求带来最大价值。 对于从小到大的每种大小,小组件的用途应保持不变,但显示的信息量应随着大小的增加而增加。 建议小组件提供程序实现所有小组件大小,以在自定义小组件布局时为用户提供灵活性。
  4. 考虑小组件将支持的用户交互。 用户可以单击小组件标题或你在小组件上定义的任何单击目标。 这些交互可以激活应用或网站的深层链接快捷方式,将用户直接转到他们感兴趣的内容,这样他们就无需从应用的根目录导航。 考虑提供的不同导航模型。
  5. 应用必须实现实现后端功能的小组件提供程序,以便将小组件的布局和数据发送到要显示的小组件板。 目前,可以使用打包的 Win32 桌面应用或渐进式 Web 应用 (PWA) 实现小组件提供程序。 有关创建 Win32 小组件提供程序的详细信息,请参阅小组件服务提供程序。 有关 PWA 小组件提供程序的信息,请参阅生成 PWA 驱动的小组件

本节内容

小组件状态和 UI

小组件设计基础知识

小组件交互设计

使用自适应卡片设计器创建小组件模板