Custom graphics aren't just about personality and visual moxie. Your app's visuals give users important cues for how to drive the thing, and that's especially true for its toolbar icons. The iPhone comes stocked with a set of standard button icons (page 145), but of course no icon set can keep up with the fertile imaginations of app developers and designers. When you've got a feature that has no standard icon—or when you want your icons to have their own non-standard style—you've got to design your own. Here are a few pointers.
Figure 6-8. Tab-bar and toolbar icons are always flat, two-dimensional stencils that blend well with the standard set. (The tab-bar icons shown here are black on white for readability on the page, but you should draw your own as white on a transparent background.) If you don't have the chops to build your own, several sites provide free or paid icon sets for download. The icons shown here, for example, are from a free set at www.glyphish.com.
First, the vital stats: tab bar icons should be 30 × 30 pixels, and icons for the toolbar and navigation bar should be 20 × 20 pixels. Don't fret over the colors for these images; the iPhone OS handles that for you, automatically managing the appearance of the pressed, selected, and idle states of all toolbar icons. Just draw your icon in pure white on a transparent background, and save it as a PNG image. Nothing fancy here: no drop shadows, no zany effects, just simple white, with alpha transparency for gradients or shading. When designing icons to complement the standard set, think stencil. Simple silhouettes make for crisp, legible icons. Every icon in your toolbar should be distinct not only from one another but also distinct from the built-in icons, which already have an established meaning for your audience.
Don't get too abstract or clever with your icons; aim for no-guesswork images that clearly suggest the action behind the button. Establishing a clear meaning is a tall order in just 20 or 30 pixels, and developing a good icon requires more effort and try-try-again revisions than most civilians might guess. Even Apple doesn't always get this right in its own apps. The built-in Maps app, for example, includes an inscrutable page-flip icon that consistently causes head scratching among first-time users. People tap it out of curiosity or trial and error, not because it's clear what it does. Tapping the button makes the screen curl back to reveal additional options like changing the style of map display. The icon illustrates the wrong thing—the nifty page-flip animation—instead of describing the actual actions the button reveals. When you watch people use this app in observation sessions, they often can't recall how to change the style of map even after they've accidentally stumbled on the feature once. The feature is hidden behind an icon whose meaning isn't clear.
Figure 6-9. The page-flip icon at the bottom right of the built-in Maps app doesn't describe the features you'll find when you tap it.
In the tab bar, text labels ease the designer's work by helping to explain the icon's meaning, but the role of the icon shifts. There, icons give additional context and personality to terse tab-bar text. When Mercury Intermedia designed the USA Today app (page 90), the team went through several versions of the app's Scores icon to get it right. Early attempts featured numbers and pixellated scoreboard treatments, but they didn't do enough to suggest the sports context. In the end, they moved away from a literal scoreboard image—the Scores label already said that—and used a pointing hand instead. With this wink to the giant foam fingers so ubiquitous at American sporting events, the result is an icon that suggests "sports fan," complementing and extending the meaning of the Scores text label without simply echoing it. (It's worth noting that the big foam finger has little meaning to sports fans outside the US. The USA Today app targets a primarily American audience, but when your app goes global, look out for imagery that might not translate.)
