Icon genres help communicate what you can do with an application before you open it. Applications are classified by role—user applications, software utilities, and so on—and each category, or genre, has its own icon style. This differentiation is very important for helping users easily distinguish between types of icons in the Dock.
Figure 10-1 Application icons of different genres—user applications and utilities—shown as they might appear in the Dock For example, the icons for user applications are colorful and inviting, while utilities have a more serious appearance. Figure 10-2 shows user application icons in the top row and utility icons in the bottom row. These genres are further described in "User Application Icons" and "Utility Icons".
Figure 10-2 Two icon genres: User application icons in top row; utility icons in bottom row The graphic flexibility of Aqua icons can also help users identify files associated with an application. In iTunes, for example, a visual cue provided in the application icon is carried over into icons for other files associated with iTunes, forming an icon family, as shown in Figure 10-3.
Figure 10-3 An icon family: The iTunes application icon and its associated icons
Application Icons Application icons are the most visible to users. Since they are seen in the Finder and the Dock even when your application is not running, they form a significant part of a user’s first impressions.
User Application Icons Mac OS X user application icons should be vibrant and inviting, and should immediately convey the application’s purpose. The TextEdit icon, for example, indicates clearly that this application is for creating text documents.
Figure 10-4 The TextEdit application icon makes it obvious what this application is for If the primary function of your application is creating or handling media, its icon should display the media the application creates or views. If appropriate, the icon should also contain a tool that communicates the type of task the application allows the user to accomplish. The Preview icon, for example, uses a magnification tool to help convey that the application can be used to view pictures. If you include a supportive tool element, it should closely relate to the base object that it rests upon.
Figure 10-5 The Preview application icon: An example of a tool element In the Stickies application icon, however, the yellow rectangles are easily identifiable as sticky notes; the icon doesn’t include a tool because it isn’t necessary to tell the icon’s story.
Figure 10-6 The Stickies application icon: Effective without the addition of a tool Notice that the text in the Stickies icon is actual text, not simply wavy lines representing text. If you want to “greek” text in an Aqua icon, use actual text and make it unreadable by shrinking it or doubling the layers.
Generally, Mac OS X user application icons are designed to appear as if they’re sitting on a desk in front of you. They have a slightly diminishing perspective (they are wider at the bottom). For more information, see "Icon Perspectives and Materials ".
Viewer, Player, and Accessory Icons Some applications that represent objects, such as QuickTime Player and Calculator, are most easily recognized by the objects themselves. When creating icons for such applications, it’s more aesthetically pleasing to create a simplified, idealized representation of the object, instead of using an actual screen shot of the software. Re-creating the object is particularly important when users could confuse the icon with the actual interface.
Figure 10-7 The icons for QuickTime Player, DVD Player, and Calculator These icons, many of which are a precursor of what you’ll see when you open the application, use a straight-on perspective (rather than the “on a desktop” user application style). You never see the Calculator onscreen in three dimensions, for example, so its icon doesn’t depict it that way.
Utility Icons Icons for utility applications—which are used less often and not simply for fun or creative activities— convey a more serious tone than those for user applications. Color in these icons is desaturated, predominantly gray, and added only when necessary to clearly communicate what the applications do.
Figure 10-8 Discriminating use of color in the Activity Monitor and Printer Setup Utility icons Because utility applications are normally focused on a narrow set of tasks, it’s best to keep the number of elements in the icon to a minimum. The focus should be a single object that represents what the utility does. The perspective of utility icons is straight-on, as if they are on a shelf in front of you. For more information, see "Icon Perspectives and Materials ".
Document Icons Traditionally, a document icon looks like a piece of paper with its top-right corner folded down. As previously suggested, Aqua document icons should make it obvious which application they are associated with. Preview documents, for example, include a graphic of the media (the pictures) used in the application icon. For simplicity and to avoid confusing the document with the application itself, the viewing tool is not repeated in the document icon.
Figure 10-9 Icons for the Preview application and a Preview document Document icons are presented as if they are hovering on the desktop, with the shadow behind the document. For more information, see "Icon Perspectives and Materials ".
When you want to put an identifying badge over a document icon, treat the badge as an integrated element within the document instead of putting it over the top of the base image and breaking out of the overall document shape.
Figure 10-10 Incorrect and correct badging of a document icon Icons for Plug-ins Plug-in icons look like stackable components, with the associated application identifier on the left side and a plug-in–specific image on the right.
Figure 10-11 A plug-in icon Hardware and Removable Media Icons Hardware icons represent devices as you most often see them: on your desk. Because these devices are also frequently handled and carried, people are familiar with them as three-dimensional objects with weight. The Aqua treatment of hardware icons reinforces their association with real objects.
Figure 10-12 Icons for external (top row) and internal hardware devices To help users distinguish between external devices, their icons provide a region for an identifying symbol (FireWire, SCSI, and so on).
Removable media such as CDs, floppy disks, and PC cards are depicted the way they look when you hold them in front of you—that is, the perspective is straight-on.
Figure 10-13 Icons for removable media Toolbar Icons The primary purpose of a toolbar is to provide users with easy access to frequently used commands. Although toolbar icons should conserve screen real estate (32 pixels by 32 pixels is the recommended size), they should be inviting and easy to identify. The perspective of a toolbar icon is straight-on, as if it is sitting on a shelf in front of you.
Ideally, each toolbar icon should represent a unique object or action that is directly related to the command it represents. A toolbar can also contain icons that represent recognizable interface elements from elsewhere in the system (such as an Info button or an iDisk icon) when they make sense in the context of the application. If you choose to include an icon such as an Info button, be sure to preserve its meaning. Users expect such icons to mean the same thing in every context, so you should not redefine them when you use them in your toolbar.
Important: Do not use a system icon, such as the yellow caution icon, in your toolbar. A system icon provides important information to the user in a specific context, such as in an alert window; using it in a toolbar blurs its meaning and dilutes it effectiveness in the system.
Figure 10-14 shows some of the icons available in Xcode's toolbar (Xcode is the Mac OS X integrated development environment, or IDE).
Figure 10-14 Xcode toolbar icons Some of the icons in Figure 10-14 use familiar objects (a hammer, a can of bug spray, and a broom) as metaphors for frequently used Xcode commands (build a project, debug code, and clean a target, respectively). To represent the run action, Xcode uses the right-pointing triangle users associate with play or run in applications such as iTunes, Keynote, and Automator. The Xcode toolbar also contains the Info button users are accustomed to seeing in the Finder and in other applications in Mac OS X. As a general rule, a toolbar icon that depicts an identifiable, real-world object or recognizable user-interface element gives first-time users a clue to its function and helps experienced users remember it.
Making each toolbar icon distinct helps the user associate it with its purpose and locate it quickly. Variations in shape, color, and image all help to differentiate one toolbar icon from another. At the same time, however, an application's toolbar icons should harmonize together as much as possible in their perspective, use of color, size, and visual weight. For example, each icon in Figure 10-14 is unique, but all are similar in general size, perspective, and color saturation (intensity) and none appear more important than the others.
Although icons designed specifically for use in a toolbar appear as if they are sitting on a shelf in front of you, if you use a recognizable control from elsewhere in the interface (such as a pop-up menu), that control should retain its standard appearance and perspective. That is, don’t redesign a toolbar version of a well-known interface element.
Figure 10-15 The circled icons appear elsewhere in the interface; they retain their perspective when used in a toolbar Creating a family of visually related toolbar icons can strengthen the user's perception of your application as being well-integrated and well-designed. One way to do this is to start with a consistent theme for the style and appearance of the icons, then introduce variations when it makes sense. You might also consider using a variation of the application icon or an image symbolic of your application's purpose as a common element in toolbar icons. For example, Preview reuses the photo from its application icon in some of its toolbar icons, as shown in Figure 10-16.
Figure 10-16 Reusing the application icon image in toolbar icons
If you would like to report an abuse of our service, such as a spam message, please . Åñëè Âû õîòèòå ïîæàëîâàòüñÿ íà ñîäåðæèìîå ýòîé ñòðàíèöû, ïîæàëóéñòà .
offline
![:-\](http://qaix.com/i/smiles/confused.png ":-\"){kind=small}