Talk about three key words in the iOS HMI guide

After a few years of the iOS HMI guide, the opening is always followed (deference), clear (Clarity), depth (Depth) These three keywords, from iOS7 to IOS9 has never changed. In Ios>, the UI as a support for content, always serves the content, just as Chowa says "design is not just look and feel, the key to design is how it works." ”

　　I. Compliance (DEFERENCE)

Designed for content services, the UI as a support for content can help users better understand and interact with content, without distracting users from the content itself. Content-centric is repeatedly emphasized, but often designers tend to ignore it because of excessive pursuit of beauty.

How to make the design conform to the content and highlight the content:

Take advantage of the entire screen.

Reduce the use of visual modification and physical design. Gradients and Shadows sometimes make the UI thicker and affect the user's attention to the content.

Use a semitransparent backplane. Translucent can enable users to see more content, play a short hint of the role.

ensure application clarity.

　　Second, clear (Clarity)

Clear here can be understood as: The text clear and easy to read, the icon accurate eye-catching, remove superfluous modification, highlighting the focus, to function-driven design.

　　How to improve application clarity:

Large amount of white leaves. White makes the content and function eye-catching, and conveys a serene and serene visual feeling, better let the user focus and efficient interaction.

simplifies the UI with color. Highlight the focus and imply interactivity.

Use system fonts to make sure you are easy to read.

Use a button without Borders. The No Border button in the content area communicates the button function with copy, color, and operation guide headings, highlighting when activating the state; the buttons on all bar are borderless by default.

　　Proper use of standard UI elements:

-Use standard elements rather than custom elements as much as possible using the standard UI elements provided by Uikit.

-Strictly follow the design specifications for each UI element, and when the UI elements in your application look and function are familiar to the user, they can easily use it based on previous experience to better use your application.

-Avoid mixing UI elements from different versions of iOS.

-Avoid creating custom UI elements to represent standard interaction behavior.

-Avoid using the system's own buttons and elements to convey other meanings.

-In the application of immersive experience, it is reasonable to create new custom UI, such as H5 pages and various game apps.

　　Keep users focused on primary tasks:

-Use layout to communicate. Use the layout to tell the user what is most important, how to choose, and the relationship between things.

-the top half of the screen places the main content. Follow the user's habits from left to right and start with the screen on the left.

-Use the size and balance of visual elements to show users the important content of related screens. Large controls are more likely to be noticed and clicked on when they appear than small controls. Use a pair of touches to make reading more comfortable and to make grouping and hierarchies more orderly. Alignment makes the application neat and orderly, and allows users to filter important information while focusing on the screen. The indentation and alignment of different groups of information make the association between them clearer and make it easier for users to find a control.

-Ensure that important content is displayed under the default size. For example, users can see important text without scrolling horizontally, or they can see the main image without zooming in.

-Try to avoid inconsistent performance on the UI. Controls with similar functionality should look similar, and users think they see differences for a reason, and they tend to spend time trying.

-Sufficient space for each interactive element to make it easy for the user to operate. The commonly used point-by-class control size is 44x44.

　　Iii. Depth (Depth)

Visual layering and vivid interactive animations make the UI look more vibrant, helping users better understand and improve the user's sense of pleasure.

　　How to enhance interactivity and feedback experience:

User-familiar standard gestures avoid giving different behavior unless it is a game.

Avoid creating gestures that resemble standard gesture functions.

The user has been accustomed to standard gesture operation, there is no need for users to learn to achieve the same effect of different operations.

Complex gestures can be a shortcut to accomplishing a task, but not the only way.

Users are lazy, providing the user with a way to do something as simple and straightforward as possible, even if the method requires extra action. Simply gesturing allows the user to focus on the current experience and content, rather than the operation itself.

Avoid defining new gestures unless it is a game

In a particular environment, you can consider using multiple-fingered operations. Although complex operations do not necessarily apply to all applications, they can enrich the experience for applications that users spend a lot of time using, such as games.

　　Use feedback that helps you understand:

-Integrate state or other feedback information into the UI as much as possible. It is best to let users get the information they need without operating or jumping out of the current content. For example, the mailbox application displays the current status on the toolbar, which does not affect the current content.

-Avoid displaying unnecessary reminders dialog boxes. A dialog box is a strong feedback mechanism that only needs to be used when conveying very important and theoretically feasible information, and if users often see a lot of dialog boxes that are not important information, they will soon ignore all the dialog box reminders.