本主题介绍用于语义式缩放的 Windows Metro 风格 UI,并提供在 Metro 风格的应用中使用这个新的交互机制时应该考虑的用户体验指南。

语义式缩放概述

语义式缩放是 Windows 8 中 Metro 风格应用使用的触摸优化技术,用于在一个视图内呈现和导航大量相关数据或内容的集合(如相册、应用列表或通讯簿)。

注意

此功能类似于在一个视图内的平移和滚动(可以与语义式缩放结合使用)。

语义式缩放使用两种不同的分类模式(或缩放级别)来组织和呈现内容:一个是低级别(或放大)模式,该模式通常用于显示平面和全方位结构的项目;另一个是高级别(或缩小)模式,该模式分组显示项目并支持用户快速导航和浏览内容。

语义式缩放交互通过收缩和拉伸手势(将手指分开即可放大,将手指并拢即可缩小),或者通过按住 Ctrl 键的同时滚动鼠标滚轮,或者通过按住 Ctrl 键(如果没有数字键盘,则使用 Shift 键)的同时按加号 (+) 或减号 (-) 键的方式实现。

可使用语义式缩放的应用示例包括:

  • 地址簿,它按字母顺序(或通过其他方式)组织联系人并使用字母表中的字母显示数据。之后用户可以放大某个字母来查看与该字母关联的联系人。
  • 相册,它按元数据(如拍摄日期)组织图像。之后用户可以放大特定日期来显示与该日期关联的图像的集合。
  • 产品目录,它按类别组织项。

  • 语义式缩放布局的其他示例:

     

  • 放大

    Windows Metro 风格——语义式缩放_target
    Windows Metro 风格——语义式缩放_blank_02

    Windows Metro 风格——语义式缩放_风格_03

  • 缩小
    Windows Metro 风格——语义式缩放_的_04

    Windows Metro 风格——语义式缩放_target_05
    Windows Metro 风格——语义式缩放_target_06

    Windows Metro 风格——语义式缩放_target_07
    Windows Metro 风格——语义式缩放_target_08

使用语义式缩放进行导航

尽管可以单独通过平移和滚动来导航内容(请参阅平移指南),但当与语义式缩放结合使用可以提供强大的导航和组织功能。

对于小型的内容集以及较短的距离,平移和滚动非常有用。但是,对于大型的内容集,快速导航便很难处理。语义式缩放大大消除了导航大量内容时传输距离较长的感受,并且可以快速方便地访问内容中的位置。

注意

不应该将语义式缩放与视觉缩放混淆(请参阅视觉缩放和调整大小指南)。尽管它们的交互和基本行为(基于缩放比例显示更多或更少细节)一致,但是视觉缩放是指调整内容区域或对象(如照片)的放大倍数。

滚动跳跃

点击缩小模式中的内容将缩放该视图并平移到点击的点,如以下三个图表所示。

Windows Metro 风格——语义式缩放_blank_09

缩小,整个内容都可以是触摸目标。

Windows Metro 风格——语义式缩放_blank_10

点击内容的某个部分。

Windows Metro 风格——语义式缩放_blank_11

放大并平移到点击的区域。

过渡

平滑交叉淡入淡出和缩放动画用于从一个语义式缩放级别过渡到另一个语义式缩放级别。这是默认的 Windows 触摸屏行为,不能自定义。

注意事项和建议

你负责在应用中定义两个语义级别。

当设计缩小模式时请考虑以下问题:

  • 信息的结构和表示形式如何基于缩放级别而更改?
  • 提示或“路标”会对导航数据有帮助吗?
  • 多少内容可以提供有用的语义视图,同时最大程度地减少平移和滚动?

这些注意事项通常彼此冲突。你希望获得包含大量信息的丰富内容,以便用户知道他们跳至的位置,但是需要平衡这些信息与语义级别的总长度。如果用户需要在缩小模式平移较长距离,那么你会失去语义式缩放提供的主要优势—快速导航。

应做事项和禁止事项

以下应做事项和禁止事项将确保客户获得成功的语义式缩放体验。

应做事项
对可使用或交互的元素使用正确的触摸目标大小。

有关详细信息,请参阅目标指南

提供适合且直观的语义式缩放区域。

用户通常从包含显示项的区域内启动语义式缩放。 使语义式缩放区域足够大以包含此区域。例如,Windows 应用商店在应用列表周围提供大量空白空间,用户可以将手指放在此处以及在此处进行放大或缩小。

使用视图固有的结构和语义。

对分组集合中的项使用组名称。

对已取消分组但排好序的集合使用分类次序(如按日期时间先后排序或名称列表字母排序)。

使用页面来表示文档集合。

确保项目布局和平移方向不会基于缩放级别而变化。

对于所有缩放级别,布局和平移交互应该一致且可预测。

将缩小模式中的页面(或屏幕)数量限制为三个。

语义式缩放允许用户快速跳至内容。引入过多的平移会破坏此优势。

禁止事项
不要使用语义式缩放来更改内容的范围。

例如,不要在资源管理器中将相册切换至文件夹视图。

不要在 SemanticZoom 控件的子控件上设置边框。

如果你在 SemanticZoom 及其子控件上设置边框,则 SemanticZoom 边框以及视野范围内的子控件的边框都将可见。放大或缩小时,子控件的边框将随着内容一起缩放,看上去将不太美观。仅在 SemanticZoom 控件上设置边框。