Share via

小组件交互设计指南

  • 项目

注意

一些信息与预发行产品相关，相应产品在商业发行之前可能会进行重大修改。 对于此处提供的信息，Microsoft 不作任何明示或暗示的担保。

重要

本主题中所述的功能在从内部版本 25217 开始的 Windows 开发频道预览版中提供。 有关 Windows 预览版的信息，请参阅 Windows 10 Insider Preview。

本文提供有关设计 Windows 小组件交互的详细指南。

小组件应易于浏览且具有针对性，并且应代表应用主要用途的单个方面。 小组件可以提供一个或多个操作调用。 当用户单击操作号召时，小组件应启动关联的应用或网站，而不是在小组件本身中实现操作。 小组件只有一个可以容纳多个交互的主页面。 单击小组件中的项绝不会将你带到完全不同的小组件视图。 例如，在天气小组件中，你可能会显示多天的天气，但单击其中一天不会以内联形式展开详细信息，而是会启动应用或 Web。

以下是为每个受支持的小组件大小建议的最大触摸点数。

小组件大小 最大接触点数
小型 1
中 3
大 4

Windows 小组件不支持以下导航元素：

  • 小组件中不支持透视表
  • 小组件不支持 L2 页面
  • 小组件不支持垂直或水平滚动

容器

下图显示了小组件模板中容器元素的示例用法。 容器将可视元素分组到列和行中，以创建分层网格结构。

演示容器的小组件的四个图像。图像中的小组件将元素划分为行和列，以提供分层网格结构。

下图显示了小组件模板中图像链接元素的示例用法。

演示图像链接的小组件的两个图像。图像按列和行排列，成为网格。

分页

下图显示了小组件模板中的分页示例。 分页控件可以水平或垂直对齐。 出现导航箭头以响应光标悬停。

这组两个图像显示水平分页。在第一个图像中，一列点沿右侧对齐。一个点较大，表示当前处于活动状态的页面。第二张图像中，光标将鼠标悬停在小组件底部的向下箭头上，该箭头允许用户移动到下一页。小组件顶部有一个匹配的向上箭头，用于导航到上一页。

这组两个图像显示垂直分页。在第一个图像中，一行点沿底部对齐。一个点较大，表示当前处于活动状态的页面。第二张图像中，光标将鼠标悬停在小组件右侧的向右箭头上，该箭头允许用户移动到下一页。小组件的左侧有一个匹配的向左箭头，用于导航到上一页。

这两张图像演示了当小组件具有图像背景时分页控件的外观。

下图显示了小组件模板中的超链接示例。

演示超链接的小组件的两个图像。第一个图像显示超链接的文本字符串。文本为纯文本。第二张图像中，鼠标光标悬停在超链接上，这会导致文本带有下划线。

图像显示位于小组件底部中间的超链接，位于分页点的水平行上方。红色 X 表示分页点和超链接不应位于同一空间中。在右侧，另一个图像显示底部的超链接，但分页点在右侧的列中垂直对齐。绿色检查表示这两个元素的位置正确。

显示下拉菜单的小组件的两张图像。在左侧图像中，下拉菜单处于折叠状态。在右侧图像中，下拉列表已展开并扩展到小组件的边框上

如果用户与菜单或下拉列表交互，小组件可以暂时稍微超出其小组件大小。 如果用户在菜单/下拉区域之外单击，则菜单行为应为轻型消除并关闭菜单。