C H A P T E R 1 6
Layout Guidelines
■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” (page 233) for more details on designing alerts.
Figure 16-10 Layout dimensions for a standard alert
Equal width on both sides
The lower margin is the same height as in a dialog
Positioning Small and Mini Controls in a Window Body
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” (page 70)). Avoid mixing different sizes of controls in the same window. In a window with a 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-11 shows a well designed panel with small controls.
344 |
Positioning Small and Mini Controls in a Window Body |
2008-06-09 | © 1992, 2001-2003, 2008 Apple Inc. All Rights Reserved.
C H A P T E R 1 6
Layout Guidelines
Figure 16-11 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-12.
Figure 16-12 Center-equalization in a panel with small controls
Positioning Small and Mini Controls in a Window Body |
345 |
2008-06-09 | © 1992, 2001-2003, 2008 Apple Inc. All Rights Reserved.
C H A P T E R 1 6
Layout Guidelines
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-13.
Figure 16-13 Alignment of labels and controls in a panel with small controls
Right-align labels and label colons
Left-align stacked items
Control widths consistent
Control widths consistent
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-14, you can see:
■Equal margins at the window sides and bottom edge (the window in Figure 16-14 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-14 uses 12 pixels in these areas).
■Equal spacing between section labels and the first control in the section (the window in Figure 16-14 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-14 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.
346 |
Positioning Small and Mini Controls in a Window Body |
2008-06-09 | © 1992, 2001-2003, 2008 Apple Inc. All Rights Reserved.
Equal space on three sides