Designing for iOS 10

iOS 10 Design Guidelines for iPhone and iPad

While Apple calls iOS 10 their biggest release ever, most of the new features are consumer-facing, like Widgets, Siri/Messages integration, and expanded notifications.

For designers, the only noticeable design changes are bolder titles and bigger use of cards, as seen in native apps like Music and News. Whereas iOS 7 started with a widespread use of thin fonts, iOS 10 is going back to using bolder texts.

Platform maturity

iOS has matured a lot over the years. In its 9th upgrade, Apple introduced a new system font called San Francisco, 3D Touch and multi-tasking on the iPad. In Xcode, you’ll find Stack Views, a fantastic tool for making your layouts more adaptive without the complexity of Auto Layout. More than ever, Apple encourages adaptive layouts so that your design works across multiple devices.

Adaptive Layout and Multitasking

With the increasing number of device resolutions to deal with, it is crucial to make your layout adaptive. Using tools like Sketch Constraints or Xcode, you have to design in a way that the screen size is flexible and can show extra menus if needed.Here’s how the layout adapts from iPhone to iPad Pro. The user interface expands rather than scale up. For larger screens such as the iPad and the iPhone 7 Plus in landscape mode, a Left Navigation will appear instead of the Tab Bar. Download the Keynote file here.

San Francisco Font

The default font is now the San Francisco font, which is made in-house by Apple. I encourage you to watch the video to understand how it affects the design for iOS.

SF Font Tracking

iOS automatically adjusts the tracking value and Text/Display for San Francisco based on the font size. This ensures that the typeface is always easy to read. At 20 pt or more, SF UI Display should be used, otherwise use SF UI Text. These tracking values can only be applied in Photoshop, but here’s a formula for converting in Sketch.

Use this Sketch plugin to quickly apply the correct character spacing values.

3D Touch

A key new feature in iOS is called 3D Touch, allowing people to quickly access options inside and outside of your app.

Users can now force-press your App Icon and find frequently used items. Inside an app, mails can be peeked and links can be previewed before entering full-screen.Think of 3D Touch like the keyboard shortcuts on your Mac — they enable people to do repeated tasks quicker. You have to design shortcuts that make power users more productive. But just like Keyboard shortcuts, essential features shouldn’t be exclusive to 3D Touch. Your users must be able to operate your app normally without it.

Points and Pixels

Developers work with point values, so it is important to understand the difference with pixels. When the iPhone was first introduced, the two units were the same: 1pt equals 1px. Then when retina screens came along, 1pt became 2px. So think of points as the values in the original iPhone, and pixels as the real values depending on the pixel density (iPhone 4,5,6 = @2x, iPhone 7 Plus = @3x).

For more info, check out this guide.

iPhone Resolutions

The iPhone has 4 main resolutions: 320 x 480 pt (iPhone 4), 320 x 568 pt (iPhone 5), 375 x 667 pt (iPhone 7) and 414 x 736 pt (iPhone 7 Plus). The layout doesn’t scale but expands based on the resolution. For example, the Navigation Bar only adjusts the width but keeps the same height. Elements inside it remain intact.

The iPhone 7 Plus is the only iPhone that acts more like an iPad in Landscape mode. In other words, a Left Navigation will appear, replacing the need for the Tab Bar.

iPad Resolutions

The iPad has 2 main resolutions: 768 x 1024 pt (iPad), 1024 x 1366 pt (iPad Pro).

The iPad has 2 new features: Slide Over and Split View. Slide Over is an overlay that appears on the right of the screen without affecting the current app’s layout.

Split View allows users to multitask by running 2 apps simultaneously next to each other in Portrait mode.

App Icon

The App Icon is used for the branding of your app. It’s the first thing that users see when they experience it. It appears prominently on the Home screen, the App Store, in Spotlight and Settings.

@1x assets are no longer supported for the iPhone, so you don’t need to generate them. App icons have 2 resolutions now: @2x and @3x. There are 3 types: App Icon, Spotlight and Settings. For the iPad, @1x and @2x are used.

Super-Ellipse

Since iOS 7, the rounded corners have shifted from plain rounded corners to a super-ellipse shape. It is important to keep note that you shouldn’t export the icons with the mask, or you’ll potentially find black artifacts. Instead, just export square assets to the App Store.

Icon Grid

Apple applied a golden ratio on some of their icons. This ensures that the icons are the heroes while keeping good proportions. While this is a good rule to follow, it’s not a strict rule. Even Apple omitted it on many of their icons.

Colors

iOS uses vibrant colors to bring out the buttons. These colors tend to work well against a white background as much as a black background. Keep in mind that colors should be used sparsely, for call-to-actions and minimal branding areas like the navigation bar. Roughly, only 10–20% of your design should have colors, or they will compete too much against the content.

iOS often uses neutral colors to serve as the background and menu areas. A well-contrasted black text against a white background is used to make the text comfortable to read. Finally, the pastel blue is applied for making the buttons stand out.

Button and Font Sizes

The general rule is 44pt for buttons and 12pt for small text, 17pt for body text and 20pt+ for titles.

Spacing and Alignment

A general rule is to have a minimum padding or margin of 8pt. This creates enough breathing room, which makes the layout easier to scan and the text more readable. Also, UI elements should be aligned and texts should have the same baseline position.

Status Bar

It is recommended to include the status bar in as many places as you can. Users rely on it for important information such as signal, time and battery. The text and icons can be white or black, but the background can be customized into any color and merge with the Navigation Bar.

Navigation Bar

The Navigation Bar is used for quick information about the screen. The left portion can be used for placing Back, Profile, Menu buttons whereas the right portion is generally used for action buttons like Add, Edit, Done. Note that if you use any of these system icons, you don’t need to create assets for them.

Just like the Status Bar, the background can be customized to any color and typically has a subtle blur to ensure that the text is always readable. When the Status Bar is present, both backgrounds are merged.

Search Bar

When you have a lot of content, it is always wise to make it searchable.

Toolbar

When you need more real estate to place your action buttons and screen status, you’ll want to use the Toolbar.

Tab Bar

The Tab Bar is the main navigation between multiple screens. Avoid the Hamburger menu if you have few items. Menus that are always visible will increase usage since obvious always win. Additionally, it is encouraged to add text next to your icons as most people won’t instantly recognize symbols, especially when they’re not universally known.

When they’re not active, icons will generally have an outline instead of being filled. Like this, they attract less attention.

Table View

The Table View is a very common user interface for listing content. Most apps use a form of Table View. That’s because it can be very basic, or highly customizable down to the smallest elements.

At the basic level, you can use a number of preset Styles and Accessories.

Cells can also be grouped, with a title above and description underneath.

Collection View

When you have both rows and columns in a grid style, you’ll need the Collection View. Although a little more advanced, it can pretty much create any layout you can dream of.

Collection View layouts may look like these, or a combination of them. The possibilities are endless.

Modals

The Alert dialog is used for conveying critical information and prompting quick actions. Alerts should be kept minimal and exiting must be obvious.

The Activity dialog allows you to share content (text, images, links) to iOS features like Airdrop, Favorites, Bookmarks and apps like Mail, Facebook, Twitter. While the look can’t be customized, the options are.

When the information presented isn’t short, you can design a modal that is full-sized, typically appearing from a slide, fade, flip or page animation. Like other modals, it must be easy to cancel and kept as short as possible.

Keyboards

The keyboard is used to input information in text fields such as search, chat or login. It’s highly customizable, for URL, Email, Phone numbers and even Emoji. You can choose between the Light and Dark themes, as well as how the action button is named (return being the default).

There’s a good Keyboard Kit for Sketch that you should download.

Picker

When you have multiple options to choose from, you can use the Picker control. It’s particularly useful for dates, which controls 3 fields in one action.

Segmented Control

While the Tab Bar navigates to the main sections, the Segmented Control is used for sub-sections.

Sliders

Sliders are interactive controls that are less precise, but extremely useful for quick settings like Sound, Brightness and Video Progress.

Progress

The Progress bar is an indicator showing how far an activity has gone. For example, you can use this to show the loading progress of a Web View. Note that the height can be customized.

Switch

Use this to quickly toggle between on and off. Do not use this for anything else than on / off.

Stepper

Slower but more precise than the Slider, the Stepper allows the user to increase or decrease a value by an increment of one. The border and background are customizable.

iOS Icons

These are the native icons that permeate iOS. Since they’re commonly used, they’re instantly recognized by users for their meaning. Using them for other purposes may confuse your users, so it’s important to be aware of how they’re used in iOS.

When you design custom icons outside of these, it is important to use well-known symbols. Additionally, I strongly recommend to always accompany them with a small text of 10pt or more.

Resources

These templates are not only useful for study but also to re-use and customize, so you don’t have to start from scratch and open the possibility for errors. As you get more comfortable with them, you’ll be able to get creative.

Reference and Source: https://designcode.io/iosdesign-guidelines