Guidelines Home Page > Java Look and Feel Design Guidelines >
Part II: Fundamental Java Application Design >
5: Application Graphics >
Using Badges in Button Graphics
| java.sun.com > 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.
An arrow in a button graphic indicates that a click (or a press) of the mouse button displays a menu of choices. The following illustration shows the volume toolbar button with a menu indicator.
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.
The following figure shows the volume toolbar button with the menu indicator at actual size (16 x 16 pixels).
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.
The following illustration shows a twinkle graphic incorporated into a document toolbar button to indicate that clicking the button creates a new document.
Figure 55 Document Toolbar Button With a New Object Indicator
The following figure shows the toolbar button with the new object indicator at its actual size (16 x 16 pixels).
Figure 56 New Document Toolbar Button (Actual Size)
Some buttons add objects to a group. You can incorporate an addition symbol into your button, as shown in the following figure, to indicate this aspect of the button's features.
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.
The following figure provides an example of the symbol incorporated into a document toolbar button.
Figure 58 Document Toolbar Button With an Add Object Indicator
The following figure shows the toolbar button with the add object indicator at its actual size (16 x 16 pixels).
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.
The following figure shows a page setup button with the properties indicator at its actual size (16 x 16 pixels).
Figure 61 Page Setup Toolbar Button (Actual Size)
As a general rule, you should not need to combine the functions represented by these indicators.
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. |
|
