"Turn" "IOS7 by Tutorials" series: iOS7 Design essence (bottom)

Iv. Focus on content

in the iOS7, the emphasis is not on the dazzling decorative effect, but the most important content itself .

Let's explore this topic:

1. Delete unnecessary content

The great design is more of a combination of subtraction and addition .

While cool ideas are important, there are more important ———— to kill those cool ideas to keep the application focused .

1.1. No longer emphasize chrome

Chrome means that your app is not part of the content itself, such as the Navigation bar and tab bar.

IOS 7 is very not recommended for Chrome, and some applications may even simply delete it. If you want to restore Chrome's design, consider the following points:

1.1.1.chrome is needed?

think carefully if you really use chrome on the homepage. Is it a navigation? Apple recommends deleting all chrome symbols so that users can browse content individually.

The navigation mode of the left and right buttons is easy to understand without using chrome.

Use Chrome as your navigation:

1.1.2. Using a simple background

Compared to heavy textures, the use of simple, transparent backgrounds to highlight content, Apple's glass effect is a very good example.

Apple is trying to make chrome color and background the same in iOS7 to make sure Chrome disappears. Keep in mind, however, that this is likely to have the opposite effect, because it can cause chrome to blend visually with the content, making it difficult to distinguish between them. When Chrome and content look the same, they look just as important. Eliminate hidden chrome, which means that the contrast between Chrome and the background is not always a bad thing.

Note that the status bar is fused with the navigation bar, where the two are fused in an elegant way:

1.1.3. If possible, hide chrome

Consider that when Chrome is not in use, you can hide them. Safari is a good example of how you can focus on content rather than being distracted by navigating the UI.

IOS7 Safari hides chrome when you drop down the page (left), and when you go back to the top of the page, Chrome (right) is displayed again:

1.2. Simplifying UI elements

In iOS 7, you should question every background, texture, shadow and border. This is done to eliminate any unnecessary decorations, allowing the user to focus on the elements that are really important . While decorating may be useful, using it sparingly will make your application feel more at home in the iOS7.

The phone's interface is often so small that any additional visual weight, such as gradients, borders, or realistic details, will attract too much attention from the user. Therefore, use these elements only when you are very certain.

1.3. Non-border buttons

when I first learned that Apple wanted to use a borderless button, the first reaction was: No! However, it turns out that the borderless buttons are really beautiful in some places, such as the navigation bar.

In the simplified navigation bar background, the border is just a disturbing element of the visual, very unnecessary.

Many buttons and navigation still require borders to differentiate between interactive elements and non-interactive elements, such as:

The Apple buttons generally use a transparent background to indicate unchecked state, and a simple color background indicates the selected state.

You can try to change something, such as the border thickness, background color, transparency, fillet radius, or create a subtle shadow and texture for your button.

1.4. Use color to indicate interaction

Apple uses color differences to represent interactions on some occasions without having to use the border around the buttons. Of course, if the interaction elements in your app are very explicit, you don't need to use colors to differentiate them.

In, the red Edit and + buttons indicate that you can interact:

  

1.5. Minimize simulation details and skeuomorphism (imitation physical texture)

Skeuomorphism is one of many tools in the designer toolbox and it does not disappear. You just need to explore how to use it correctly in this minimalist environment.

2. Content is king

Now that you are no longer emphasizing the UI, how do you stress the content?

2.1. Use the entire screen

Avoid only one frame of unnecessary UI elements, and you should keep your content in the center of the stage at all times.

2.2. Content decision Screen

The following weather application combines the frosted glass effect to create a very sensory effect, especially depending on the content to determine the different screens:

2.3. Increase Visual Pleasure

iTunes Radio avoids flashy UI elements, adding embellishment to the content itself:

V. Focus on Interaction

The design of the application is about to undergo a fundamental shift in direction. Previously, apps based on brilliant visuals might stand out, but in iOS 7, photo-realistic buttons would disappear from the screen.

So, how to stand out in iOS7? How do I create a delightful app? In short, the new paradigm of app design will talk less about appearances, and more about using feelings . I do not think that the iOS7 of the visual effects will cause the Renaissance in the field of interactive design.

Simple visuals make it easier to quickly create novel animations, transitions, and interactive mode experiments, and simple zooming and warping are 1000 times times easier than processing textures and beveled surfaces.

, the Left (iOS7) version uses a simpler visual effect than the right (IOS7):

1. Magical Touch

Touch is magical: it makes you think you're manipulating a physical object, rather than moving pixels around the screen. Apple knows this fact well, which is why the first iphone uses a 1:1 scrolling ratio and uses a bounce effect.

The computer is cold, but if the computer is treated as a window into the physical world, users can create a friendly, familiar and immersive experience. However, any lag or card will immediately break the illusion and end the magic show.

IOS7 not discard the details of the simulation? No, of course not. in IOS7, visual simulations are diluted, while simulations of user interaction and dynamic physical effects are enhanced . In fact, IOS7 built a physical engine to achieve a purpose: to create a more realistic interface.

Great designs will be born with less use of Photoshop and more using Xcode and quartz Composer. These tools allow you to explore how your app feels, not just the look and feel.

2. Direct operation

direct manipulation of objects on the screen instead of clicking on the buttons on the side, scrolling gestures, dragging and pinching objects is an example of direct manipulation.

IOS7 Photos no arrow buttons are used to switch photos, and natural sweep hands accomplish this task:

The realistic interface requires the user to manipulate the object, so you need to integrate your abstraction into the physical object. For example, my team has to think about how to represent time in a time management application. Finally, we use time as a physical block on the timeline, which enhances its visualization and operational flexibility:

3. Physical simulation and animation

It's a pity that the Apple page is just a simple 1:1 scrolling, rather than the drop inertia and bounce force effect we love. Working directly with both physics and animation, our goal is to make the interaction feel real.

The lock screen for IOS 7 will bounce different heights:

In the future, applications that neglect physical simulations can quickly become stale and stagnant. The UI designer is just beginning to explore how to use physical emulation on user interaction, and here are some ideas for you to refer to:

3.1. Dynamic

• Do not associate with digital animation, but think about the principle of physics. When you push a ball on a physical surface, it does not reach the end at a constant speed. Conversely, when you push it, it begins to accelerate, and the friction slows it down until it stops. When an object falls from 10 feet, the bounce force is higher than it falls from 2 feet, and your interface should behave the same way. Fortunately, Apple's new Uikit Dynamics API makes it easier for you to achieve these dynamic effects.

3.2. Continuity

• Instead of thinking about each screen as a complete slate, think about how an item can get from one screen to another, using realistic animations such as moving, zooming, morphing, and so on.

3.3. Rebound Power

• It's not just scrolling. Depending on how much elasticity you give the object, the bounce force can add an interesting touch.

4. Three-dimensional

Ironically, people calling "flattened" operating systems should go back to the past, ignoring that iOS7 contains the most stereoscopic of everything, such as a beveled stereoscopic effect that makes a person's eyes shine. One of the three main guidelines for IOS 7 is depth, and depth can take some forms:

4.1.3D effect

Apple wants you to use a three-dimensional effect to add an interesting visual experience to your app, such as using parallax to make the page compartment more explicit.

4.2. Hierarchy

Tilt your iphone and you'll see that the desktop icons are actually not sitting on the background-the parallax effect shows that they are floating, while the pop-up control center and frosted glass effect make the control center on top of all the icons. Think about the level of your interface and use the 3D effect to define the level that users want to use.

The frosted glass provides a subtle layered feel effect:

4.3. Scaling the user interface

I think some of the coolest user interface innovations will come from this scaling concept and take it to the realm of dreams.

The zoom interface exists in the iOS7:

5. Gestures and navigation

Once the user learns the appropriate gestures, they can be more interesting and convenient when interacting.

For sweep completion:

However, some features may not be well done with gestures, unnatural gestures are difficult to remember and fun to use. In addition, users may forget unfamiliar gestures if they are not used daily. Experiment with gestures that make the user's finger sensitive, but don't arbitrarily design overly free gesture control interfaces.

IOS7 introduces a new pattern: back sweep (swipe togo). You can click the Back button, but the back sweep is significantly easier, especially on the iphone 5 or even later on the larger screen.

For flyback:

Although the gesture is designed to make the user's use more convenient, but the keyboard operation should also be retained, the user has the right to choose a variety of operating methods.

6. Personality

Developers please stand out and your IOS7 app must have a unique and delightful personality. Aesthetics is important, of course, but the personality of the app is also critical!

To enhance the individuality of the application, consider the following points:

6.1. Audio

• Audio is a huge untapped territory with some pioneers such as Tapbots, whose applications include subtle clicks and beeps?

6.2. Language

• Who would want to face the dull text every day? Humorous or humorous language is one of the best ways to exude individuality.

6.3. Icons

• The user's impression of your app often comes from the icon. Since it lives on the user's home screen, icons with such great value should be carefully designed, and icons should reflect the individuality of the application.

Personality can really be included in all the design details to make your app great. From perfecting every pixel, optimizing every interaction, fusing every thoughtful design, to pleasing animations and witty information, this will make your application even more perfect.

VI. Leave your mark in the app world

"Don't lie, iOS7 has made me very excited to work, there are very cool things (at least I think so). " ---Mark Jardine,tweetbot's designer

in these years of application design, IOS7 's style may be the most exciting. Marco Arment points out that the APP store will once again be a fertile ground for developers. This radical design shift means that new design concepts will be seen in the next few years in all sorts of top-ranked applications that will deeply respect Apple's new design principles and create a unique UI interface that users never saw before.

And the good news is that you can create these apps! Although this is not easy, yes, the competition will be very fierce. But now that you learn Apple's new design concept, you have more opportunities than ever to create a great application. Come on, leave your mark in the app world!

/*

Translator's nonsense:

After completing the following challenge, this chapter of the study is completed, I believe you and I have a new understanding of iOS7.

In the six months that IOS7 officially launched, I collected more than 30 books about iOS7 (not to mention the more I do not have), visible the hands and feet of foreigners and the degree of love for new technology. Raywenderlich There are many classic articles, "IOS7 by Tutorials" This book is the essence of the Raywenderlich team collection, highly recommended to buy! And I will take the time to continue the translation of the series.

If you are interested in my translation and want to continue to follow other iOS translations, you can follow my Sina Weibo blog: @ Galbrain the Great

Learn together and improve together

----(blog Park) Galbrain the Great

*/

Vii. The final challenge

Challenge: Redesign this app!

An app on IOS 6, it's very poorly shaped and needs your help. Your challenge is to use the design knowledge you already know (such as contrast, repetition, alignment, proximity, typography, and Apple's new design philosophy) to save the app and adapt it to iOS7.

You have a lot of ways to get started, you can use Xcode, Photoshop, or simply use a piece of paper and some colored pencils. Before you start your new design, try to find out all the problems with the original design, here are some tips:

? Have you noticed any problems with alignment?

? are the relevant concepts grouped together?

? is it convenient to operate?

? If you delete some decorations, what does the app look like?

Below I provide a solution, but pay attention to the nature of the design is completely subjective, there are a variety of design options.

Example: