出自UXGuide.net

Positioning Small and Mini Controls in a Window Body

目录 1 Layout Example for Small Controls 2 Layout Example for Mini Controls

Use smaller versions of controls only when necessary. Your first choice in designing for Aqua should always be to use the regular-size controls.

You can use the smaller versions of controls when space is at a premium, such as in tool panels, other types of panels, or Automator actions (for more information on Automator, see “Automator”). Avoid mixing different sizes of controls in the same window. In a window with multiple panes, it is acceptable to use small or mini controls within the pane and standard controls outside the pane. However, all panes of a window should use controls of the same size.

Layout Example for Small Controls

Figure 16-13 shows a well designed panel with small controls.

Figure 16-13 Example of a panel with small controls

As you do when using regular-size controls, you should use the center-equalized approach to laying out small controls. This visually balanced layout can be seen in Figure 16-14.

Figure 16-14 Center-equalization in a panel with small controls

Small controls, like regular-size controls, should be aligned vertically when stacked. In addition, similar controls should have consistent widths and be aligned with each other, as shown in Figure 16-15.

Figure 16-15 Alignment of labels and controls in a panel with small controls

Consistent use of white space is as important in windows with small controls as it is in windows with regular-size controls. For example, in Figure 16-16, you can see:

• Equal margins at the window sides and bottom edge (the window in Figure 16-16 uses 20-pixel margins in these areas). Note that if you use group boxes in a panel with small controls, a narrower margin (such as 10 pixels) is more suitable.
• Equal spacing between groups of controls (the window in Figure 16-16 uses 12 pixels in these areas).
• Equal spacing between section labels and the first control in the section (the window in Figure 16-16 uses 8 pixels between the label of a control section, such as “Icon labels,” and the first control in that section).

In addition, the panel shown in Figure 16-16 uses a 14-pixel margin between the title bar and the top item in the window. To save space while creating distinct sections of controls, the example window uses bold font to label each section, instead of using horizontal separators or group boxes.

Figure 16-16 Layout of a panel with small controls

Layout Example for Mini Controls

Figure 16-17 shows a well designed panel with mini controls. As you can see, this window observes the principles of center equalization, text and control alignment, and visual balance. In particular, notice that:

• Stacked controls are left-aligned.
• Similar controls have the same width.
• The overall layout is center-equalized and visually balanced.

Figure 16-17 Example of a panel with mini controls

In addition, the panel uses white space in a consistent way. For example, in Figure 16-18, you can see:

• Equal margins at the window sides and bottom edge (the window in Figure 16-18 uses 20-pixel margins in these areas).
• Equal spacing between groups of controls (the window in Figure 16-18 uses 12 pixels in these areas).
• Equal spacing between section labels and the first control in the section (the window in Figure 16-18 uses 8 pixels between the label of a control section, such as “Slideshow settings,” and the first control in that section).

In addition, the panel shown in Figure 16-18 uses a 10-pixel margin between the title bar and the top item in the window. To save space while creating distinct sections of controls, the example window uses bold font to label each section, instead of using horizontal separators or group boxes.

Figure 16-18 Layout of a panel with mini controls