| Java >
Guidelines Home Page > Java Look and Feel Design Guidelines >
Part II: Fundamental Java Application Design >
5: Application Graphics >
Using Badges in Button Graphics
Badges are a kind of visual shorthand used extensively in toolbar button design. The presence of a menu, the creation of a new object, the addition of an object to a collection, and the review or editing of properties and settings are typically represented by incorporating a badge into an existing button graphic. This section suggests standard ways for you to incorporate badges into the design of your toolbar button graphics.
The badges in the button graphics in this chapter appear in several of the graphics discussed in Appendix B and are included in the graphics on the book's companion CD-ROM.Figure 50 Menu Indicator in a Volume Toolbar Button
To indicate that a click or press of the mouse button displays a menu, provide an arrow menu indicator in the lower-right corner of toolbar button graphics.
Badges can extend as far as one pixel from the button border, and their highlights can touch the border. Use a 1-pixel-wide transparent area between a badge and the main button graphic to set off the badge visually. The following illustration shows the buffer area around the menu indicator. The buffer area placed around the indicator shows the background of the toolbar button, not the background of the volume graphic. For details, see Drawing the Button Graphic.Figure 51 Menu Indicator and Transparent Buffer Area
Use transparent pixels around the menu indicator arrow to set it off from the rest of the button graphic.
Add the standard highlight below or to the right of the badge in a button graphic.Figure 52 Volume Toolbar Button (Actual Size)
The lower-right corner is the standard location for the arrow graphic (in locales with left-to-right reading order). The following illustration shows the arrows for 16 x 16 and 24 x 24 pixel graphics.Figure 53 Position and Space Around Menu Indicators
Some buttons create new objects. You can use a twinkle graphic to indicate this button feature. In 16 x 16 pixel graphics, the twinkle graphic might touch the lower edge of the button border, as shown in the following illustration.Figure 54 New Object Indicator and Transparent Buffer Area
To indicate the creation of a new object, provide a twinkle graphic in the lower-right corner of toolbar button graphics.Figure 55 Document Toolbar Button With a New Object Indicator
Figure 56 New Document Toolbar Button (Actual Size)
Figure 57 Add Object Indicator and Transparent Buffer Area
To indicate the addition of a new object to a group, provide an addition symbol in the lower-right corner of toolbar button graphics.Figure 58 Document Toolbar Button With an Add Object Indicator
Figure 59 Add Document Toolbar Button (Actual Size)
Some buttons open a properties or settings window for the object or action indicated by the main part of the button graphic. You can use a small check mark to represent this action, as shown in the following illustration.Figure 60 Properties Indicator and Transparent Buffer Area
To indicate the opening of a properties or settings window or panel for the object or action represented by the main part of a button graphic, provide a small check mark in the lower-right corner of toolbar button graphics.Figure 61 Page Setup Toolbar Button (Actual Size)
Design toolbar buttons with badges individually rather than adding badges programmatically. This practice ensures that the transparent buffer area is tuned for each indicator.
Do not use more than one of the Java look and feel badges (that is, the menu, new object, add object, or properties indicators) in a single button graphic.
If the button graphic needs to indicate that more choices are available, use a menu indicator and drop-down menu. Ensure that menu items are closely related and parallel.
Do not overload toolbar buttons with features. Ensure that the button graphic and its tool tip clearly indicate the function of the toolbar button.
|Java Look and Feel Design Guidelines, second edition.
Copyright 2001. Sun Microsystems, Inc. All Rights Reserved.