【问题标题】:UI design pattern for multi level grid多级网格的 UI 设计模式
【发布时间】:2010-12-10 09:25:09
【问题描述】:

目前我需要在多级网格中显示相关项目。 那是曾祖父母->祖父母->父母->孩子

例如: Country-> state->City->Street是显示顺序。

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

国家 -> 状态 ->城市 ->街道

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

谢谢

【问题讨论】:

  • 您希望用户使用此界面执行的典型任务是什么?这将指导您的设计。
  • 技术上这个问题属于ux.stackexchange.com

标签: usability interaction-design ui-patterns


【解决方案1】:

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

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

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

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

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

如果

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

  • 用户将定期比较两个或多个按排序顺序彼此靠近的上级对象的下级对象(然后用户可以展开两个上级对象的树以同时查看所有下级对象)。

如果满足以下条件,则将级别置于主从关系中:

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

  • 上级对象有不止一类下级对象。

  • 您将显示多对多关系。

详情见Hierarchy Visual Design

如果满足以下条件,则将级别置于向下钻取关系中:

  • 要为每个级别显示的信息量太大,无法容纳在一个大小合理的窗口中。

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

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

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

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

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

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

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

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

【讨论】:

    【解决方案2】:

    一种常见的解决方法可能是分两步或多步完成,并在它们之间导航(即导航到另一个页面或打开模式对话框等)

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

    如果您正在寻找一些已建立模式的确认,您可以选择(或组合)这些:

    Master/Detail

    Tree Table

    Cascading Lists

    【讨论】:

      【解决方案3】:

      树?类似于文件系统的 Windows 资源管理器视图?

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2012-06-26
        • 2011-04-22
        • 2023-03-19
        • 1970-01-01
        • 2020-06-05
        • 2016-02-28
        • 2022-06-14
        • 2011-07-05
        相关资源
        最近更新 更多