多级网格的UI设计模式

时间:2009-10-27 07:07:07

标签: usability interaction-design ui-patterns

目前我要求在多级网格中显示相关项目。 这是伟大的祖父母 - > grandparent->父 - >孩子

例如: 国家 - > state-> City-> Street是显示的顺序。

建议的解决方案是在多级网格中显示所有这些(最多4级)。

国家    - >州        - >市           - >街道

由于我对可用性方面的解决方案不满意,我正在寻找一种将显示分解为逻辑单元的UI设计模式。

感谢

3 个答案:

答案 0 :(得分:8)

如果您拥有来自同一层次结构的两个不同级别的数据对象,则可以:

  • 将每个级别放在不同的窗口(或页面,灯箱)中,并允许在它们之间导航。我称之为向下钻取

  • 将每个级别放在同一窗口(或页面)的不同窗格中,其中将焦点放在上级窗格中的对象上会填充从属窗格。我称之为 master-detail (这包括级联列表,不要与上面的深入分析混淆)。

  • 将两个级别放在同一个窗格中,缩进每个上级对象下的下级对象,并通常提供控件来隐藏和显示每个上级对象的下级对象。我称之为

使用多个级别的层次结构,您可以使用这些级别的任意组合。以下是一些决定如何关联层次结构中任何相邻级别的指南。

如果

,请将等级放在树中
  • 层次结构中的级别数随每个数据对象(如文件夹)而任意变化。

  • 用户将定期比较排序顺序中彼此靠近的两个或多个上级对象的下级对象(然后,用户可以展开两个上级对象的树,以便一次查看suboridinate对象)。

如果符合以下条件,则将级别置于主 - 详细信息关系中:

  • 您为每个对象显示多个或两个属性(例如,不仅仅是名称),并且每个级别都有不同的属性。

  • 上级对象有多个从属对象类。

  • 您将展示多对多关系。

有关详细信息,请参阅Hierarchy Visual Design

如果符合以下条件,则将等级设置为向下钻取关系:

  • 每个级别显示的信息量太大,无法放入一个合理大小的窗口。

  • 任务规定用户可以从一个级别转换到另一个级别,但用户不会同时使用这两个级别(通常,您希望避免让用户在窗口之间来回导航)。

  • 无论如何,您将需要单独的窗口来执行不同的高级任务。这意味着您将提供一种直接导航到下级窗口的方法,而无需通过上级窗口“向下钻取”

通常只有当两个窗口都是主窗口(或页面)时,向下钻取才有意义。从属窗口不应是对话框,属性窗口或灯箱。如果您没有足够的内容在下级窗口中显示以证明全尺寸主窗口的合理性,那么请使用主 - 详细信息。与主细节相比,下钻对话框:

  • 在保存更改时引入不一致。

  • 在z顺序中创建模式或歧义(或者,在灯箱的情况下,“后退”按钮功能的模糊性)。

  • 缺少下拉菜单及其用于编辑和撤消的基本控件(在Linux和Windows中)。

  • 不支持调整窗口大小(在Mac和Windows中)以提供更灵活的内容查看。

有关上述所有内容的更多信息,请参阅http://www.zuschlogin.com/?p=31

答案 1 :(得分:2)

打破这种情况的一种常见方法可能是在两个或更多步骤中执行此操作,并在它们之间导航(即导航到另一个页面或打开模态对话框等)。

因此,您可以显示第一个具有1或2或3级层次结构的网格/表,以及导航链接以显示第二个或下一个列表/表中的剩余级别。

如果您正在寻找某些既定模式的确认,您可以选择(或组合)这些模式:

Master/Detail

Tree Table

Cascading Lists

答案 2 :(得分:0)

树?就像文件系统的Windows资源管理器视图一样?