出自UXGuide.net

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

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 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-Style Toolbar Controls” provides some guidelines for designing icons for use in controls; “Designing Icons for Icon Buttons” outlines how to design standalone icons for a toolbar.

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, 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” for images you can use as standalone buttons, and see “System-Provided Images for Use as Toolbar Items” 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
	Unlock the object (this image indicates the object is currently locked)	NSImageNameLockLockedTemplate
	Lock the object (this image indicates the object is currently unlocked)	NSImageNameLockUnlockedTemplate
	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) 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.

Figure 11-28 The free-standing images can be used as borderless buttons

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 user entered a zip code in a phone number field)	NSImageNameInvalidDataFreestandingTemplate
	Reveal contents or details about the object	NSImageNameRevealFreestandingTemplate
	Open the link in a new window or page	NSImageNameFollowLinkFreestandingTemplate
	Stop progress on the current process	NSImageNameStopProgressFreestandingTemplate
	Refresh the current view or restart the process	NSImageNameRefreshFreestandingTemplate

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 represent three types of items:

• System entities or elements
• Preferences categories
• 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.

Table 11-5 Images that represent standard toolbar items

Image	Toolbar item	Constant name
	Show/hide information	NSImageNameInfo
	Show/hide Fonts window	NSImageNameFontPanel
	Show/hide Colors window	NSImageNameColorPanel

System-Provided Images that Indicate Privileges

Mac OS X v10.5 and later provides images that represent the standard “user,” “group,” and "all” categories of permissions or privileges, including access control lists (or ACLs). Each of these images is shown in Table 11-6, along with its meaning and name. It is recommended that you use these images to clarify which users have permissions to read, write, or execute an item. These images allow you to avoid displaying Unix-style permissions indicators, such as rwxr-xrw-, which are suitable only for very sophisticated users.

Note that the “user group” permissions image shown in Table 11-6 looks similar to the image for the “user accounts” preferences category, shown in Table 11-4. As with all system-provided images, however, similar appearance does not imply similar meaning or usage. Be sure to avoid using system-provided images incorrectly.

Table 11-6 Images that represent categories of user permissions

Image	Permissions category	Constant name
	User	NSImageNameUser
	A user group	NSImageNameUserGroup
	All users	NSImageNameEveryone

A System-Provided Drag Image Mac OS X v10.5 and later provides an image you can display when a user drags multiple documents or items. As with all system-provided images, you should use the multiple-documents image in accordance with its intended meaning. Figure 11-29 shows the multiple-documents drag image. (The constant name of the drag image is NSImageNameMultipleDocuments.)

Figure 11-29 An image that represents multiple documents in transit between locations