Safari Developer Library

Developer

iOS 7 Design Resources iOS Human Interface Guidelines

Download PDF

Bars

The Status Bar

The status bar displays important information about the device and the current environment (shown below on iPhone).

Default (dark) content

image: ../Art/status_bar_default_2x.png

Light content

image: ../Art/status_bar_light_2x.png

The status bar:

  • Is transparent

  • Always appears at the upper edge of the device screen

Don’t create a custom status bar. Users depend on the consistency of the system-provided status bar. Although you might hide the status bar in your app, it’s not appropriate to create custom UI that takes its place.

Prevent scrolling content from showing through the status bar. As users scroll, you don’t want them to see a confusing mix of app content and status bar items in the status bar area. To give users the impression of spaciousness while still ensuring maximum readability, make sure the status bar has a background that obscures the content behind it. Here are a few ways to keep scrolling content from showing through the status bar:

  • Use a navigation controller to display content. A navigation controller automatically displays a status bar background and it ensures that its content views don’t appear behind the status bar. (To learn more about navigation controllers, see “Navigation Controllers”.)

  • Create a nondistracting custom image—such as a gradient—and display it behind the status bar. To ensure that the image stays behind the status bar, you could use a view controller to keep the image above a scrolling view or you could use a scrolling view to keep it pinned to the top.

  • Position content to avoid the status bar area (that is, the area defined by the app’s statusBarFrame property). If you do this, you should use the window’s background color to provide a solid color behind the status bar.

Avoid putting distracting content behind the status bar. In particular, you don’t want to imply that users should tap the status bar to access content or activate controls in your app.

Think twice before permanently hiding the status bar. Because the status bar is transparent, it’s not usually necessary to hide it. Permanently hiding the status bar means that users must switch away from your app to read the time or to find out whether they have a Wi-Fi connection.

Consider hiding the status bar—and all other app UI—while people are actively viewing full-screen media. If you hide the status bar, be sure to let people retrieve it (and the appropriate app UI) with a single tap. Unless you have a compelling reason to do so, avoid defining a custom gesture to redisplay the status bar because users are unlikely to discover such a gesture or to remember it.

Choose a status bar content color that coordinates with your app. The default appearance displays dark content, which looks good on top of light-colored app content. The light status bar content looks good on top of dark-colored app content.

When appropriate, display the network activity indicator. The network activity indicator can appear in the status bar to show users that lengthy network access is occurring. To learn how to implement this indicator in your code, see Network Activity Indicator.

Navigation Bar

A navigation bar enables navigation through an information hierarchy and, optionally, management of screen contents.

image: ../Art/nav_bar_iphone_2x.png
image: ../Art/nav_bar_ipad_7_2x.png

A navigation bar:

  • Is translucent

  • Generally appears at the top of an app screen, just below the status bar

    On iPad, a navigation bar can also display within a view that doesn’t extend across the screen, such as one pane of a split view controller.

  • Can automatically change its height when an iPhone changes orientation

    Maintains the same height in all orientations on iPad

Use a navigation bar to enable navigation among different views and—if appropriate—to provide a control that manages the items in a view. If you need to provide a larger set of controls and you don’t need to enable navigation, consider using a toolbar instead (to learn more, see Toolbar).

When the user goes to a new level in a navigation hierarchy, two things should happen:

  • The navigation bar title should change to the new level’s title, if appropriate.

  • A back button should appear in the left end of the bar, and it should be labeled with the previous level’s title.

image: ../Art/nav_bar_title_not_required_2x.png

When it adds value, use the title of the current view as the title of the navigation bar. If titling a navigation bar seems redundant, you can leave the title empty. For example, Notes doesn’t title the current note because the first line of content supplies all the context users need.

Consider putting a segmented control in a navigation bar at the top level of an app. This is especially useful if doing so helps to flatten your information hierarchy, making it easier for people to find what they’re looking for. If you use a segmented control in a navigation bar, be sure to choose accurate back-button titles. (For usage guidelines, see Segmented Control.)

If necessary, consider using a prompt to clarify what users can do in the current screen. A prompt is a brief sentence that appears near the top of the navigation bar. For example, Stocks uses a prompt to make sure users understand how to find the information they want.

image: ../Art/prompt_stocks_2x.png

If you need to use a prompt, write a succinct, one-line sentence that uses appropriate ending punctuation.

Avoid crowding a navigation bar with additional controls, even if it looks like there’s enough space. In general, a navigation bar should contain no more than the view’s current title, the back button, and one control that manages the view’s contents. If you use a segmented control in the navigation bar, the bar shouldn’t display a title and it shouldn’t contain any controls other than the segmented control.

Make sure text-titled buttons have enough space between them. If there isn’t enough space between multiple left or right bar button items in a navigation bar, the text titles can appear to run together, making it difficult for users to distinguish them. If button titles look too close together in your navigation bar, use UIBarButtonSystemItemFixedSpace to add the appropriate spacing between them. (To learn more about this constant, see UIBarButtonItem Class Reference.)

As much as possible, make sure that the look of a customized navigation bar is consistent throughout your app. For example, don’t combine an opaque navigation bar with a translucent toolbar. Also, it’s best to avoid changing the image, color, or translucency of the navigation bar in different screens in the same orientation.

Make sure that a customized back button still looks like a back button. Users know that the standard back button allows them to retrace their steps through a hierarchy of information. If you decide to replace the system-provided chevron with a custom image, be sure to supply a custom mask image, too. iOS 7 uses the mask to make the button title appear to emerge from—or disappear into—the chevron during transitions.

On iPhone, be prepared for the change in navigation bar height that occurs on device rotation. In particular, make sure that your custom navigation bar icons fit well in the thinner bar that appears in landscape orientation. Don’t specify the height of a navigation bar programmatically; instead, take advantage of the UIBarMetrics constants to ensure that your content fits well.

Toolbar

A toolbar contains controls that perform actions related to objects in the screen or view.

image: ../Art/mail_toolbar_iphone_2x.png
image: ../Art/mail_toolbar_ipad_2x.png

A toolbar:

  • Is translucent

  • Always appears at the bottom edge of a screen or view on iPhone

    Can also appear at the top edge of the screen or view on iPad.

  • Can automatically change its height when an iPhone changes orientation

    Maintains the same height in all orientations on iPad.

Use a toolbar to provide a set of actions users can take in the current context.

Include the most frequently used commands that make sense in the current context. As much as possible, avoid using a toolbar to provide commands that are only occasionally useful.

Consider using a segmented control to provide access to different perspectives or modes in the current context. It’s not a good idea to use a segmented control in a toolbar to show app-level tasks or modes, because a toolbar is specific to the current screen or view. If you need to give people access to primary tasks, views, or modes in your app, use a tab bar instead. To learn more about segmented controls, see Segmented Control; to learn more about tab bars, see Tab Bar.

Use icons if you need to put more than three items in a toolbar. Because text-titled buttons typically use more space than icons, it can be difficult to keep the titles from running together.

Make sure text-titled buttons have enough space between them. If there isn’t enough space between two or more buttons in a toolbar, the text titles can appear to run together and users can find it difficult to distinguish between them. If button titles look too close in your toolbar, use UIBarButtonSystemItemFixedSpace to add the appropriate spacing between them. (To learn more about this constant, see UIBarButtonItem Class Reference.)

On iPhone, be prepared for the change in toolbar height that occurs on device rotation. In particular, make sure your custom toolbar icons fit well in the thinner bar that appears in landscape orientation. Don’t specify the height of a toolbar programmatically; instead, take advantage of the UIBarMetrics constants to ensure that your content fits well.

Toolbar and Navigation Bar Buttons

iOS provides many of the standard toolbar and navigation bar buttons that are used in the built-in apps. To learn how to design custom bar icons, see Bar Button Icons. Items in the toolbar and navigation bar can be tinted using the tintColor property.

To find out which symbol names to use to specify the buttons described in Table 35-1, see the documentation for UIBarButtonSystemItem in UIBarButtonItem Class Reference.

Table 35-1Standard buttons available for toolbars and navigation bars

Button

Name

Meaning

image: ../Art/UIBarButtonAction_2x.png

Share

Open an action sheet that lists system-provided and app-specific services that act on the specified content.

image: ../Art/UIBarButtonCamera_2x.png

Camera

Open an action sheet that displays a photo picker in camera mode.

image: ../Art/UIBarButtonCompose_2x.png

Compose

Open a new message view in edit mode.

image: ../Art/UIBarButtonBookmarks_2x.png

Bookmarks

Show app-specific bookmarks.

image: ../Art/UIBarButtonSearch_2x.png

Search

Display a search field.

image: ../Art/UIBarButtonAdd_2x.png

Add

Create a new item.

image: ../Art/UIBarButtonTrash_2x.png

Trash

Delete current item.

image: ../Art/UIBarButtonOrganize_2x.png

Organize

Move or route an item to a destination within the app, such as a folder.

image: ../Art/UIBarButtonReply_2x.png

Reply

Send or route an item to another location.

image: ../Art/UIBarButtonRefresh_2x.png

Refresh

Refresh contents (use only when necessary; otherwise, refresh automatically).

image: ../Art/UIBarButtonPlay_2x.png

Play

Begin media playback or slides.

image: ../Art/UIBarButtonFastForward_2x.png

FastForward

Fast forward through media playback or slides.

image: ../Art/UIBarButtonPause_2x.png

Pause

Pause media playback or slides (note that this implies context preservation).

image: ../Art/UIBarButtonRewind_2x.png

Rewind

Move backwards through media playback or slides.

In addition to the buttons shown in Table 35-1, you can also use the system-provided Edit, Cancel, Save, Done, Redo, and Undo buttons to support editing or other types of content manipulation in your app. The appearance of each of these buttons is provided by its text title. To find out which symbol names to use to specify these buttons, see the documentation for UIBarButtonSystemItem in UIBarButtonItem Class Reference.

Finally, you can also use the system-provided Info button in a toolbar:

image: ../Art/info_button_2x.png

Tab Bar

A tab bar gives people the ability to switch between different subtasks, views, or modes in an app.

image: ../Art/music_tab_bar_iphone_2x.png
image: ../Art/music_tab_bar_ipad_2x.png

A tab bar:

  • Is translucent

  • Always appears at the bottom edge of the screen

  • Displays no more than five tabs at one time on iPhone (if there are more tabs, the tab bar displays four of them and adds the More tab, which reveals the additional tabs in a list)

  • Maintains the same height in all orientations

  • Can display a badge on a tab to communicate app-specific information (a badge is a red oval containing white text and either a number or exclamation point)

Use a tab bar to give users access to different perspectives on the same set of data or different subtasks related to the overall function of your app.

In general, use a tab bar to organize information at the app level. A tab bar is well suited for use in the main app view because it’s a good way to flatten your information hierarchy and provide access to several peer information categories or modes at one time.

Don’t use a tab bar to give users controls that act on elements in the current screen or app mode. If you need to provide controls, including a control that displays a modal view, use a toolbar instead (for usage guidelines, see Toolbar).

Don’t remove a tab when its function is unavailable. If you remove a tab in some cases but not in others, you make your app’s UI unstable and unpredictable. The best solution is to ensure that all tabs are enabled, but explain why a tab’s content is unavailable. For example, if the user doesn’t have any songs on an iOS device, the Songs tab in the Music app displays a screen that explains how to download songs.

Consider badging a tab bar icon to communicate unobtrusively. You can display a badge on a tab bar icon to indicate that there is new information associated with that view or mode.

On iPad, you might use a tab bar in a split view pane or a popover. Do so if the tabs switch or filter the content within that view. However, it often works better to use a segmented control at the bottom edge of a popover or split view pane, because the appearance of a segmented control coordinates better with the popover or split view appearance. (For more information on using a segmented control, see Segmented Control.)

On iPad, avoid crowding the tab bar with too many tabs. Putting too many tabs in a tab bar can make it physically difficult for people to tap the one they want. And with each additional tab you display, you increase the complexity of your app. In general, try to limit the number of tabs in the main view or in the right pane of a split view to about seven. In a popover or in the left pane of a split view, up to about five tabs fit well.

On iPad, avoid creating a More tab. In an iPad app, a screen devoted solely to a list of additional tabs is a poor use of space.

Display the same tabs in each orientation of an iPad app to increase visual stability. In portrait orientation, the recommended seven tabs fit well across the width of the screen. In landscape orientation, you should center the same tabs along the width of the screen. This guidance also applies to the usage of a tab bar within a split view pane or a popover. For example, if you use a tab bar in a popover in portrait, it works well to display the same tabs in the left pane of a split view in landscape.

Tab Bar Icons

iOS provides the standard icons described in Table 35-2 for use in tab bars. To learn how to design custom tab bar icons, see Bar Button Icons. Tab bar icons can be tinted using the tintColor property.

To find out which symbol names to use to specify these icons, see the documentation for UITabBarSystemItem in UITabBarItem Class Reference.

Table 35-2Standard icons for use in the tabs of a tab bar

Icon

Name

Meaning

image: ../Art/UITabBarBookmarks_2x.png

Bookmarks

Show app-specific bookmarks.

image: ../Art/UITabBarContacts_2x.png

Contacts

Show contacts.

image: ../Art/UITabBarDownloads_2x.png

Downloads

Show downloads.

image: ../Art/UITabBarFavorites_2x.png

Favorites

Show user-determined favorites.

image: ../Art/UITabBarFeatured_2x.png

Featured

Show content featured by the app.

image: ../Art/UITabBarHistory_2x.png

History

Show history of user actions.

image: ../Art/UITabBarMore_2x.png

More

Show additional tab bar items.

image: ../Art/UITabBarMostRecent_2x.png

MostRecent

Show the most recent item.

image: ../Art/UITabBarMostViewed_2x.png

MostViewed

Show items most popular with all users.

image: ../Art/UITabBarRecents_2x.png

Recents

Show the items accessed by the user within an app-defined period.

image: ../Art/UITabBarSearch_2x.png

Search

Enter a search mode.

image: ../Art/UITabBarTopRated_2x.png

TopRated

Show the highest-rated items, as determined by the user.

Search Bar

A search bar accepts text from users, which can be used as input for a search (shown here with placeholder text).

image: ../Art/search_bar_2x.png

A search bar can display optional elements, such as these:

  • Placeholder text. This text might state the function of the control (for example, “Search” as shown above) or remind users in what context they are searching (for example, “Google”).

  • The Bookmarks button. This button can provide a shortcut to information users want to easily find again. For example, the Bookmarks button in the Maps search mode gives access to bookmarked locations, recent searches, and contacts.

    image: ../Art/search_bar_bookmarks_2x.png

    The Bookmarks button is visible only when there is no user-supplied or nonplaceholder text in the search bar. When the search bar contains such text, the Clear button appears so that users can erase the text.

  • The Clear button. Most search bars include a Clear button that lets users erase the contents of the search bar with one tap.

    image: ../Art/search_bar_clear_2x.png

    When the search bar contains any nonplaceholder text, the Clear button is visible so users can erase the text. If there is no user-supplied or nonplaceholder text in the search bar, the Clear button is hidden.

  • The results list icon. This icon indicates the presence of search results. When users tap the results list icon, an app can display the results of their most recent search.

    image: ../Art/search_bar_results_2x.png
  • A prompt. A descriptive title, called a prompt, can be placed above the search bar. A prompt is a short, complete sentence that provides introductory or app-specific context for the search bar.

    image: ../Art/search_bar_prompt_2x.png

Use a search bar to enable search in your app. Don’t use a text field to enable search because it doesn’t have the standard search bar appearance that users expect.

In iOS 7 and later, using UISearchDisplayController makes it easy to put a search bar in a navigation bar. Note that when a search display controller’s view controller is contained within a navigation controller—as is the case in Mail—the search bar automatically transitions into the navigation bar when users initiate a search.

Choose a search bar style that complements the importance of search in your app. If search is a primary function in your app, you may want to use the prominent style; if users don’t need to search very often, you may want to use the minimal style.

The prominent search bar style (shown in Mail)

image: ../Art/search_bar_prominent_2x.png

The minimal search bar style (shown in Music)

image: ../Art/search_bar_minimal_2x.png

Scope Bar

A scope bar—which is available only in conjunction with a search bar—helps users define the scope of a search.

image: ../Art/scope_bar_2x.png

When a search bar is present, a scope bar can appear near it. A scope bar adopts the same appearance that you specify for the search bar.

It can be useful to display a scope bar when there are clearly defined or typical categories in which users might want to search. However, it’s even better to improve search results so that users don’t need to scope their search.