WP8.1学习系列(第十章)——中心控件Hub设计指南

Windows Phone 应用商店应用中的中心控件指南

 

在本文中

• 说明
• 示例
• 用法指南
• 设计指南
• 相关主题

重要的 API

• Hub (XAML)
• HubSection (XAML)

说明

中心控件（在手机上，仅适用于按纵向使用）显示一系列可以来回平移的区域。它是应用的全屏容器和导航模型。

中心（以前称为全景）体验是本机 Windows Phone 外观的一区域。与旨在适合手机屏幕边界的应用不同，中心应用通过使用超出屏幕边界的水平虚拟宽画布提供了一个查看控件、数据和服务的独特方式。在 Windows Phone 上，这些固有的动态视图使用分层动画和内容，以便各层以不同的速度流畅地平移，类似于视差效果。

中心应用的区域用作更具体体验的起始点。你的目标应该是在视觉上向用户呈现丰富的内容。

示例

用户界面由独立移动的层组成：一个背景颜色或图像、一个中心标题、中心区域标题和中心区域。

如果设置，背景图像是最低的层，并为中心提供了丰富的杂志般的感觉。背景图像通常是一张整幅图像，它可能是应用最直观的区域。

中心标题应标识应用，并且应当清晰可见，而无论用户以何种方式进入应用。

中心区域是包含其他控件和内容的中心应用的组件。中心区域的移动速率与触控平移或轻拂的速率相同。中心区域标题对于任何给定的中心区域都是可选的。

缩略图可以是主要元素，它们链接到其他页面上的内容或媒体。

用法指南

基于应用的要求，你可以将多个中心区域添加到中心控件—其中每一个都提供一种具有独特目的的功能。例如，一个区域可能包含一系列链接和控件，而另一个则是缩略图图像的储存库。用户可以使用内置于中心控件的手势支持在这些区域之间来回平移。

设计指南

• 仅在纵向方向上支持中心控件的行为和呈现。
• 可以为中心控件添加主题，也可以替代默认颜色等。
• 使用 Windows Phone 的中心控件的包装效果可从后向前包装，也可从前向后包装。包含 1 个或 2 个区域的中心不会换行。包含 3 个或多个区域的中心将换行。
• 在 Windows Phone 上，如果在你的中心中使用应用栏，请将该应用栏的模式设置为“最小化”。此模式专门用于将中心页面上的屏幕空间最大化。有关详细信息，请参阅 Windows Phone 的应用栏。
• 在系统托盘中显示进度条，或在启动中心控件时全屏显示“加载”指示器。
• 当更新或刷新中心控件的某个区域时，会在系统托盘中显示进度条，但不会阻止用户交互。
• 首次访问：显示的第一个区域应将中心标题妥善左对齐。对于将哪一区域作为默认设置这一问题并无标准指南；具体取决于将要显示的内容。
• 对于同一中心控件的后续访问，会将用户转到上次中断时访问的区域。
• 不要在中心控件中创建五个以上的区域。这是出于性能原因考虑的，还可以限制用户要导航浏览的区域数量。当内容较为复杂时，请使用较少的区域。不要使用大量区域，这样会吓倒用户。用户只需使用四个或五个区域，用户即可获取其所在的方位以及左右两侧的内容。
• 不要在中心控件内部使用透视控件，反之亦然。但是，你可以将中心区域中的某个项目链接到包含透视控件的不同页面。
• 不要使用可在中心控件内部平移或滚动的控件。例如，将地图控件放入中心区域中可能会造成该中心控件难以使用。难以分辨所输入手势的用意。例如，如果你有一个滑块，尝试将其向左滑动，并且你是在中心控件的区域之中，则无法确定你是希望滚动区域还是希望移动滑块。需要手势输入的控件的解决方案是将其放置在其自己的页面中并导航到该页面。你可以在中心区域中放置一个禁用手势的控件—可能是地图。你可以覆盖会激活该地图的按钮。按下该按钮会导航到仅包含该地图的不同页面。用户随后可按下“后退”按键以返回到中心区域。
• 有关何时使用中心控件与透视控件的更多指南，请查看以下主题：
  • Windows Phone 的带有主页菜单的主应用中心（全景或透视控件）
  • Windows Phone 的带有面板区域的主应用中心（全景控件）
  • Windows Phone 的应用选项卡（透视控件）

中心标题：

• 使用纯文本或图像，例如徽标。你还可以使用多个元素，例如徽标和文本（或其他 UI 元素）。
• 确保标题的字体或图像颜色在整个背景图像内清晰可见（因为这两项独立移动）。使用系统字体和样式，除非需要特定的品牌体验（使用其他字体、大小或颜色）。
• 避免设置标题动画，或动态更改其大小。
• 为了一致性起见，使中心标题与“开始”屏幕中的启动磁贴相匹配。
• 设置中心控件的布局并设计标题时，请避免系统托盘或其他元素的封闭问题。

中心区域标题：

• 使用纯文本或图像，例如徽标。你还可以使用多个元素，例如徽标和文本（或其他 UI 元素）。
• 确保标题的字体或图像颜色在整个背景图像内清晰可见（因为这两项独立移动）。使用系统字体和样式，除非需要特定的品牌体验（使用其他字体、大小或颜色）。
• 避免设置标题动画，或动态更改其大小。

中心区域：

• 通过对区域内容中包含的文本和图像进行选择，保持中心控件体验的美感，使其不显得杂乱和拥挤。
• 如果使用垂直滚动，请考虑方向。只要区域的宽度大于屏幕宽度，即可在中心区域中进行垂直滚动。
• 考虑隐藏中心区域，直到它们具有要显示的内容。

背景艺术图像

• 最好是深色、柔和的低对比度背景。单个颜色或渐变。
• 背景中的一张精细且适宜的照片可使中心控件在视觉方面具有吸引力。但是避免使用包含大量明亮颜色的照片，因为它们会使区域难以阅读。一个实用技术是在照片顶部使用半透明的黑色或白色筛选器（矩形）。你可以在位图编辑工具中执行此操作，然后展开该图像。
• 背景图像应该平移整个中心控件。这表示其纵横比应该与中心控件的纵横比相匹配，其大小应该考虑使用最常用设备分辨率、最大设备分辨率，并考虑性能。若要使文件大小保持较小，建议使用 JPEG 格式。
• 你可以从一个背景图像切换到另一个背景图像，即使正在运行你的应用也是如此，但是一次只可以显示一张图像。

缩略图

• 使用突出显示可标识主题的已裁剪图像，而不是缩小整个图像。如果在没有文本的情况下无法标识图像，则最多可以使用两行文本来标识内容。