出自UXGuide.net

Positioning Regular-Size Controls in a Window Body

Although there are many ways to arrange controls in a given window, there are guidelines you should follow so that your application has the clean, balanced Aqua look. This section provides examples of properly designed windows and alerts that use regular-size controls. For guidelines on the use of mini and small controls, see “Using Small and Mini Versions of Controls.” Although some of the guidelines presented in this section are specific to the examples shown, most are general guidelines that are applicable to all windows.

A Simple Preferences Window

Figure 16-1 shows a very simple preferences window. Note that an application with more extensive preferences probably would use a toolbar in the preferences window to provide access to different categories of preferences (see, for example, Figure 14-54).

Figure 16-1 Preferences window example

This window provides a good example of a center-equalized layout. Center equalization simply means that the visual weight is balanced on the right and left side of the content area. It does not mean center justification, where the left and right sides of an imaginary vertical line drawn through the center of a window contain exactly the same number of items or characters.

In Mac OS X, content should always be center-equalized in windows and panes. The shading in Figure 16-2 highlights this equalization. Notice that although the right side of the vertical line has more objects, it is balanced by the category labels on the left. The net result is a visually balanced window.

Figure 16-2 Example center-equalization in a preferences window

When labels and controls are stacked in a group, they should line up with each other vertically. When controls are vertically aligned, it helps users see at a glance that the controls are similar in importance and that one control does not depend on another. Of course, if there is a hierarchy of controls in your window and, for example, one control depends on another, you can indent the subordinate control to show its relationship to the control on which it depends. (See Figure 15-24 for an example of interdependent checkboxes.)

Figure 16-3 shows the vertical alignment of controls and labels in a window. Note that the colons for the main category labels are right-aligned, whereas the checkboxes and radio buttons are left-aligned. Right-alignment of the labels makes it easier to see the relationship between each label and the controls it describes.

Figure 16-3 Example label and control alignment in a preferences window

In addition to ensuring that your content is center-equalized and appropriately aligned, it’s also important to use proper spacing in your window. Appropriate spacing not only makes a window look attractive and well-designed, but also makes it much easier for users to understand and use. When the margins inside the window edges and the spaces between user interface elements are adequate and consistent it helps to show the relationships between groups of controls and the overall flow of the window. For more examples of using white space appropriately, see “Grouping With White Space.”

The preferences window used as an example in this section uses white space in a consistent way. For example, in Figure 16-4 you can see:

• The same amount of space above and below each horizontal separator (the window in Figure 16-4 uses 12 pixels above and below each horizontal separator).
• Equal margins on both sides and the bottom edge of the window (the window in Figure 16-4 uses a 20-pixel margin in these areas).
• The same amount of space between individual controls (the window in Figure 16-4 uses 8 pixels between individual controls).

For the recommended spacing between members in a set of controls, such as between each radio button in a radio-button group, see the section that describes that control.

In addition, the window in Figure 16-4 uses a 14-pixel margin between the top controls and the bottom edge of the title bar (this margin would be the same width if the window contained a toolbar). Also, the controls in the main part of the window are separated from the Help button at the lower edge of the window by an 18-pixel space (a space of at least 16 pixels is recommended).

Figure 16-4 Example layout of a preferences window

A Tabbed Window

A tabbed window, like the one shown in Figure 16-5 follows the same general guidelines as those outlined in “A Simple Preferences Window.” However, it illustrates another implementation of many of the same basic guidelines you’ve seen so far, along with some new guidelines.

Figure 16-5 Tabbed window example

Center-equalization is again evident in Figure 16-6. The overall effect of the window is a balance between the visual weight of the controls on one side of the invisible center axis with the weight of the controls on the other side. The controls are also collectively balanced within each group box so that the distance from the farthest control on each side of the group box is the same for both the right and left sides.

Also as shown in Figure 16-6, always center a tab view within a window.

Figure 16-6 Example of center-equalization in a tabbed window

Figure 16-7 illustrates a few guidelines about control placement:

• The colons for stacked labels are right-aligned.
• Stacked controls are left-aligned when appropriate.
• Similar controls have consistent widths. For example, the sizes of the Font pop-up menus and the Size combo boxes are the same in each group box.

Figure 16-7 Example of alignment of labels and controls in a tabbed window

Like the simple preferences window example in “A Simple Preferences Window,” the tabbed window shown in this section uses white space in a consistent way. For example, in Figure 16-8, you can see:

• Equal margins between the sides of the group boxes and the tab-pane side edges (the window in Figure 16-8 uses a 16-pixel margin in these areas).
• Equal margins between the sides and bottom of the tab pane and the window edges (the window in Figure 16-8 uses a 20-pixel margin in these areas).
• In both group boxes, the same amount of space between the bottom control and the lower edge of the group box, and the same amount of space between the top control and the upper edge of the group box. (The window in Figure 16-8 uses a 16-pixel margin between the bottom controls in each group box and the lower edge of the group box, and a 10-pixel margin between the top controls in each group box and the upper edge of the group box.)

In addition, the window in Figure 16-8 uses a 12-pixel margin between the top of the tab bar to the bottom of the title bar (see “Tab Views” for more information about tab views). Note that this margin would be the same width if the window included a toolbar.

Figure 16-8 Example of layout of a tabbed window

A Standard Alert

A standard alert is shown in Figure 16-9.

Figure 16-9 A standard alert example

Although the standard alerts take care of the general layout for you, there are a few details you are responsible for:

• Make sure that the application icon you use in the alert is 64 x 64 pixels.
• Make sure to include both the main message text and the informative text. An alert with only message text is not a complete alert and typically is not very useful to the user.
• Always put the action button in the bottom-right corner of the alert. This is the button that completes the action that the user initiated before the alert was displayed. Remember that the action button is not always the default button as it is in this example (the default button has color and pulses and receives a click when the user presses Return or Enter). In situations where clicking the action button can have dangerous consequences (such as data loss) the default button can be Cancel, but when this is the case it should not be located in the action button position.

Alerts look best when the margin at the bottom edge is the same height as in other windows (for example, in Figure 16-10, this margin is 20 pixels). In addition, you should ensure that there is an equal amount of space in the margins at the sides. The standard alert shown in Figure 16-10 uses a 24-pixel wide margin at the sides of the window.

See “The Elements of an Alert” for more details on designing alerts.

Figure 16-10 Layout of a standard alert

A Dialog with a List View

When you need to allow users to view or manipulate a potentially large set of items in a dialog, you can use a list view to display them. (To learn more about using a list view in a window, see “List Views”; to learn about the different types of buttons in a dialog, see “Dismissing Dialogs.”) The layout guidelines in this section differ slightly, depending on whether the dialog displays an icon.

To achieve a clean, well-balanced layout of a list view in a dialog that does not contain an icon, follow these guidelines:

• If there is introductory text above the list, left-align the list view with it.
• Left-align the leftmost dialog button (or Help button, if there is one) with the list view.
• Right-align the rightmost button with the list view.

Figure 16-11 shows a dialog that does not display any text above the list view. Note that the buttons below the list are aligned with the list’s side edges and that the margins on both sides of the window are equal in width (the dialog in Figure 16-11 uses 20-pixel wide side margins).

Figure 16-11 Example layout of a list view in a dialog without an icon

If you need to display an icon in a dialog with a list view, follow these guidelines:

• Place the icon to the left of the introductory text. If there is no introductory text, place the icon to the left of the list view.
• Left-align the introductory text, list view, and leftmost button.
• If you need to include a Help button, left-align it with the icon. Note that this is the only user interface element that should appear directly below the icon.

Figure 16-12 shows an example of how a list view in a dialog with an icon might look. Note that the margins on both sides of the window are equal in width (the dialog in Figure 16-12 uses 20-pixel wide side margins).

Figure 16-12 Example layout of a list view in a dialog with an icon