|
|
|
|
|
C H A |
P |
T E R |
7 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Controls |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Figure 7-3 |
Push button dimensions |
|
|
|
|
|
|
|
|
|
|||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Push button: The button height is 20 pixels. |
Small push button: The button height is 17 pixels. |
|||||||||||||||||||||
14 |
|
14 |
|
|
|
14 |
|
14 |
|
|
10 |
10 |
10 |
10 |
|
|||||||
|
|
|
|
|
20 |
|
|
|
|
|
20 |
|
|
|
|
|
17 |
|
|
|
|
17 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
End caps are |
Text goes between |
|
|
|
|
|
|
|
|
|
|
|
||||||||||
not adjustable. |
end caps. |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||||||
■Height: 20 pixels (fixed), not including the shadow. For small push buttons, height is 17 pixels.
■End caps: 14 pixels wide (fixed). For small push buttons, 10 pixels.
■Width: Depends on button text. If you don’t specify a wide enough button, the end caps clip the text. The standard width for OK and Cancel buttons is 69 pixels, as shown in Figure 7-1 (page 121). Push buttons used in other contexts may be sized differently if appropriate.
■Text: System font (13-point Lucida Grande Regular). If you need to use a font larger than the system font, use a bevel button instead. For small push buttons, use the small system font (11-point Lucida Grande Regular).
■Color: All push buttons are clear except the default button, which uses the default color (in addition to pulsing).
■Spacing: Leave at least 12 pixels of space between buttons placed horizontally or stacked. For small push buttons, leave at least 8 pixels.
Radio Buttons and Checkboxes
Use radio buttons for a set of mutually exclusive, but related, choices. A set of radio buttons should contain at least two items and a maximum of about seven. (For more than seven items, consider using a pop-up menu.) A set of radio buttons is never dynamic (changing contents depending on the context). A radio button should never initiate an action.
Use checkboxes to indicate one or more options that must be either on or off. Each checkbox label should clearly imply two opposite states so it’s clear what happens when the box is checked or unchecked. If you can’t find an unambiguous label, consider using radio buttons so you can clarify the states with two different labels.
122Control Behavior and Appearance
Apple Computer, Inc. June 2002
C H A P T E R 7
Controls
Radio Button and Checkbox Specifications
Figure 7-4 Spacing of standard and small radio buttons
8 |
8 |
||||||
8 |
|
|
|
8 |
|
|
|
|
|
|
|
|
|
||
|
|
|
|
||||
|
|
|
|
|
|
||
Align the baselines of the label and the first button’s text.
The box indicates the hit region.
Figure 7-5 Spacing of standard and small checkboxes
8 |
8 |
||||||
8 |
|
|
|
8 |
|
|
|
|
|
|
|
|
|
||
Align the baselines of the label and the first checkbox’s text. The hit region includes the checkbox border.
■Size: 18 x 18 pixels, including the shadow. Small radio buttons are 14 x 15 pixels. Small checkboxes are 14 x 16 pixels.
■Label: 8 pixels from label (colon) to control
■Spacing: 8 pixels of space between controls when stacked.
■Text: System Font (13-point Lucida Grande Regular). Small: Small system font (11-point Lucida Grande Regular).
■Positioning: Typically stacked vertically to clearly show relationships among button states.
Control Behavior and Appearance |
123 |
Apple Computer, Inc. June 2002