[iOS translator] "IOS7 by Tutorials" series: the Essence of iOS7 design (top)

Brief introduction:

This article is translated from "IOS7 by Tutorials" in the first chapter "Designing for IOS 7", mainly from the programmer's point of view of the iOS7 of the new design concept, called God! This translation is only for the purpose of learning and communication, the copyright belongs to the original author, there are limitations. The rough place of non-professional translators is unavoidable, want to experience the essence of the original friend, please go to Raywenderlich shop support genuine.

—————— by Galbrain

About

The original author of this article is Jeremy Olson, a top designer plus program Daniel, a variety of applications ranked in the top 100 of the Apple Store. Although the theme of this article is interface design, its great place is that it is said to the program ape to listen to!

Directory:

First, the design of iOS7 is different from the past

• 1. Why redesign for iOS7?
• New design principles of 2.IOS7
• 3.IOS7 's design Keywords: spotlight

Second, focus on the function

• 1. Definition of application
• 2. An application that wants to do everything, can't do anything.
• 3. An application that is designed for everyone is not attractive to anyone.

Third, focus on the design Foundation

• 1. Contrast Ratio
• 2. Repeat
• 3. Align
• 4. Near
• 5. Typesetting

Iv. Focus on content

• 1. Delete unnecessary content
• 2. Content is king

V. Focus on Interaction

• 1. Magical Touch
• 2. Direct operation
• 3. Physical simulation and animation
• 4. Three-dimensional
• 5. Gestures and navigation
• 6. Personality

VI. Leave your mark in the app world

Vii. The final challenge

First, the design of iOS7 is different from the past

1. Why redesign for iOS7?

My team realized that it was a valuable investment to spend some time re-engineering our application to adapt to iOS7. Apps designed for IOS7 will be a duck in the Apple Store because:

• User　　
  • Want to use your own application to adapt to the IOS7 environment
• Media
  • Don't want to look old app as cover
• Apple
  • Prefer applications to meet their new design principles

New design principles of 2.IOS7

Like many people, when I first approached IOS7, I was uncomfortable with its changes: flattened, devoid of texture and monotonous. But after a while I started liking it because I found out that Apple's latest design principles are traceable:

• The new focus
  • The point is to focus your attention on content and interaction, and you no longer need to look up and down to find what you need.
• The arrival of diversity
  • The best iOS7 app will not just mimic the "settings" or "Calendar" interface. The best apps will use the new design language as a starting point and innovate to the extreme. Just like the best app on IOS6, once the IOS7 platform matures, it will generate a lot of diverse applications.

Now let's unlock layers of packages and build great apps on IOS7!

3.IOS7 's design keywords: Spotlight

When I started designing applications for iOS7, I tried to find a word to explain everything, and now I'm going to say the word: focus.

Contrary to many popular ideas,iOS7 is not about flat design. It contains a large number of amazing non-flattened elements, in fact IOS7 has more three-dimensional elements than any previous iOS early version. Accordingly, iOS7 actually removes distracting elements to focus on three key concepts that are repeatedly used by Apple to describe their new design philosophy:

• Clear
  • Focus on basic graphic design, focus on function
• Obey
  • Focus on content
• Depth
  • Focus on Interaction

I believe the best iOS7 applications will illustrate these three concepts in their own unique way.

second, focus on the function

The great app isn't starting with your sketch book or opening Photoshop, instead, it starts with two questions:

• Who is the user of this app?
• What problem does this application solve?

1. Definition of application

the definition of an app sounds like this: Who is the user of the app? What problem does this application solve? in my application, this definition sounds like this: improving efficiency for specific users

2. An application that wants to do everything, can't do anything .

Your app should focus on one issue. If you can't describe your application in a sentence, your app must be too big and hard to impress. This allows users to wonder what features your app has, and it's hard to share it with a user's friends.

3. an application designed for everyone is not attractive to anyone .

Having an app designed for everyone is actually a trap. When your app is designed for everyone, it's not designed for anyone. But if you design apps for a specific crowd and make them feel good, they can drive another group of people to use your app.

Third, focus on the design Foundation

since iOS7 no longer emphasizes textured user interface elements such as textures, tilt, and chrome, you need to firmly grasp the fundamentals of graphic design. Steven Bradley describes it this way:

" when you peel off the ornament of a thing, it should be the core foundation of it." Unfortunately, too many flat designs focus only on the flattening of the exterior, ignoring the most basic design guidelines . "

Let's not fall into this trap. While I can't fully meet all the basic aspects of design, I can at least speak some basic graphic design principles, let's get started!

1. Contrast Ratio

1.1. Profile of contrast

contrast is a visual difference between two elements that can be contrasted by color, texture, or other element style. The text on the left has high contrast, because the text color is very different from the background color, which makes the text very visible, and the text on the right is very low contrast to the background, making it almost invisible. Please note that your eyes will automatically draw to the left of the box, the rational use of high-contrast elements can make your design shine. Contrast is a very powerful tool, but it must be used with caution. If too many high-contrast elements appear on the screen, the user's eyes will not know where to put them.

1.2. The effect of contrast

• Highlight
  • Emphasize the most important element, fade the secondary element
• Delicious
  • Make the overall design more visually active
• State
  • Shows whether the state of an element is active or dormant
• Readability
  • Make text easy to read

1.3. The challenge of contrast

1.3.1. Question:

Let's take a look at the following, obviously the user interface is flawed. But what is wrong? How would you solve it?

Make a note of all the design flaws you noticed (hint: it doesn't use comparisons!). ), then take a look at the following annotated version:

1.3.2. Annotated version

1.3.3. Modifying a version

Ah ha! The interface looks much better now! These new designs are more aesthetically pleasing, more professional and more functional.

2. repeat

2.1. Repeating the introduction

Repetition sounds like this: a repetition of the same object or style. If two yuan is connected, they should have a similar visual style. The lack of a repetitive UI looks strange because humans use pattern thinking to perceive the world.

2.2. The challenge of repetition

2.2.1. Question:

once again, look at the screen below. Yes, it doesn't look professional, but why? as before, write down any of your discoveries (hint: it has many elements that need to be repeated!) )

2.2.2. Annotated version:

2.2.3. Modified version: use repetition appropriately to make the application easier to visualize the information needed

3. Align

3.1. Introduction to Alignment

alignment is about how visual objects connect to each other. Any programmer should learn to align properly, because locating errors is one of the easiest places for programmers to make mistakes when designing. The basic idea is that no elements should be placed on the screen, and each element should be connected to at least one of the other elements. This may mean two things:

• Edge Alignment
  • Align vertically or horizontally along the edge line
• Center Alignment
  • Center Vertical or Horizontal alignment

3.2. The challenge of alignment

3.2.1. Question: take a look at the following to see if you can find the alignment problem

3.2.2. Annotated version: viewed from a distance, the following screen looks fine. But if you look closely, you will find that the alignment error makes the picture look unkempt and amateur. To see the alignment line:

3.2.3. Modified version: The red lines indicate horizontal alignment, and the elements on the screen do not have any other elements that are precisely aligned, resulting in a messy line of snaplines. Snaplines are a very useful tool to use to adjust the interface, to see that fewer snaplines represent the neat elements, which makes the user's eyes more comfortable:

4. near

4.1. Near Introduction

proximity means that if some elements are relevant, they should be together. If two elements are not related, they should be away from each other. developers often want to maximize the use of the screen, preferably every pixel is stuffed with things. While this may be valid, it also produces a confusing layout. Stay white, this is the most powerful tool for organizing your elements, and it can help your users understand the meaning of each content effortlessly.

4.2. Proximity Challenge

4.2.1. Question: See if you can figure out the problem.

4.2.2. Comment Version

4.2.3. Modified version: It is clear that irrelevant elements are not close enough to make the relationship between elements very confusing. How will you solve these problems? Here's a solution for me, but there are always a number of different ways to solve design problems. When everything is properly combined, the functionality of the elements in the application will be clearer!

5. Typesetting

5.1. Typography Principles

Here are some general rules to consider when typesetting:

• 5.1.1. use of up to three fonts
  • This includes combinations of different fonts and styles within the same font, such as fonts, colors, sizes, and combinations of bold and italic modifiers. Too many fonts can disrupt your layout consistency.　
• 5.1.2. using text centrally in moderation
  • Sometimes, you absolutely need to center the text, such as the navigation bar title, but experience tells us it's best to avoid using it as much as possible. Left-or right-aligned text layouts are often more professional.　　
• 5.1.3. Keep your fonts simple
  • Enhanced text readability.
• 5.1.4. test font size in advance
  • IOS7 provides the option for the user to modify the font size. Be sure to test all the available font sizes in advance on your app to make them look as comfortable as possible.
• 5.1.5. differentiate content by using a font with a larger difference
  • Try to minimize the use of similar fonts on the same screen, which makes it confusing for users to distinguish them. The use of a large variety of fonts, so that users easily distinguish between their content.　　
• 5.1.6. style transformations using the same font
  • Use a combination of font color, size, and bold and italic modifiers to highlight important things.

It may not be easy to remember so many of these, but you just need to remember the key one: Keep the user interface consistent . If the application does not look comfortable enough, there must be something wrong with the typography.

5.2. The challenge of typesetting

5.2.1. Question: What's wrong with the layout below?

5.2.2. Comment Version

5.2.3. Modifying a version

This app has become more beautiful and practical, and all you have to do is change the font.

at this point, you already know five basic designs: contrast, repeat, align, approach, and compose. Remember, in iOS7, it is important to focus on basic design principles. also recommended is a design book "thenon-designers" by Robin Williams

For further information, please search in the blog Park: Galbrain the Great