出自UXGuide.net

Grouping Controls

This section describes controls that visually group other controls in a window. When there is more than one logical collection of controls and information in a window, the use of grouping controls helps users distinguish between them.

There are two types of grouping controls in Mac OS X: separators and group boxes. For help in deciding whether to use a group box or a separator, and for examples of layouts with them, see “Grouping Controls in a Window.”

Separators

A separator is a thin vertical or horizontal line. Separators have a lightweight appearance that’s good for separating controls into categories or subgroups of related functionality. For example, the Appearance preferences pane (shown in Figure 15-88) provides controls that determine a wide range of high-level appearance characteristics, such as highlight color and the placement of scroll arrows. Although each control affects some aspect of the Mac OS X appearance, the window uses separators to create four subgroups of related controls.

Figure 15-88 Separators divide controls into subgroups or categories

Separator Usage

Use a separator to divide a window body into distinct visual parts. You can place separators either vertically or horizontally, depending on the overall layout of your window.

In general, you should avoid stretching a separator to span the entire width or height of a window; a separator that spans a window can give the appearance of slicing a window into unrelated rows or columns. If the categories of content in your window are completely unrelated, and it might be confusing to see all categories simultaneously, it might be better to display each category in a pane of a tab view instead (see “Tab Views” for more information about using a tab view).

Separator Labeling

A label can accompany a separator, but it is not required. A separator label should have title-style capitalization (see “Capitalization of Interface Element Labels and Text” for information on this style).

The separator line should be at the base of the text of the label. Figure 15-62 shows how this looks.

Separator Specifications

Control sizes: Separators are available in a single thickness, but you determine their length. Figure 15-89 shows a vertical and a horizontal separator.

Figure 15-89 Separators

Label spacing and fonts: Separator labels should be in a font that corresponds to the controls in the window. Specifically, separator labels should use:

• System font, when other controls are regular size.
• Small system font, when other controls are small.
• Mini system font, when other controls are mini.

Separator labels should be 2 pixels from the beginning of the separator control.

Control spacing: Separators should be at least 10 pixels away from other controls. Both ends of a separator should be an equal distance from the window edges. If you use more than one separator in a window, be sure every separator with the same orientation (vertical or horizontal) is the same length.

Separator Implementation

Separators are available in Interface Builder. To create one using Application Kit programming interfaces, use the NSBox class.

Group Boxes

A group box, like a separator (described in “Separators”), is used to break a window into distinct logical areas. A group box has a heavier look than a separator, which means that it provides a more pronounced differentiation of content. For example, the Exposé pane in Exposé & Spaces preferences uses group boxes to separate screen-corner functionality from keyboard and mouse shortcuts, as shown in Figure 15-90.

Figure 15-90 Group boxes can organize controls in a window

Group Box Usage

Use a group box when you want users to understand logical groupings of controls in a window. You can use group boxes in the window-body area, including within tab-view panes.

Although group boxes are very useful for separating logical collections of content, avoid nesting them when possible; nested group boxes use a lot of space, and it can be difficult to perceive individual boundaries when group boxes are nested too deeply. Instead, consider using a separator or white space to group content within a group box. (See “Separators” for more information on using separators; see “Grouping With White Space” for guidance on using white space.) Strive to place roughly equal numbers of controls in each group box in a window, to create a visually balanced appearance.

Group Box Contents and Labeling

Group boxes can be untitled or titled. If titled, they may have text-only titles, checkbox titles, or pop-up menu titles. If the group box uses a checkbox title, the items in the group box should be active only when the checkbox is selected.

Group box titles should have sentence-style capitalization. See “Capitalization of Interface Element Labels and Text” for more information on this style.

Group Box Specifications

Control sizes: There are no standard sizes for group boxes; you control the size of the boundaries based on the needs of your window. As you place a group box in your window, be sure to follow the spacing recommendations described below.

Label spacing and fonts: By default, the font size for a group box title is small system font. You can use a different font size if it coordinates better with the overall design of your window.

Control spacing: Leave at least 20 pixels from the edge of the group box to the edge of the window. Nesting group boxes isn’t recommended, because it wastes space. However, if you decide to nest group boxes, see “A Changeable Pane Dialog” for some spacing guidelines.

Group Box Implementation

Group boxes are available in Interface Builder. To create one using Application Kit programming interfaces, use the NSBox class.