System-Provided Buttons and Icons

To promote a consistent user experience (and to make your job easier), iOS provides numerous standard buttons for use in navigation bars and toolbars, and icons for use in tab bars.

This chapter describes the standard icons and buttons available to you and provides guidelines on how to use them appropriately. You should familiarize yourself with the buttons and icons in this chapter regardless of the type of application you’re developing, so that you can:

• Use the system-provided items correctly

• Avoid designing a custom icon that looks too similar to a system-provided icon

Using System-Provided Buttons and Icons

iOS makes available many of the standard toolbar and navigation bar buttons, tab bar items, and general-use buttons used throughout the built-in applications. You can see a handful of standard toolbar buttons in the Mail toolbar, shown in Figure 10-1.

Buttons such as the Refresh, Organize, Trash, Reply, and Compose buttons shown in Figure 10-1 are used consistently in many of the built-in applications, so users are well-acquainted with what they mean and how to use them. This means that if your application supports these functions, you can take advantage of users’ familiarity to streamline the application’s user interface. It also means that if you associate these buttons with other tasks, you’re likely to confuse and irritate users by promising functionality they expect, but delivering something else.

In addition to the benefit of leveraging users’ prior experience, using system-provided buttons and icons imparts two other substantial advantages, specifically:

• Decreased development time, because you don‚Äôt have to create custom art to represent standard functions.

• Increased stability of your user interface, even if future iOS updates change the appearances of standard icons. In other words, you can rely on the semantic meaning of a standard icon remaining the same, even if its appearance changes.

It bears repeating that to realize the advantages of user familiarity, shorter development time, and semantic consistency of the user interface, you must use the buttons and icons appropriately. Specifically, this means that you should use a button or icon in accordance with its documented meaning and recommended placement, and not according to your interpretation of its appearance. See “Standard Buttons for Use in Toolbars and Navigation Bars,” “Standard Icons for Use in Tab Bars,” and “Standard Buttons for Use in Table Rows and Other User Interface Elements” for meaning and placement information for the system-provided buttons and icons.

Interface Builder makes it easy to use the system-provided buttons and apply system-provided icons to your controls. See the appearance-related information in “iOS Interface Objects” in Interface Builder User Guide for guidance.

If you can’t find a system-provided toolbar or navigation bar button or tab bar item icon that has the appropriate meaning for a specific function in your application, you should design a custom button or icon. “Icons for Navigation Bars, Toolbars, and Tab Bars” gives some guidelines to help you do this.

Standard Buttons for Use in Toolbars and Navigation Bars

iOS makes many of the standard buttons users see in toolbars and navigation bars available to you. These buttons, shown in Table 10-1, are available in two styles, each of which is appropriate for the specific usages described here:

• Bordered style‚Äîfor example, the Add button in the Phone Contacts navigation bar. This style is suitable for both navigation bars and toolbars.

• Plain style‚Äîfor example, the Compose button in the Mail toolbar. This style is suitable for toolbars only. In fact, if you specify the plain style for a button in the navigation bar, it will be converted to the bordered style.

As with all system-provided buttons, you should avoid using the buttons described in Table 10-1 to represent actions other than those for which they are designed. In particular, avoid choosing a button based on its appearance, without regard for its documented meaning. See ‚ÄúUsing System-Provided Buttons and Icons‚Äù for a discussion of the reasons why it‚Äôs important to use these icons correctly. (Information on symbol names and availability for these buttons is available in documentation for UIBarButtonSystemItem.)

In addition to the buttons shown in Table 10-1, you can also use the system-provided Edit, Cancel, Save, and Done buttons shown in Table 10-2 to support editing or other types of content manipulation in your application. (Information on symbol names and availability for these buttons is available in documentation for UIBarButtonSystemItem.) These buttons are suitable for both navigation bars and toolbars, and are available in the bordered style only. If you specify the plain style for one of these buttons, it will be converted to the bordered style.

Standard Icons for Use in Tab Bars

iOS provides the standard icons described in Table 10-3 for use in tab bars. Information on symbol names and availability for these icons is in documentation for UITabBarSystemItem.

As with all standard buttons and icons, it’s essential to use these icons in accordance with their documented meanings. In particular, take care to base your usage of an icon on its semantic meaning, not its appearance. This will help your application’s user interface make sense even if the icon associated with a specific meaning changes its appearance. See “Using System-Provided Buttons and Icons” for further reasons why it’s important to use these icons correctly.

Standard Buttons for Use in Table Rows and Other User Interface Elements

iOS provides a few buttons for use in table rows and other elements. These buttons, described in Table 10-4, should be used semantically correctly, as with all standard buttons and icons. In particular, avoid choosing a button based on its appearance, without regard for its documented meaning. See “Using System-Provided Buttons and Icons” for a discussion of the reasons why it’s important to use these buttons correctly.

Although the detail disclosure button is usually used in table rows, it can be used elsewhere. For more information about this button, see “Detail Disclosure Buttons.” iOS also provides a set of controls for use in table rows only; for more information about these, see “Table-View Elements.”

For more information on symbol names and availability for these buttons, see documentation for UIButtonType. (For information on the symbol name and availability for the detail disclosure table-view element, see documentation for UITableViewCellAccessoryDetailDisclosureButton.)

---