iOS Developer Library

Developer

iOS 7 Design Resources iOS Human Interface Guidelines

Download PDF

Layout

Layout encompasses much more than just how UI elements look on an app screen. With your layout, you show users what’s most important, what their choices are, and how things are related. Depending on the device your app is running on—and on the device’s current orientation—your layout may vary.

Make it easy for people to interact with content and controls by giving each interactive element ample spacing. Give tappable controls a hit target of about 44 x 44 points.

image: ../Art/interact_with_content_r_2x.png
image: ../Art/interact_with_content_nr_2x.png

Make it easy to focus on the main task by elevating important content or functionality. Some good ways to do this are to place principal items in the upper half of the screen and—in left-to-right cultures—near the left side of the screen:

image: ../Art/focus_on_main_task_2x.png

Use visual weight and balance to show users the relative importance of onscreen elements. Large items catch the eye and tend to appear more important than smaller ones. Larger items are also easier for users to tap, which makes them especially useful in apps—such as Phone and Clock—that users often use in distracting surroundings.

image: ../Art/phone_hangup_button_2x.png

Use alignment to ease scanning and communicate groupings or hierarchy. Alignment tends to make an app look neat and organized and it gives users places to focus while they scroll through screenfuls of information. Indentation and alignment of different information groups indicate how the groups are related and make it easier for users to find specific items.

Make sure that users can understand primary content at its default size. For example, users shouldn’t have to scroll horizontally to read important text, or zoom to see primary images.

Be prepared for changes in text size. Users expect most apps to respond appropriately when they choose a different text size in Settings. To accommodate some text-size changes, you might need to adjust the layout; for more information about displaying text in your app, see Text Should Always Be Legible.

As much as possible, avoid inconsistent appearances in your UI. In general, elements that have similar functions should also look similar. People often assume that there must be a reason for the inconsistencies they notice, and they’re apt to spend time trying to figure it out.