Safari Developer Library

Developer

iOS 7 Design Resources iOS Human Interface Guidelines

Download PDF

Designing for iOS 7

iOS 7 embodies the following themes:

  • Deference. The UI helps users understand and interact with the content, but never competes with it.

  • Clarity. Text is legible at every size, icons are precise and lucid, adornments are subtle and appropriate, and a sharpened focus on functionality motivates the design.

  • Depth. Visual layers and realistic motion impart vitality and heighten users’ delight and understanding.

Weather in iOS 7

image: ../Art/weather_app_7_2x.png

Weather in iOS 6

image: ../Art/weather_app_6_2x.png

Whether you’re redesigning an existing app or creating a new one, consider approaching the job in the way that Apple approached the redesign of the built-in apps:

  • First, strip away the UI to expose the app’s core functionality and reaffirm its relevance.

  • Next, use the themes of iOS 7 to inform the design of the UI and the user experience. Restore details and embellishments with care and never gratuitously.

  • Throughout, be prepared to defy precedent, question assumptions, and let a focus on content and functionality motivate every design decision.

Defer to Content

Although crisp, beautiful UI and fluid motion are highlights of the iOS 7 experience, the user’s content is at its heart.

Here are some ways to make sure that your designs elevate functionality and defer to the user’s content.

image: ../Art/weather_focus_2x.png

Take advantage of the whole screen. Reconsider the use of insets and visual frames and—instead—let the content extend to the edges of the screen. Weather is a great example of this approach: The beautiful, full-screen depiction of a location’s current weather instantly conveys the most important information, with room to spare for hourly data.

Reconsider visual indicators of physicality and realism. Bezels, gradients, and drop shadows sometimes lead to heavier UI elements that can overpower or compete with the content. Instead, focus on the content and let the UI play a supporting role.

image: ../Art/restrain_visual_indicators_2x.png
image: ../Art/embrace_translucency_2x.png

Let translucent UI elements hint at the content behind them. Translucent elements—such as Control Center—provide context, help users see that more content is available, and can signal transience. In iOS 7, a translucent element blurs only the content directly behind it—giving the impression of looking through rice paper—it doesn’t blur the rest of the screen.

Provide Clarity

Providing clarity is another way to ensure that content is paramount in your app. Here are some ways to make the most important content and functionality clear and easy to interact with.

image: ../Art/use_white_space_2x.png

Use plenty of negative space. Negative space makes important content and functionality more noticeable and easier to understand. Negative space can also impart a sense of calm and tranquility, and it can make an app look more focused and efficient.

Let color simplify the UI. A key color—such as yellow in Notes—highlights important state and subtly indicates interactivity. It also gives an app a consistent visual theme. The built-in apps use a family of pure, clean system colors that look good at every tint and on both dark and light backgrounds.

image: ../Art/notes_color_2x.png
image: ../Art/mail_message_fonts_2x.png

Ensure legibility by using the system fonts. iOS 7 system fonts automatically adjust letter spacing and line height so that text is easy to read and looks great at every size. Whether you use system or custom fonts, be sure to adopt Dynamic Type so your app can respond when the user chooses a different text size.

Embrace borderless buttons. In iOS 7, all bar buttons are borderless. In content areas, a borderless button uses context, color, and a call-to-action title to indicate interactivity. And when it makes sense, a content-area button can display a thin border or tinted background that makes it distinctive.

image: ../Art/contact_card_2x.png

Use Depth to Communicate

iOS 7 often displays content in distinct layers that convey hierarchy and position, and that help users understand the relationships among onscreen objects.

image: ../Art/folder_2x.png

By using a translucent background and appearing to float above the Home screen, folders separate their content from the rest of the screen.

Reminders displays lists in layers, as shown here. When users work with one list, the other lists are collected together at the bottom of the screen.

image: ../Art/layered-reminders_2x.png
image: ../Art/cal_year_2x.png

Calendar uses enhanced transitions to give users a sense of hierarchy and depth as they move between viewing years, months, and days. In the scrolling year view shown here, users can instantly see today’s date and perform other calendar tasks.

When users select a month, the year view zooms in and reveals the month view. Today’s date remains highlighted and the year appears in the back button, so users know exactly where they are, where they came from, and how to get back.

image: ../Art/cal_month_2x.png
image: ../Art/cal_day_2x.png

A similar transition happens when users select a day: The month view appears to split apart, pushing the current week to the top of the screen and revealing the hourly view of the selected day. With each transition, Calendar reinforces the hierarchical relationship between years, months, and days.