列表视图和网格视图指南
[此文章包含特定于 UWP 应用和 Windows 10 的信息。有关 Windows 8.1 指南,请下载 Windows 8.1 指南 PDF。]
列表提供一致的、触摸优化的方法,用于显示基于集合的应用内容并与之交互。列表视图和网格视图控件可以帮助你有效地显示列表。借助列表视图和网格视图控件,你可以将项目分类并为之分配组标头、拖放项目、规划内容以及对项目进行重新排序。
列表视图还是网格视图?
尽管列表视图和网格视图具有类似的功能,但它们的用途不同。
列表视图建议用于:
- 显示主要为文本的内容集合。
- 对单个或已分类的内容集合的导航。
- 在大纲/细节模式下创建大纲窗格。大纲/细节是常用于电子邮件应用的模式,在该模式中,一个窗格具有一个包含可选项的列表,而另一个窗格具有一个包含选定项的详细视图。有关此视图的示例,请参阅本文中的选择正确的模式。
列表布局包含组标题、显示为单列、阅读顺序为从上到下,并可以垂直平移或滚动。
网格视图建议用于:
- 显示主要为图像的内容集合。
- 显示内容库。有关此视图的示例,请参阅本文中的选择正确的模式。
- 设置与语义式缩放相关联的两个内容视图的格式。
网格布局垂直平移,项目按照从左到右再从上到下的阅读顺序进行布局。
选择正确的模式
列表用于显示内容库、大纲/细节数据或静态数据。
内容库
使用内容库显示内容的集合或库。 在呈现诸如图片和视频等媒体时,通常使用此模式。在内容库中,用户期待点击项目就能够激活操作。
大纲/细节数据
使用大纲/细节模式时,你可以使用列表视图组织大纲窗格。大纲窗格显示一个可选项列表。当用户在大纲窗格中选择某个项目时,所选项目的其他信息会显示在细节窗格中。细节窗格通常包含一个网格视图。
你可以将多个列表链在一起,创建复杂的大纲/细节层次结构。有关详细信息,请参阅大纲/细节模式。
静态数据
静态数据仅用于呈现非交互式内容,因为大多数类型的交互内容处于禁用状态。 对于只读且无法激活或导航到其中的项目集合,此模式非常有用。
选择模式
此模式允许用户选择项目并对项目执行操作。可以通过上下文菜单调用此模式,方法是在项目上按 CTRL+单击或按 SHIFT+单击,或者在库视图中的项目上滚动选择目标。
有三种不同的选择模式:
- 单选 - 用户一次只能选择一个项目。
- 多选 - 用户无需修改键即可选择多个项目。
- 扩展 - 用户可以使用修改键选择多个项目,例如长按 SHIFT 键。
当选择模式处于活动状态时,每个列表项旁边都将显示复选框,而操作可以显示在屏幕的顶部或底部。
在项目上点击任意位置都可将其选中。点击命令栏操作会影响所有选定项。如果没有选择任何项目,命令栏操作应处于非活动状态,除了“全选”。
选择模式没有弱解除模型;在选择模式处于活动状态的框架之外点击不会取消该模式。这是为了防止意外停用该模式。单击“后退”按钮关闭多选模式。
在选择相应的操作后,应该出现可见确认。在适当的时候显示动画。请考虑为某些操作显示确认对话框,特别是诸如删除等破坏性操作。
选择模式仅限于它处于活动状态的页面,并不会影响该页面之外的任何项。
选择模式的入口点应对应于它所影响的内容。
有关命令栏建议,请参阅命令栏指南。
多选模式
编辑模式支持对行项进行操作。可以通过命令栏中的编辑模式按钮或通过上下文菜单调用该模式。
多选模式的入口点应由它所修改的列表放置。
单击“后退”按钮关闭多选模式。通过进入编辑模式,可删除任何命令栏。如果其他框架在进入选择模式时可见,这些框架将变为烟灰色。
编辑模式没有弱解除模型;在选择模式处于活动状态的框架之外点击不会取消该模式。这是为了防止意外停用该模式。
编辑模式仅限于它处于活动状态的页面,并不会影响该页面之外的任何项。
建议
- 同一个列表或网格视图中的项目应当具有相同的行为。
- 如果你的列表划分为多个组,请使用语义式缩放,以使用户更轻松地通过导航浏览分组内容。