iOS7 third-party application design solutions and case reference

At first glance, Redesign for iOS7 is nothing more than a new app icon, a borderless button, a status bar that matches the color of the navigation bar, and more. However, if you dig deeper, you will find a lot of dazzling places are the three design themes of iOS7, "compliance, clarity, depth."

For some applications, these changes lead to dramatic improvements in design, while others are even worse than before, not only in terms of usability but also in brand recognition. This article will focus on the iOS7 UI transition guide some of the key design solutions presented by some of the more representative examples of applications. If you are planning to upgrade your product or design your app from scratch based on the iOS7 style, these examples may help you get a better start.

Full screen layout and translucent UI elements

iOS7 allows the application interface to take full advantage of "edge to edge" full screen space. For example, if your application displays a system status bar, under iOS 7, you may want to let the user see the fuzzified content "behind" it in the status bar. Similarly, if your app uses some other standard controls, such as navigation bar, tab bar, toolbar, search bar, scope bar, the content behind these controls can be rendered vaguely in iOS 7 come out. If you decide to take advantage of new system features to achieve these effects, make sure that the content view fills the entire screen, including the area behind the controls. More details can refer to the iOS7 interface design specification Bars section.

The case of a large number of iOS7 applications have used the translucent status bar, the bottom of the content can be blurred to render. Twitter's approach is relatively conservative, they made a custom control the way the status bar and navigation bar, so that they match the color, and can display translucent effect. Other apps, such as Instagram, Foodspotting and The New York Times, have broken the boundaries of the status bar and rendered full-bleed photos with new layouts.

The New York Times uses frosted glass in both the status bar and the navigation bar, and takes full-screen space to show full bleed photos.

The status bar of Twitter matches the color of the navigation bar, and all can be rendered translucent.

2. Layer and moving efficiency

iOS7 UI transition guide recommended through different levels to reflect the level of content to enhance the interface between the objects. When users switch between different levels, to provide them with enhanced animation to further enhance the content level and depth of the concept.

Story In iOS7, levels are often used to show words that are above pictures, such as photos from Yahoo! News, and how the albums are presented in musicXmatch. In addition, the level can be used to provide users with some quick access features, such as iOS 7's own notification and control center.

As another example, the Huffington Post application presents the All Sections interface through a separate layer. Although there is no problem with the way in which the interaction is done, the pictures that blur from the bottom of the level are of little practical significance, but rather confuse users.

With regard to animation transition effects, you can find some very effective use of Luvocracy applications, such as the fuzzy magnification effect on the left navigation and the bouncing effect when displaying product page photos. In addition, the parallax effect that Flipboard uses on its cover is also a good example.

3. Negative space (white) and color

The "Design for iOS7" section of the iOS7 Interface Design Specification advises designers to remove unnecessary decorative elements from the interface and take advantage of the white space:

"Blanching can make important content and function more prominent, while leaving a blanket can also convey a calm and stable feeling, make the application look more focused and efficient."

In addition, they also recommend simplifying the UI through color matching:

"A key color, such as the yellow in a memo application, highlights important information and cleverly suggests element interactivity, and at the same time, it creates a consistent visual theme for the application."

However, many applications either ignore this suggestion or implement it too far. For whatever reason, a lot of applications are filled with excessive white space, but the color is too sparse. This style may be good for Apple because they have a distinct iOS7 style, but may have a negative effect on the application itself, as this dull design style may dilute the brand recognition effect of the product. Among a large number of light-colored applications, color-rich applications such as Snapguide may give users more surprises and make them more popular.

4 dynamic font

Dynamic fonts can automatically adjust their word spacing and line spacing for any size font. If you are going to adopt dynamic font technology, the text content format in your app will automatically respond to changes as the user adjusts the font size in the system Settings. Those who read the main text-based applications will greatly benefit from this technology, such as news, articles, emails, microblogging and so on. For such applications, the use of dynamic font technology means that users do not have to make a lot of settings to get a more consistent reading experience.

The case At present, the use of dynamic font technology is not a lot of applications. Here's a very simple reason: Most of the applications that benefit from this technology already include the ability to resize. However, this kind of customized solution is not ideal because it means that users need to set the most appropriate font size for each different application.

The New York Times, which uses dynamic font technology, is used under the big name.

5. Automatic layout

As described in the iOS7 development documentation, apps that take full advantage of Auto Layout technology make it easy to transition from iOS 6 to iOS 7 because these technologies can help applications automatically resize UI elements. If you use both automatic layout and dynamic font technology, then the application interface elements can also be responsive as the font size changes, to help you achieve, such as the user after adjusting the font size of the interface layout automatically from a column into two columns needs.

The Case When people use dynamic layout techniques to solve the transition from iOS6 to iOS7, it does not seem obvious to any significant change. On the other hand, if you use dynamic font technology at the same time, changes will be easier to spot. I mean, I have not found the actual case in this area at present; if you find some, you may wish to share it with everyone.

6. Apply icons and controls icons

iOS7 in the application of a lot of changes in the icon, the details you can refer to iOS7 interface design specifications which icon and graphics size section. Among them, the changes we can notice include a slightly larger icon size, a new golden ratio grid, a new color scheme, a more flat style, a curvilinear profile, and more. In addition, Apple recommends that designers of third-party applications redesign custom button icons in controls to make them look lighter and more native to iOS7.

Cases Almost all iOS7 applications have redesigned their application icons, as this is clearly defined in the iOS7 UI Transition Specification. However, only a few apps have redesigned their button icons to iOS7 style. Some applications have just barely made some changes, especially those that have been used to customize the logo design for the brand's purpose. There's also a question of time here, and maybe all apps will eventually upgrade their icon designs as they appear to be outdated or they may be laughed at by the user. "Oh, that app looks too iOS6!"

Shazam redesigned their icons for iOS7.

The Ted app also redesigned the button icons on the tab bar.

7. Borderless button

Apple recommends adding a border or background to the button only when it is really necessary. The rationale here is that users generally know that in various control bars and action forms, the elements in the warning box are interactive and therefore the border is not required. The iOS7 UI Transition Guide also includes some exceptions, such as the round button used to start the clock in the built-in Clock app, or the Buy button with a border in iTunes.

Case no border button has been widely used in iOS7 applications, because the cost of the change and its impact are not large. When used in the navigation bar, they are obvious interoperable elements; however, some borderless buttons appear as style-specific text when appearing near the main textual content. One of the reasons for this is that for borderless buttons, each app has its own "key color," such as Foodspotting's Green, or Opentable's Red.

Some borderless buttons in Foodspotting do not appear to users to be interactive.

Borderless button on Snapguide app navigation bar.

8. Other views and UI controls

iOS7 includes a large number of standard controls such as date picker, add contact button, detail expand button, info button, page number controller, selector, progress bar, refresh controller, staging controller, slider, step count Device, switch, text field and so on. Temporary views such as action forms, warning boxes, and modal views also change in how they are presented visually. Upgrading these controls will not have a significant impact on the application, because their basic form and interaction have not fundamentally changed. For more details, refer to the Controls section of the iOS7 Interface Design Specification.

Cases A large number of applications are beginning to use the iOS7-style new standard controls, because such upgrades are completely "free" without code changes. One of the things worth mentioning here is that the colors of standard switch controls are customizable when they are active. Although it does not seem so big, this detail can make your application interface look more consistent. Another welcome change is the new list structure, which extends to the edge of the interface, giving users more clickable space.

Luvocracy's registration interface uses a new iOS7 list control.

Luvocracy customizes the active state of the toggle control to red.

Toggle controls in Foodspotting are green when activated.

9. Gestures

In iOS7, users can swipe up from the bottom of the interface to expand Control Center. Similarly, if users want to access the notification center, they can swipe down from the top of the interface. Applications that use similar gesture commands may need to reconsider the triggering of related functions to avoid conflicts with these system gestures.

Unfortunately, applications have the potential to be affected by these system-level gestures, even though there is no significant conflict with iOS7 on gestures. For example, in The New York Times, users may inadvertently trigger the expansion of a control center when scrolling upwards. Some applications have changed their previous navigation style to avoid conflicts with system gestures. For example, a new version of the Facebook application uses tab bars as navigation on the main screen, most likely to avoid conflicts with system-level right-slip back-off gestures. Although Apple's change in gestures is commendable, there are some drawbacks in its implementation.

Facebook back to the era of tab navigation.

System improvement

In addition to the above-mentioned possible changes that are possible within the application, system-level changes can affect third-party applications, notably the Share Sheet containing Airdrop features and the multitasking mechanism. If your application has been integrated with the system's native sharing form, then in iOS7 they are automatically updated to the new version. Similarly, multi-tasking, once limited to built-in applications, now has a much broader scope of use, which means that content downloads and updates can be performed automatically in the background.

The case We have been able to see in many applications contains Airdrop function of the sharing form, but more applications are still using the old version of the action form, or a custom solution. You can not blame them, after all, the new sharing form in the realization of the way there is still a certain degree of complexity.

For multitasking, there are currently many news or photo media applications have begun to use this feature to achieve background upload or download. Fortunately, if there is a performance issue with the feature, the user can manually disable the multitasking feature in the system's Settings, but I doubt how many people have the ability to pinpoint the problem.

The New York Times uses a new sharing form, including the Airdrop feature.

Albumatic is still using a simple action form.

Source: http://beforweb.com/node/257