小组件交互设计指南

  • 项目

注意

一些信息与预发布产品相关，在商业发行之前可能发生实质性修改。 Microsoft 对此处提供的信息不提供任何明示或暗示的保证。

重要

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

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

小组件应一目了然且专注，并且应表示应用主要用途的单个方面。 小组件可以提供一个或多个操作调用。 当用户单击“调用操作”时，小组件应启动关联的应用或网站，而不是在小组件本身中实现该操作。 小组件只有一个主页面，可以容纳多个交互。 单击小组件中的项目绝不应将你带到小组件的完全不同的视图。 例如，在天气小组件中，你可能会显示多天的天气，但单击其中一天不会内联展开详细信息，而是会启动应用或 Web。

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

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

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

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

容器

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

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

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

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

分页

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

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

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

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

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

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

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

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

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