Looking at IOS7 design concepts through changes in iOS human-Computer Interaction Guide

IOS7 's biggest change in the interface is the abandonment of Apple's use of many years of physical design, and switching to the flat design camp. For a time, the industry's comments are mixed, and there are plenty of praise in the slot. Instead of judging the new icons and the overall design style, we will consider the new design of Apple from the http://www.aliyun.com/zixun/aggregation/9255.html of the > Design concept.

form follows function, UI service content

One of the first things Apple mentions in the updated iOS interactive guide is defer to content. Regardless of how the UI changes, content is always the core of the experience, and the UI is always serving the content without affecting the performance of the content. This is reminiscent of the "form follows" function of Louis Sullivan's Isse Shariwen, which is actually a new understanding of the source of design.

From the IOS7 specific design performance, the following points to its design concept has made a good interpretation.

emphasizes the full use of screen space

IOS7 emphasizes that content is naturally extended to the entire screen without the use of extraneous visual elements to separate content from the operation area and the information area. One of the most obvious examples is the top status bar into the content, no longer separated by lines, so that users feel the content of the visual space to become larger.

IOS7 Weather and Memo

In order to make the screen main body content more prominent, renders to the user more, if necessary, hides the UI element, gives the screen space to the content. IOS7 in many native applications are automatically hidden up and down status bar and navigation bar design. Even the topmost status bar is hidden in the map application.

IOS7 Map Application

IOS7 Safari

weaken control visual effects to avoid interfering with content

This is the most obvious change of iOS7, the so-called flat design style. The new design eliminates the texture and texture performance of the iOS6 system control, and is not used to express it when necessary. The most obvious example is the System button control, which no longer uses the fitted button border and the high light and shadow, but instead simplifies the icon element and the operation content.

IOS7 and IOS6 Memo

IOS6 buttons are replaced with arrows and text, and iOS7 defines the concept of key colors to express the operability of the elements. In the same app, the operational elements are expressed using a consistent uniform color that differs from the content. In the memo, yellow is used, and in the system settings, Blue is used uniformly as the key color.

Changes in the overall visual effect, the calendar example is most obvious, you can see IOS7 and iOS6 two different styles of calendar expression, iOS7 calendar, the content is more prominent, the operation element is weakened, and iOS6 calendar, very manipulative, the screen each content element and operation element are interactive.

IOS7 and IOS6 calendars

optimizes content elements to make them visible

We know that the use of white in the design can make the main content of the performance and function more prominent. In the iOS human-Computer Interactive guide, this describes white: whitespace can convey a sense of tranquility and tranquility to the user, making the app look more focused and efficient.

IOS7 's calendar is a classic example of white-space use, which makes the iOS7 calendar more prominent, not with the iOS6 calendar crowding and sense of urgency.

IOS7 Calendar

constructs a new level space and establishes a novel visual order

IOS7 introduces a new concept of visual hierarchy that helps create a sense of depth, builds hierarchies and order, and helps users understand the physical relationships between screen elements.

IOS7 Interface Hierarchy diagram

through Parallax animation to create a sense of depth

On the main screen, because of the separation between the icon layer and the background layer, the IOS7 uses the acceleration sensor to detect the change of the view angle of the user, control the displacement speed of different layers, and create the Parallax animation skillfully, thus the screen element is active, and the stereoscopic depth is created.

The image below is a screenshot of the iOS7 main screen at different tilt angles of the phone. You can see that the position relationship between the background layer and the front icon is different at different angles.

IOS7 Main Screen

a large number of translucent UI elements

Translucent effects help users to learn as much as possible about the blocked content and to enable the user to understand the physical relationship between layers.

IOS7 Control Center

In contrast to the Android Control center interface, using the same Pull-out method, the IOS7 translucent design allows users to understand the hierarchical relationship between the control Panel and the back interface, and the Android panel is more likely to get lost.

In the iOS6, the time selector uses a very realistic physical effect to simulate the time setting of the dial wheel. IOS7 In addition to the wheel of the texture and texture, flattened it, through the perspective of the principle and semi transparent glass effect shows a flat dial wheel. It is worth noting that the glass effect of the iOS7 is very realistic in place, the choice of time in the middle State, reflecting the glass refraction effect. This is not seen in the iOS6.

IOS7 Time Picker

IOS6 Time Picker

encourages the use of depth-level information structures

In the information structure, IOS7 encourages the use of depth level to communicate with users, and requires the metaphor to be more in line with the physical world.

The IOS7 folder rejects the iOS6 screen splitting effect, but instead uses a glass effect placed above the main screen. This corresponds to the hierarchy of the system as a whole, in the IOS7 hierarchy, the background is always at the bottom, and the other layers are placed on it. Then the opening of the folder should be suspended on the main screen, and the effect of the use of glass to express its hierarchical relationship.

At the same time, iOS7 consistent application/folder open animation, also reflects this depth level relationship. Unlike IOS6 's open animation, IOS7 's open animation is centered around a clicked application/folder, opening up to a magnified form, showing a very reasonable depth-level relationship. However, iOS6 is clicked on the application/folder location, is centered on the center of the screen, to the surrounding magnified open. From this animation mode change can be seen, iOS7 more attention to animation and real physical world rules of the corresponding, and not only a mere formality.

IOS7 and IOS6 folders

The IOS7 Calendar application uses 3 depth-level information structures of the year, month, and day, which is a big change compared to the iOS6 calendar. IOS6 Calendar Application emphasizes flat information structure, the entire application has only one depth level, the month, day switch through the tab switch to achieve, all other operational functions are also in this one level. Depth-level design can effectively reduce the operating elements in each level interface, the interface is cleaner, neat, the content element is outstanding. With this depth-level coordination of the transition animation and the previous mentioned system open application/Folder animation, have been clicked out as a central point for the user to enlarge, to convey to the user the depth level of the corresponding deep sense.

IOS7 and IOS6 calendars

The same depth hierarchy is applied to picture applications where the four levels of the picture are annual, select time, and single graph.

IOS7 Pictures

Through Apple's latest iOS human-Computer Interactive guide, we can see that Apple has its own unique design concept in treating the so-called "flat" design style. As Apple's official website put it, "people often equate simplicity with minimalism." But the real simplicity is much more than just removing the pretense and removing clutter. But in response to your needs, because of the ground, due to the right to show every aspect. Shanfanjiujian, everything is orderly, and ensuring that everything is done is always "effective". When you use it for the first time, it's simple to know what it can do. ”

But good design concept, still need to constantly polished, after the design to show. From the release of the IOS7 beta many details are not difficult to see, the release of the iOS7 is hasty, many design there are many worthy of scrutiny, so also attracted a lot of spit. However, I believe that the future, with the new design style of continuous improvement, Apple will also be the fruit of the heart of the apple.

(This article is from the Tencent CDC Blog, reprint, please indicate the source)