C H A P T E R 1 1
Icons
System-Provided Images
Throughout Mac OS X, you can see quantities of small, black images in rectangular-style toolbar controls, gradient buttons, and scope buttons. Some of the most familiar are those used in the Finder toolbar, as shown in Figure 11-27.
Figure 11-27 Standard images as used in the Finder toolbar
List view |
|
Column view |
||
Icon view |
|
|
|
Cover Flow view |
|
|
|
|
|
Go back |
|
|
|
Go forward |
Quick Look |
|
|
|
Action menu |
|
|
|
|
In addition to these images, many Mac OS X applications display full-color standard images such as the icons that represent the Colors window, .Mac, and a smart folder (Figure 11-26 (page 150) shows images similar to these).
In Mac OS X v10.5 and later, many standard images of both types are available for you to use. Using system-provided images confers significant advantages, such as:
■Shorter development time and less effort spent on creating custom versions of standard art.
■Automatic updating of images if appearance changes are part of future operating system updates.
■Established user familiarity with the meaning of standard images.
To realize these advantages, however, it is crucial that you use the images correctly. Specifically, this means that you should use an image in accordance with its documented meaning and recommended usage; you should never use an image to mean something other than what it was designed to mean. If you repurpose an image you confuse users who already know what the image means. Also, if a later update to the operating system includes a change to the image’s look, you confuse users again when the new image appearance no longer makes sense in your application.
As a hypothetical example, imagine that the “go forward” image (currently a right-pointing triangle) is changed to look like a capital letter “F.” If you correctly used this image in a control that performs a “go forward” action, your control would still make sense. If, however, you used the image to mean “play,” your control would no longer make any sense.
If you can’t find a system-provided image that has the appropriate meaning for a specific purpose in your application, it’s better to design your own than to misuse a system-provided image. “Designing Icons for Rectangular-StyleToolbarControls” (page 150)providessomeguidelinesfordesigningiconsforuseincontrols; “Designing Icons for Icon Buttons” (page 149) outlines how to design standalone icons for a toolbar.
System-Provided Images |
151 |
2008-06-09 | © 1992, 2001-2003, 2008 Apple Inc. All Rights Reserved.
C H A P T E R 1 1
Icons
Note: Each image described in the following sections is listed with its constant name, as defined in the NSImage programming interface. However, the string value for each constant consists of the constant name without the “ImageName” portion. For example, the constant NSImageNameAddTemplate has “NSAddTemplate” as its string value. You might need to use the string value, rather than the constant name, to locate images by name in Interface Builder.
System-Provided Images for Use in Controls
Mac OS X v10.5 and later provides many small, black images intended for use primarily in rectangular-style toolbar controls. These images, some of which are shown in Figure 11-27 (page 151), are known as template images in Application Kit, because they are expected to receive additional processing by an NSButtonCell object before being displayed. The additional processing can, for example, make such an image look different when its control is pressed. Because these images require the presence of a bounding box (which is supplied by the control), they are not as useful for standalone buttons or free-standing toolbar icons. Instead, see “System-Provided Images for Use as Standalone Buttons” (page 153) for images you can use as standalone buttons, and see “System-Provided Images for Use as Toolbar Items” (page 154) for images you can use as free-standing toolbar icons.
As with all system-provided images, you should avoid using the template images to represent actions other than those they are designed for. Table 11-1 shows the standard template images available in Mac OS X v10.5 and later, along with the actions they represent and their names.
Table 11-1 Template images that represent common tasks
Image Meaning |
Constant name |
View in Quick Look |
NSImageNameQuickLookTemplate |
Connect via Bluetooth |
NSImageNameBluetoothTemplate |
Open iChat Theater |
NSImageNameIChatTheaterTemplate |
View in a slide show |
NSImageNameSlideshowTemplate |
Action pop-up menu |
NSImageNameActionTemplate |
Create smart item |
NSImageNameSmartBadgeTemplate |
View objects as icons |
NSImageNameIconViewTemplate |
View objects in a list |
NSImageNameListViewTemplate |
View objects in columns |
NSImageNameColumnViewTemplate |
View objects in a Cover Flow mode |
NSImageNameFlowViewTemplate |
View the path of the object |
NSImageNamePathTemplate |
152 |
System-Provided Images |
2008-06-09 | © 1992, 2001-2003, 2008 Apple Inc. All Rights Reserved.
C H A P T E R 1 1
Icons
Image Meaning |
Constant name |
Unlock the object (this image indicates the object |
NSImageNameLockLockedTemplate |
is currently locked) |
|
Lock the object (this image indicates the object is |
NSImageNameLockUnlockedTemplate |
currently unlocked) |
|
Go to the right or go forward |
NSImageNameGoRightTemplate |
Go to the left or go back |
NSImageNameGoLeftTemplate |
Add an item (to a list, for example) |
NSImageNameAddTemplate |
Remove an item (from a list, for example) |
NSImageNameRemoveTemplate |
Enter full-screen mode |
NSImageNameEnterFullScreenTemplate |
Exit full-screen mode |
NSImageNameExitFullScreenTemplate |
Stop progress on the current process |
NSImageNameStopProgressTemplate |
Refresh the current view or restart the process |
NSImageNameRefreshTemplate |
System-Provided Images for Use as Standalone Buttons
Mac OS X v10.5 and later provides a handful of free-standing images that can be used as borderless buttons. These images do not require further processing by an NSButtonCell object.
Two of the free-standing images are standalone versions of similar template images. To see why you might need both versions of such an image, consider how Safari offers stop-progress functionality to users. In the Downloads window, Safari uses the free-standing NSImageNameStopProgressFreestandingTemplate image inline with a progress indicator to allow users to stop an in-progress download. (Figure 11-28 shows this control in the Safari Downloads window.) Because this window can display several separate download processes at the same time, it’s important to display a stop-progress control for each individual process.
Contrast this with the NSImageNameStopProgressTemplate image (shown in Table 11-1 (page 152)) that Safari uses in a toolbar button. Here, the process users might want to stop is the downloading of a webpage in the main Safari window, so it makes sense to offer this functionality in a toolbar button.
System-Provided Images |
153 |
2008-06-09 | © 1992, 2001-2003, 2008 Apple Inc. All Rights Reserved.
C H A P T E R 1 1
Icons
Figure 11-28 The free-standing images can be used as borderless buttons
The free-standing "stop progress" image used as a borderless button
As with all system-provided images, each free-standing image must be used according to its documented meaning and recommended usage. Table 11-2 lists each image, along with its meaning and name.
Table 11-2 Free-standing images that represent common actions
Image Meaning |
Constant name |
The data on the left is invalid (for example, the |
NSImageNameInvalidDataFreestanding- |
user entered a zip code in a phone number field) |
Template |
Reveal contents or details about the object |
NSImageNameRevealFreestandingTemplate |
Open the link in a new window or page |
NSImageNameFollowLinkFreestanding- |
|
Template |
Stop progress on the current process |
NSImageNameStopProgressFreestanding- |
|
Template |
Refresh the current view or restart the process |
NSImageNameRefresh- |
|
FreestandingTemplate |
System-Provided Images for Use as Toolbar Items
Mac OS X v10.5 and later provides several images you can use as standalone icons in toolbars. These images are represent three types of items:
■System entities or elements
■Preferences categories
154 |
System-Provided Images |
2008-06-09 | © 1992, 2001-2003, 2008 Apple Inc. All Rights Reserved.
C H A P T E R 1 1
Icons
■Common toolbar items
Use the first set of images (shown in Table 11-3) to give users access to system entities, such as Dot Mac and network. For the most part, the images in Table 11-3 identify system entities, they do not represent actions. However, if you needed to represent an action, such as “create a new smart folder,” you could add a plus sign badge to the smart folder icon.
Table 11-3 |
Images that represent system entities |
|
Image System element |
Constant name |
|
Bonjour |
NSImageNameBonjour |
|
Dot Mac |
NSImageNameDotMac |
|
The Macintosh computer currently running |
NSImageNameComputer |
|
A burnable folder |
NSImageNameFolderBurnable |
|
A smart folder |
NSImageNameFolderSmart |
|
Network or Internet |
NSImageNameNetwork |
|
The second set of images is intended for use as standalone icons in preferences window toolbars. Use these images to give users access to familiar preferences categories, such as user-account settings and advanced settings. Table 11-4 shows the images you can use in a preferences window toolbar.
Table 11-4 Images that represent common preferences categories
Image Preferences category Constant name
Advanced NSImageNameAdvanced
General |
NSImageNamePreferencesGeneral |
User accounts |
NSImageNameUserAccounts |
The third set of images is suitable for toolbar items in windows other than preferences windows. You can use these images as standalone icons in a window or panel toolbar to give users access to the system-provided Colors and Fonts windows or to an Info or inspector window you supply. Table 11-5 shows the images you can use in a non-preferences window toolbar.
System-Provided Images |
155 |
2008-06-09 | © 1992, 2001-2003, 2008 Apple Inc. All Rights Reserved.