Ultra-practical iOS 9 Man-Machine Interface Guide (1): Basics of UI Design

1.1 for iOS design (designing for iOS)

IOS shows the following three design principles:

Compliance (Deference): The UI should help users better understand and interact with the content, and not distract users from the content itself.

Clear (Clarity): Various sizes of text clear and easy to read, the icon should be accurate and eye-catching, remove superfluous modifications, highlighting the focus to function-driven design.

Depth (Depth): Visual layering and vivid Interactive animations give the UI new dynamism, helping users to better understand and delight users in their use.

Whether you're redesigning an existing application or re developing a new application, design considerations based on the following methods:

First, remove the UI elements to highlight the core functionality of the application and clarify the correlation.

Then, use the iOS theme to define the UI and design the user experience. Perfect detail design, and appropriate and reasonable modification.

Finally, make sure that the UI you design is adaptable to a variety of devices and operating modes so that users can enjoy your application in different scenarios.

Throughout the design process, it is always ready to overturn precedents, challenge assumptions, and focus on content and functionality to drive the design of each detail.

　　1.1.1 Design following (Defer to content)

While the fresh, beautiful UI and fluent dynamic are the highlights of the iOS experience, content is always at the heart of iOS.

Here are some ways to ensure that your design can improve both the functional experience and the content itself.

Take full advantage of the entire screen. System Weather application is an excellent example of this method: the beautiful full-screen weather picture presents the current weather, intuitive to the user to pass the most important information, but also leave room to present the weather data for each period.

Reconsider (minimize) the use of the intended materialization design. Masks, gradients, and shadows sometimes make the UI element look heavy, which can affect the focus on the content. Instead, the content should be the core, allowing the user interface to be content support.

Use Semitransparent UI element styles to hint at what's behind. Translucent control elements, such as control centers, can provide context-using scenarios that help users see more usable content and can serve as a temporary cue. In iOS, the translucent control element makes it obscure--it looks like a layer of rice paper--and it doesn't mask the rest of the screen.

　　1.1.2 Guarantee Clear (Provide Clarity)

Another way to ensure that your application is always content-centered is to ensure clarity. Here are a few ways to make the most important content and functionality visible and easy to interact with.

Use large amounts of white leaves. Leaving White can make important content and function more eye-catching, easier to understand. White can also convey a sense of calm and tranquility that can make an application look more focused and efficient.

Let the color simplify the UI. Use a theme color, such as yellow in notes, to highlight information about important chunks and subtly suggest interactivity with styles. At the same time, also let the application has a consistent visual theme. The built-in application uses the same series of system colors, so that it looks clean on both dark and light backgrounds, pure.

Ensure readability by using system fonts. The system fonts for iOS (San Francisco) use dynamic types to automatically adjust word spacing and line spacing so that text is legible and readable in any size. Whether you use a system font or a custom font, be sure to use a dynamic type, so that when the user chooses a different font size, your application can respond in a timely manner.

Use a button without Borders. By default, buttons on all columns (bar) have no borders. In the content area, the interactivity of the borderless button is indicated by a copy, color, and Operation guide title. When it is activated, the button can display a narrower border or a light-colored background as an action response.

　　1.1.3 Use depth level to communicate (using Depth to communicate)

iOS often presents content at different view levels to express hierarchies and locations, which helps users understand the relationships between objects on the screen.

For devices that support 3D touch, Light pressure (Peek), stress (POP), and quick actions enable users to preview other important content without leaving the current interface.

By using a translucent background floating layer above the main screen, the folder can clearly distinguish the content from the rest of the screen.

As shown in the picture, the memo (reminders) presents content entries at different levels. When a user uses an entry in a memo, other items are collected at the bottom of the screen.

The calendar has a deeper level, when the user browsing year, month, day, the enhanced transition animation effect to the user a sense of depth level. When scrolling through year views, users can see today's date and other calendar tasks instantly.

When the user selects a month, the year view zooms in on the month and transitions to the Month view. Today's date is still highlighted, and the year is displayed at the return button so that users can know exactly where they are, where they come in and how to return.

A similar transition animation occurs when a user chooses a date: The Month view is separated from the selected location, the Sunday period in which it is pushed to the top of the content area, and displays the day timeline view in hours. These interactive animations enhance the level of relationships between year, month, day, and user perceptions.

　　1.2 iOS Application Analytics (iOS app anatomy)

Almost all iOS applications use the components defined in the Uikit framework. Understanding the names, roles, and functions of these basic components can help you make better decisions in the application interface design process.

The UI components provided by Uikit can be roughly grouped into the following 4 categories:

Column (Bars): Contains contextual information to guide users to their location, and controls to help users navigate or perform actions.

Content views: Contains the specific content of the application and some actions, such as scrolling, inserting, deleting, sorting, and so on.

Control (Controls): for performing actions or displaying information.

Temporary view (temporary views): Briefly appears to give users important information or provide more choices and features.

In addition to defining UI component elements, Uikit defines how objects implement functionality such as gesture recognition, drawing, accessibility, and print support.

From a programmatic standpoint, UI component elements are actually subclasses of views because they inherit uiview. A view can draw screen content and know when a user touches a screen within its scope. All types of views are: controls (such as buttons and sliders), content views (such as collection views and table views), and temporary views (such as warning hints and action menus).

To manage a group or series of views in an application, you typically need to use a view controller. It can coordinate the content display of the view, realize the function of interacting with the user and can switch between different screen contents. For example, "settings" uses a navigation controller to display its view level.

Here's an example of how views and view controllers combine and present the UI for iOS applications, as shown in.

Although developers think that the real role is the view and view controllers, the average user-perceived iOS application is a collection of different screen content. From this point of view, in the application, the screen content generally corresponds to a unique visual state or pattern.

Note: An iOS application contains a window. However, unlike a window in a computer program, the iOS window has no visible parts and cannot be moved to another location on the screen. Many iOS applications have only one window; applications that can support external display devices can have more than one window.

In iOS Human Interface guidelines, the word screen is the same as most users understand. As a developer, you may need to read other chapters related to UIScreen so that you can better understand how to relate the external screen.