iPhone X adaptation essentials: 10 minutes to quickly master iPhone X UI adaptation skills

iPhone X has been on sale for a week, and many small partners have already got the real machine, and the applications that have not yet been adapted to iPhone X are believed to be working overtime to adapt it, otherwise the effect is really terrible. At 8:30 p.m. on November 6, Static Electricity is also on SketchChina Live! Live broadcast of the iPhone X hands-on operation and UI designers need to pay attention to the adaptation points. However, some small partners may not see overtime, it doesn't matter, live video review static electricity has been suppressed upload completed! Just poke at the address below. In addition, some small partners may not be convenient to watch the video version, static electricity also deliberately organized the text version of the content in this article, is not very intimate?

Do not want to watch video friends, then the fastest adaptation of the iPhone X points to come, as long as you master these points, the company's APP adaptation work is certainly not a word.

If you don't want to see a detailed analysis, you can pull directly to the end to see the summary of static electricity.

Resolution comparison

First of all, let's look at the comparison between the iPhone X and other iphones, so that it is easy to design, to look at the screen density, the iPhone 6/7/8 does not have a logical resolution, but the Plus model and the iPhone X have a logical resolution. Attention, please!

Model actual size comparison

Don't look at the 5.8-inch screen of the iPhone X, but the real feel is much smaller than the Plus, and only a little bigger than the iPhone 7. People who hate large screens like static electricity will use the iPhone X without any problems, and mom will no longer have to worry about hitting her face when looking at the phone in bed!

Resolution creates design differences

Although it looks like the iPhone X just grew a lot, don't underestimate the 145pt that grew out, in fact, the difference is still very big. The iPhone X has a physical resolution of 1125X2436, so what's a double image? 375-812pt, then it looks like the width of the screen does not change, so the designers are relieved. The cost and difficulty of adaptation are reduced a lot.

But don't worry, we have not calculated the density, density is a big indicator to determine the difficulty of mobile phone adaptation, do you remember the formula for density calculation? Yeah, that's the bottom one, PPI(Pixels Per Inch), which is horizontal squared plus vertical squared and then you take the square root.

We see that in logical resolution, the screen density of the iPhone X is larger than that of the Plus, 444 and 401 respectively, but the real density of the iPhone X is smaller than that of the Plus, 458 and 489 respectively. At this time, we can know according to the screen density, in fact, they are @3x, that is, three times the graph of the graph. So most of the cost of transitioning from the plus to the iPhone X will go to engineers.

What designers do. - Pay attention to safe areas

If the security area on both sides of the screen is any mobile phone needs to pay attention to it (that is, leave appropriate white space on both sides to avoid wrong touch, but also to ensure visual effects, the specific amount of white space is determined by your design draft, Apple does not specify how much).

Then on the iPhone X, we also need to pay attention to another two important security areas, that is, the two pieces of content above and below the screen: the upper part is the "fringe" area, which can only put some content such as system status, and the fringe area needs to be reflected in the design draft. Then the bottom of the screen, is a lot of designers will ignore the content, is a virtual control bar, which with the magic bar played the role of the home button, so we can not let the content and this bar conflict, so you will find that the standard adapted applications, the bottom of the screen are left a lot of space. Next, let's take a look at the applications that have been claimed to be adapted in the world, which are right and which are problematic?

Obviously, the Taobao on the left is a bit exaggerated, the wechat in the middle is good, and the rightmost one, well, has not been adapted at all.

In addition, we can also learn from this screenshot that there is no fringe in the screenshot.

The size of the safe zone?

In double graph design mode, the height of the Status bar at the top is 44pt, and the height of the control bar at the bottom is at least 34pt. Note that I said that in double graph design mode, the unit is pt, not pixels. Some students may ask, how to convert to pixels? After all, the iPhone X is a triple graph, so multiply by 3 to get the actual pixels.

Now, most of the adaptation work has been completed, in fact, we only need to make some small changes according to the previous design draft, isn't it very simple?

What the designer has to do - Modify the size of the full screen image

As iPhone X grows out of a section, the previous full-screen picture will be deformed on iPhone X, as shown in the following figure, so the development engineer may enlarge the original picture to fill the entire screen in order to adapt, if not enlarged, then there will be the effect of the right-most picture in the first row of the following figure, with very ugly white edges above and below. On the other hand, your image may be squeezed out of shape, and that's what the second row of images will look like.

So the designers had to design a set of images based on the iPhone X's resolution for the startup screen, a splash screen image, and some full-screen floating prompt boxes. Well, our workload increased again.

Designers to do - pay attention to the color space

The display screen of the iPhone X uses P3 color space, which is richer and more realistic than the traditional sRGB color space, so the old question of designers comes to "Why do the pictures I exported in Sketch" have different colors on the phone? Here's the answer. However, static electricity feels that we have no solution to this problem, after all, the color space follows the display medium, such as your display is one color space, the mobile phone is another, so this invisible color difference, let's ignore it.

Designers to do - pay attention to the way the video is displayed here you will be joking about the big bangs, after all, it covers part of the video content, but you can also choose to shrink them to show it, it is also a good idea, the bangs part do not put anything. Here's what Apple suggests. Let's take a look.

What? What did you say about King pesticide? Come on! Look at the picture below, in fact, it is not suitable.

The interaction changes are very obvious on the iPhone X, such as sliding back to the desktop through the bottom control bar and so on. You can look at the video at the beginning of this article, electrostatic detailed introduction for you. In short, no matter whether you have a new mobile phone, be sure to adapt it as soon as possible, as for face recognition and other black technology, electrostatic experience that it is too awesome! The recognition speed and fingerprint recognition is comparable, even more smooth, such as static electricity such sweating hands, is really a benefit.

Don't want to read a long article? Then go straight to the summary!

1. Be sure to pay attention to the security area of the iPhone X, and it is not necessary to directly elongate the design draft

2. Pay attention to the adaptation of full-screen pictures and videos

3. You can use 375-812px to design a double image, which is compatible with iPhone plus, so the triple image is going to become mainstream?

4. The upper Status bar area is 44pt high, and the lower control bar area is at least 34pt high (in the case of double figure).

5. Pay attention to the impact of changes in interaction.

Tips for thinking about the problem: Please pay attention to the way electrostatic analysis problems, encounter a new thing, such as a new mobile phone, you can start from its resolution, size, and then calculate its screen density, so that you can immediately know whether some of its design rules are different from the old model. The way of thinking about the problem is crucial, we should try to analyze from this aspect, such as the analysis of static electricity article, rather than just want a final result. Because process is important, especially for designers.

Latest comments