多级网格的UI设计模式

Question

currently I have a requirement to display related items in a multi level grid. that is great grandparent -> grandparent-> parent-> child

For example: Country-> state->City->Street is the order of display.

The proposed solution is to display all these in a multi level grid (4 levels maximum).

Country -> state ->City ->Street

Since I am not comfortable with this solution with respect to usability aspect, I am looking for a UI design pattern that will break up the display into logical units.

thanks

Answer 1

When you have data objects from two different levels of the same hierarchy, you can:

• Put each level in a different window (or page, lightbox) and allow navigation between them. I call this drill-down .

• Put each level in a different pane of the same window (or page), where placing focus on an object in the superordinate pane populates the subordinate pane. I call this master-detail (this includes cascading lists and is not to be confused with drill-down above).

• Put both levels in the same pane, indenting the subordinate objects under each superordinate object, and usually providing controls to hide and show the subordinate objects for each superordinate object. I call this a tree .

With a hierarchy of multiple levels, you can use any combinations of these. Here are some guidelines for deciding how to relate any adjacent levels in the hierarchy.

Put the levels in a tree if

• The number of levels in the hierarchy varies arbitrarily with each data object (like folders).

• The user will be regularly comparing the subordinate objects of two or more superordinate objects that are near each other in the sort order (the user can then expand the tree for both superordinate objects to see the suboridinate objects all at once).

Put the levels in a master-detail relationship if:

• You're showing more than one or two attributes per object (eg, more than just the name), and each level has different attributes.

• There is more than one class of subordinate objects for the superordinate objects.

• There are many-to-many relations that you'll be displaying.

For details see Hierarchy Visual Design

Put the levels in a drill-down relationship if:

• The amount of information to show for each level is simply too large to fit in a single reasonably sized window.

• The task dictates that the user may transition from one level to the other but the user doesn't use both levels at the same time (in general, you want to avoid making the user navigate back and forth between windows).

• You're going to need separate windows for different high-level tasks anyway. This implies you're going to provide a means to directly navigate to the subordinate window without “drilling down” through the superordinate window

Generally drill-down only makes sense if both windows are primary windows (or pages). The subordinate window should not be a dialog box, property window, or lightbox. If you don't have enough to show in the subordinate window to justify a full-size primary window, then use a master-detail. Compared to master-detail, a drill-down dialog:

• Introduces inconsistency in saving changes.

• Creates modes or ambiguity in the z-order (or, in the case of lightboxes, ambiguity on the function of the Back button).

• Lacks a pulldown menu with its basic controls for editing and undoing (in Linux and Windows).

• Does not support window resizing (in Mac and Windows) to provide more flexible viewing of the contents.

For more on all the above see http://www.zuschlogin.com/?p=31 .

Answer 2

A common way to break this down might be to do it in 2 or more steps with navigation between them (ie navigation to another page or opening a modal dialog etc.)

So you could display the first grid/table with 1 or 2 or 3 levels of your hierarchy, and a navigation link to display the remaining levels in a second or subequent lists/tables.

If you're looking for confirmation of some established patterns you could choose from (or combine) these:

Master/Detail

Tree Table

or

Cascading Lists

Answer 3

Tree? Like a Windows Explorer view of a file system?