使用英语阅读

通过


列表详细信息设计模式

列表详细信息模式具有主窗格和内容的详细信息窗格。 主窗格通常是列表视图。 当选择列表中的项时,将会更新细节窗格。 此模式自然地适用于在你具有更大的查看区域的情况下。 它通常用于电子邮件和通讯簿。

利用两个不同的屏幕并贴靠自然边界,可以使用一个屏幕来显示 项目 列表,另一个屏幕显示所选项目的详细信息。

将导航或概述与详细信息分开,使用户能够更深入地钻取内容,同时了解其在整体列表或聚合中的位置。

关系图显示了列表详细信息设计模式,其中包含不同屏幕上的导航和内容。

最佳实践

下面是在应用此设计模式时帮助指导的一些方案:

关系图显示了一个屏幕上的列表,其中的内容位于另一个屏幕上,而不是列表元素跨越铰链。

应做事项 禁止事项
使用屏幕左侧显示列表,右侧显示列表中的选定项的详细信息。 不要在两个屏幕上显示列表,请使用第二个屏幕来查看详细信息视图。

关系图显示屏幕列表侧的底部菜单,而不是交叉铰链。

应做事项 禁止事项
在左侧屏幕上具有与左侧列表相关的底部菜单导航。 左侧屏幕上没有底部菜单导航,列表跨越两个屏幕。

关系图显示列表屏幕上的“使用侧”菜单,而不是具有跨越两个屏幕的底部菜单。

应做事项 禁止事项
将侧菜单导航与左侧屏幕上的列表和右侧屏幕上的详细信息配合使用。 在列表详细信息中,没有两个屏幕的底部菜单导航。

关系图显示了一个旋转视图,该视图仅显示两个屏幕上的内容,而不是列表。

应做事项 禁止事项
当设备旋转到双横向方向时显示详细信息, (后退按钮返回到列表) 。 当设备旋转为双横向方向时,不要在一个屏幕上显示列表,另一个屏幕上的详细信息。

关系图显示了列表屏幕上的图像集合,其中第二个屏幕上有一个放大的图像。

应做事项 禁止事项
使用第二个屏幕从图像库列表中显示较大的图像。 不要在通过铰链的两个显示器之间显示列表库。

可从此模式中受益的应用类型

  • 具有列表或库的应用
  • 邮件应用
  • 计划应用
  • 照片或图像特选应用
  • 带有播放列表和歌曲详细信息的音乐应用
  • 具有强大导航结构的应用

代码示例

这些项目显示了可在应用中使用的列表详细信息设计模式的简单实现:

备注

使用列表 - 细节视图时

确保从单个屏幕移动到跨屏列表详细信息模式时,选择一个项目以显示详细信息视图的用户。 否则,详细信息视图屏幕可能会对用户感到损坏。 它可能会惹恼用户,需要操作来填充信息。

某些选项包括列表视图中的最后一个触摸项,或列表中的顶部项,或上次修改的项。

后续步骤

请考虑以下其他设计模式: