IOS Design Guide

Sometimes it's not easy to design apps for iOS, but if you can find the right latest Apple device information and follow the right direction, it might be easier to design an app for iOS.

About these guides

These guides describe how to design an app with Apple's human-computer interaction guide, rather than the design of a custom control, and sometimes it's important to break the rules. The purpose of this document is not to provide a solution for some complex design problems. The document is unofficial and will be updated and expanded on a regular basis, with the most recent update being November 11, 2014.

Resolution and display specifications (resolutions and displays specifications)

The difference between Points and pixels

Pixels (pixels) is the smallest physical element we can control on a digital display, with multiple pixels in a particular screen size, and the higher the PPI (pixels-per-inch), the clearer the content will be rendered.

The points is used to measure resolution. Depending on the pixel density of the screen, a point can contain multiple pixels (for example, on a regular Retina screen, 1pt contains 2 x 2 pixels).

When you design for multiple display types, you should think with points, but design with pixels. This means that you still need to export your design assets at 3 different resolutions, regardless of the resolution you are designing your application for.

IPhone 6+ Reduced pixel sampling

rendering pixels on iOS and physical pixels (physical pixels) is equivalent, with only one exception: the IPhone 6 Plus Retina HD display. Because the pixel resolution of the screen is lower than a regular @3x resolution, the rendered content is automatically adjusted to 87% of the original size (from 2208*1242 pixels to the display resolution of 1920*1082 pixels)

For more information on the difference between the iphone 5S, 6 and 6+ displays, see: The Ultimate Guide to the iphone resolutions

APP Icons

Automatically apply effects

The multi-size app icon is often added to the app package, and when rendered on the device, iOS applies the effect to the app icon.

(1) Fillet

The fillet radius value no longer exists. Starting with iOS 7, app icon has used a super-oval shape. Since Apple doesn't have an official template for that shape, you'll need to use unofficial templates exactly.

Rounded shapes should not be included in the final output asset, but if you want to add strokes and shadows that align with the app's icon corners, you might also use rounded corners.

Reminder: Because you want to align the app effect with the icon corner, if you are masking (masking) the icon asset with a shape with a super ellipse, make sure that no transparent graphics are used in areas outside the mask. Application icon does not support transparency, but rather renders as pure black. If your mask is not hundred percent accurate, the user will see black jagged edges at the corner of the fillet. It is recommended to set the background of the canvas to the same background as the app icon.

(2) border strokes (in some cases)

If you use an app icon that has a white background, the 1pixel gray border will be applied to make it easier to identify the edge of the icon. This can only be done in the Settings app and App Store.

(3) Follow-up questions (IOS 6 and previous versions)

In older versions of iOS, these effects are automatically applied: rounded corners that can be disabled (different from the icons used in iOS 7+), shadow effects on the home screen, and Sekisawa effects.

Grid system

Apple has developed a grid system with a golden ratio that can be used to properly adjust and align elements on the icon. However, even the Apple designer's native app icon does not strictly adhere to the grid system. So if the elements on your icon show better without strictly adhering to the grid system, you can consider breaking some of the inherent rules.

Font layout

The default font for all iOS versions is Helvetica Neue. Starting with iOS 7, Apple has used a slightly modified font, but using the original Helvetica Neue in your design process is excellent. In addition to the default fonts, you can also use a number of optional fonts, where you can view a complete list of preset fonts.

Custom Fonts

Technically, a True Type Font (. ttf) can be used in the iOS app, but be aware of licensing issues. In general, it is safe to use fonts that are completely free or commercially available. MyFonts contains the maximum number of licensed fonts available in the app.

Palette

After IOS 7, Apple used a more vibrant and vibrant palette in the operating system and preinstalled apps. While you can use the default iOS palette above, you can also use your own color (if you want to be different, of course, use it).

Icon

In the iOS app, icon is a good use of visual relationships to support text labels, to do something or completely replace the text (most commonly used such as "New", "Delete", etc.). Typically, we use icon to differentiate between navigation bars, toolbars, and tab bars.

Various "bar" buttons icon

The button icon in various columns should have two states: the outline style of 1 or 1.5pt stroke width by default, and the active state of the solid color fill.

Do not add any extra effects to the button icon, such as drop shadows or inner shadows, as these are used in versions prior to iOS 7. button icon should draw a--icon shape as a matte in a solid color on a transparent background, and the color will be applied in a programmatic way.

Active view icon

The icon in the active view (often referred to as the share pop-up view) is designed in outline style, but Apple returns to the entity on the white background after iOS 8 to populate the icon style.

Common design elements

iOS offers a lot of good out-of-the-box views and controls to help developers quickly build pages. Developers can customize some elements to a certain level, but there are also elements that cannot or should not be customized. When designing an application for iOS, you should be aware of the use of some toolsets and should stick with them whenever possible. In some cases, however, you might want to design some custom controls because you need a more customized interface or you want to change the functionality of an existing control (a bit dangerous). Almost anything is possible, and sometimes you need to break the existing rules, but think twice.

Status bar

The status bar contains basic system information, such as carrier, time, battery status, and others, which are visually associated with the navigation bar and are populated with the same background. To match the style of your app and be easy to read, the contents of the status bar typically have two different styles: Dark (black) and light (white).

You can hide the navigation bar, but think clearly. For example, when the app downloads Web content, the user may be interested in whether the device is connected to a WiFi network, and when the app requires Bluetooth to connect to third-party hardware, the user may want to know if the app has Bluetooth enabled. A compelling reason to hide the status bar is that you want to remove all the interference information for that element, such as full-screen content, compared to a slice.

Navigation bar

The navigation bar contains controls for navigating between multiple views of the app, and options for managing content in the current view. The navigation bar is usually displayed at the top of the screen, at the bottom of the status bar. By default, the background is translucent, and there is blurred content underneath the navigation bar. The background of the navigation bar can be a solid color, a gradient, or a custom bitmap mode.

The iphone 6 navigation bar in portrait mode.

The iphone 4S navigation bar in flat screen mode. The height of the navigation bar is reduced by 12pt, except for the ipad. This is also a common way to hide the status bar in flat-screen mode.

Elements should follow a specific alignment pattern:

1. The return button is usually left-aligned.

2. The title of the current view should be centered on the bar.

The 3.Action button is usually right-aligned. If possible, the action button should be limited to a main operating line to avoid erroneous clicks and maintain its simplicity.

Tool bar

The toolbar contains some actions for managing or manipulating the contents of the current view. On the iphone, it usually appears at the bottom of the screen, but it can also appear on the top of the screen on the ipad.

Like the navigation bar, the toolbar's background padding can also be adjusted, by default the toolbar itself is translucent, with blurred view content underneath it.

You can use the toolbar when a particular view requires more than three major activities, but it appears messy on the navigation bar.

Search bar

The search bar defaults to two styles: prominent and minimized. The two types of search bars are functionally identical.

1. As long as the user does not enter text, placeholder text is displayed in the search bar, and bookmark icon can be used to access recent or saved searches.

2. After you type the search item, the placeholder disappears and a clear delete button appears to the right of the search bar.

The search bar can use a hint-a short phrase-to describe the context of the search. For example, "Type a city, zip code or airport"

Two styles of not using hints and hints

Minimize the type of search bar

To provide more control over the search terms, the scope bar can be used to limit the searching bar, and the scope bar uses the same style as the search bar, which is useful when the search results have a clearly defined category. For example, in a music app, search results can be filtered again by albums and songs.

tab bar

You can use the tab bar to quickly navigate between individual views of the app, and the tab bar can only be used for this purpose. The tab bar usually appears at the bottom of the screen. By default, the tab bar is slightly transparent, and the system's blur effect is used just like the navigation bar.

The tab bar contains a fixed maximum number of tabs, and once the number of labels exceeds the maximum number they can hold, the label behind will appear in the hidden "More-tab" list, and there is an option to rearrange the label order.

Although you can display up to 5 tabs on your iphone, you can display up to 7 tabs on your ipad.

To remind users of new information on the view, it is sometimes necessary to use the number of markers on the tab bar button. If a view is temporarily disabled, then the related label buttons should not be completely hidden, instead fade out the visual range to indicate their disabled state.

Table View

The table view presents a few or more list-style information in single or multiple columns, with the option to group content. Depending on the type of data you present, there are two basic table view styles that you can typically use:

Non-formatted

The Unformatted table view contains several lines of content that can have a header at the top, and a footer behind the last line. You can display vertical navigation at the right edge of the screen to navigate through a table, which is suitable for displaying large datasets that are stored in some way, such as descending alphabetical order.

Grouping styles

Grouped table views allow users to group content. Each grouping can have a header (the best use is to describe the context of the class group) and a footer (for help text, and so on). A grouped table view needs to contain at least one class group, and each class group must contain at least a single line of content.

For both of these table view types, you can use several styles to showcase your data to make it easier for users to quickly scan, read, and adjust content appropriately.

Default

The default table view has a left-aligned optional picture and caption.

With subtitle

The subtitle of the small font is displayed under each line heading for further explanations or short descriptions.

with numeric

With the value table type, you can display specific values related to the row headings. Similar to the default type, each row has a left-aligned picture and caption. In this type, values are aligned to the right, usually using a lighter text color than the caption.

Modal view, pop-up view, and reminder (alert) View

iOS provides a temporary view of a variety of styles that can be used to display, edit, or manipulate data in a given situation. Although each temporary view exists for a very specific purpose, it looks very different, but all temporary views have the same place: at the time of presentation, it is the topmost layer on the current view, and the contents below are covered by a black background.

Activity view

The active view is used to show specific tasks. These tasks can be system-default tasks, such as sharing content through available options, or fully customizable activities. When designing an icon for a custom task button, you should follow some design guidelines for active status and bar button icon--solid fill, no effect, and on a transparent background.

Activities (Actions)

The active page is used to perform a single action in the list of available actions and forces the user to confirm or cancel an activity.

In portrait mode (and in the smaller horizontal screen mode), actions slide in the button list and stay at the bottom of the screen. In this case, the activity list should have a Cancel button to close the view and perform any action in the list.

When there is enough space available (such as on an ipad), the list of activities can be visually turned into a pop-up view. However, you do not have to have a close button at this point, the user can click anywhere outside the pop-up view to close the pop-up view.

Reminder View

The purpose of the reminder view is to inform the user of some critical information and selectively force the user to make a choice.

A reminder view typically contains a title text (preferably not more than one line), a (informational alert, such as "OK"), or two buttons (requiring the user to make a decision, such as "Send" or "Cancel").

You can add the message text in the reminder view and add two text fields if you want, one of which can be the input area of the mask, suitable for sensitive information such as passwords or Pins.

Editing menus (Edit menu)

You can use the Edit menu to perform operations such as copy, paste, and cut. Although you can control which action the user can choose, the visual appearance of the Edit menu is set and cannot be reconfigured unless you design a fully customizable Edit menu.

Pop-up View (popovers)

Pop-up views are useful when a particular operation requires multiple user input to continue. In the horizontal direction, the pop-up view can be pointed to the relevant controls (such as buttons) that appear under the arrows. The background opacity of the popup control is slightly lower, showing the blur underneath it, like many other UI elements after iOS 7.

A pop-up view is a very powerful temporary view that can contain objects such as navigation bars, table views, maps, or Web views. As the content and elements of the pop-up view increase, its window can also be scrolled.

Modal view

Modal views are suitable for situations where multiple commands and user input are required, at the top of all content on the screen. Typical modal views typically provide:

1. Describe the title of the task.

2. Close the button for the model view without saving or performing any other actions.

3. Save or submit any button that has been entered.

4. The modal window body provides a large number of elements that can be entered by the user.

There are three types of modal views available:

1. Full Screen mode: covers the entire display

2. Page Table mode: In portrait mode, the modal view overrides part of the screen, showing only the contents of a portion of the parent view on a translucent, dark background. In landscape mode, modal views are displayed like full-screen modal views.

3. Table Page mode: In portrait mode, the Modal view appears in the middle of the screen. Outside the modal view, the contents of the parent view are displayed under a translucent background. The position of the modal view adjusts automatically when the keyboard needs to be displayed. A full-screen modal view in landscape mode.

Control (controls)

iOS provides a variety of controls for basically any type of input requirement. The most commonly used controls are listed below, but for a detailed list of the complete controls available, see the iOS Developer library.

Button

The most commonly used control may be a button. Since IOS 7, the default button design looks more like a plain text link. The button control supports a high degree of customization. Buttons can have several different states that can be conveyed using visual language: Default, highlighting, selection, and disabling.

Selector (pickers)

Selectors are used to select a value in a list of available values, similar to the drop-down marquee feature on the web. The extended version of the selector is a date selector that allows the user to scroll through the date and time list to select one months, days, and time.

Left: Date selector in table view, right: selector as keyboard

In addition to the background color, it is not possible to change its visual style or size. Most of the time, the selector is at the bottom of the screen and is displayed like a keyboard, but not anywhere else.

Segmented control (SEGMENT controls)

A segmented control contains a set of at least two segments that can be used to filter content or to create labels for clearly categorized content.

segmented controls without icon and with icon

Each segment can contain a text label or a picture (icon), but it cannot contain both. In addition, it is not recommended to mix different paragraph styles in a segmented control, such as text and pictures. The width of each segment is automatically adjusted based on the number of segments (two segments accounted for 50% and 5 segments accounted for 20%).

Sliding Bar (Sliders)

The slider control allows the user to select a specific value from the range of allowed values. Since the use of a slider to select a value is very smooth and requires no additional steps, it is recommended to use the slider when choosing a pre-estimate, rather than selecting an exact value. For example, the slider can be used to set the volume well, and the user can hear and see different volume sizes, and it is impractical to set accurate DB values by entering text.

Slider control without icon and icon

You can set the Icon,icon for the minimum and maximum values to show at the beginning and end of the slider control, thereby visually strengthening the slider.

Progressive Device (Stepper)

The progressives can be used when the user types an exact value from a limited range of values (for example, 1-10). The progressives typically contain two segmented buttons, one that lowers the current value, and one that increases the current value.

The visual appearance of the progressives supports a high degree of customization:

1. You can use your own icon as the Progressives button;

2. When you want to maintain the native appearance of iOS, you can customize the color of the progress frame, background, and icon.

3. If you use customizations further, you can use fully customizable images for the buttons and separators of the Progressives.

Switching (switch)

The user can switch between the "on" and "off" states using the switch. The designer can customize the color of the two states, but the appearance and size of the switch buttons are set and cannot be changed.

Keyboard (keyboards)

There are multiple keyboard types to provide the best keyboard for specific text input. While you can use your own fully customizable swords, the default keyboard does not need to be styled or resized, and is often more convenient.

Extended Reading and resources

The guidelines above only provide basic information about starting iOS design, and once you dig deeper, you may be interested in more detailed content, and the following articles and resources may help you:

Basic content:

Apple: IOS Human Interface Guidelines (Chinese version)

Apple: UIKit User Interface Catalog

Marc edwards:my App Design workflow

Treehouse:learn Mobile App Design

Animations and prototypes

framer.js:$79.99, can be tried

Marvel: Free

Pixate:ios Dynamic Prototypes

Origami:facebook-Produced interactive prototyping tool

Meng to:how to Prototype in Xcode Using Storyboard

Getting Started Guide

Mike rundle:building IOS Apps from Scratch

Open Source Control collection: Cocoa controls

The bar button icon

Creative market:3000 Retina Icons for IOS ($)

2080 IOS 8 Icons

Creative Market:on Creative Market ($69)

Creative market:1640 IOS icons-streamline ($69)

Creative market:500 Line Vector Icons ($11)

APP ICONS

Photoshop:app Icon Template

Sketch:ios App Icon Template

UI KITS

Sketch:iphone GUI for Sketch (IOS 7)

Photoshop:ios 7 GUI PSD (IPhone)

Sketch:ipad GUI for Sketch (IOS 7)

Photoshop:ipad GUI PSD

Sketch:ios 8 UI Kit + for Sketch

Sketch:blueprint

This article is translated by Cocoachina from Ivo Mynttinen design, Original: The IOS design Guidelines, reproduced please indicate the source.

Coc

IOS Design Guide