With the launch of iPhoneX, how to adapt iPhoneX is a problem that every front-end developer must consider. When the iPhoneX was first launched, Infocode Lan Chang’s H5 development team happened to be working on an H5 project for a cosmetics brand , I also spent some time staying up all night groping for adaptation issues.
the
Resolution comparison
First of all, let’s take a look at the comparison between iPhone X and other iPhones, so that we can design better. Let’s look at the screen density. iPhone 6/7/8 does not have logical resolution, but Plus models and iPhone X have logical resolution. . Please pay attention!
Model actual size comparison
Don’t look at the iPhone X’s 5.8-inch screen, but the real feel is much smaller than the Plus, and only slightly larger than the iPhone 7. People who hate large screens like static electricity have no problem using the iPhone X , Mom no longer has to worry about hitting her face with a slap while looking at her phone on the bed!
Design differences due to resolution
Although it seems to us that the iPhone X has only grown a lot, don’t underestimate the 145pt that has grown out. In fact, the difference is still very big. The physical resolution of the iPhone X is 1125X2436, so what is the double image? 375-812pt, then it seems that the width of the screen has not changed, so the designers are relieved. The cost and difficulty of adaptation have been greatly reduced.
But don’t worry, we haven’t calculated the density yet. Density is a big indicator that determines the difficulty of mobile phone adaptation. Do you remember the formula for density calculation? Yes, it is the following, PPI (Pixels Per Inch), which is the horizontal square +Square vertically and then open the root sign.
We see that the screen density of the iPhone X is higher than that of the Plus at logical resolutions, 444 and 401 respectively, but the actual density of the iPhone X is smaller than that of the Plus, 458 and 489 respectively. At this time, according to the screen density, we can know that they are all @3x, that is, the three times the picture. Therefore, in the transition from plus to iPhone X, most of the adaptation cost will be handed over to engineers.
What the designer should do – pay attention to the safe area
If the safe area on both sides of the screen is something that any mobile phone needs to pay attention to (that is, leave appropriate space on the left and right sides to avoid accidental touches and ensure visual effects. The specific amount of space is determined by your design draft. Apple does not How much is not specified).
Then on the iPhone X, we also need to pay attention to two other important security areas, which are the two pieces of content on the top and bottom of the screen: the upper part is the “notch” area, which can only contain some content such as system status, and the notch area needs to be in the design. reflected in the manuscript. Then the bottom of the screen is the content that many designers will ignore, which is a virtual control bar, which acts as the home button with the magic bar, so we can’t let the content conflict with this bar, so you will find the standard suitable The configured applications leave a lot of space at the bottom of the screen. Next, let’s take a look at the applications that are now claimed to be adapted, which ones are correct, and which ones have problems?
Obviously, the Taobao on the left is a bit exaggerated, the WeChat in the middle is well adapted, and the one on the far right is, well, not adapted at all.
In addition, we can also learn from this screenshot that there are no bangs in the screenshot.
The size of the safe area?
In the double image design mode, the height of the upper Status bar is 44pt, and the lower control bar, please leave a height of at least 34pt. Note that I am talking about the double image design mode, and the unit is pt instead of pixel. Some students may ask, how to convert to pixels? After all, the iPhone X is a triple image, 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 based on the previous design draft. Isn’t it very simple?
What the designer has to do – modify the size of the full-screen image
Because the iPhone X grows a section, the previous full-screen ratio image will be distorted on the iPhone X, as shown in the figure below, so the development engineer may enlarge the original image to fill the entire screen for adaptation. If it is large, then the effect of the rightmost picture in the first row of the picture below will appear, and the upper and lower white borders are very ugly. In another case, your picture may be squeezed and deformed, which is what the second row of pictures looks like.
Therefore, designers have to design a set of pictures for the startup interface, splash screen pictures, and some full-screen floating prompt boxes according to the resolution of iPhone X. Well, our workload has increased again.
What Designers Do – Pay Attention to Color Space
The display screen of the iPhone X uses the P3 color space. Compared with the traditional sRGB color space, the colors it displays will be richer and more realistic. Therefore, the old question of designers comes to “Why do I export pictures in Sketch?” The color is different on the phone? The answer is here. However, Jingjing thinks that we have no solution to this problem. After all, the color space follows the display medium. For example, your monitor is one color space, and your mobile phone is another. Therefore, we will ignore this invisible color difference. Alright.
What the designer has to do – pay attention to the way the video is displayed. Speaking of this, you will definitely complain about the big bangs. After all, it covers part of the video content, but you can also choose to shrink them and display them. It is also a good idea. The bangs are just Do not put anything. The following are Apple’s suggestions, let’s take a look.
What? What do you think of King Pesticide? Come on! Look at the picture below, it’s actually quite good if it doesn’t match.
What the designer has to do – change the interaction The change of the interaction is very obvious on the iPhone X, such as sliding up through the bottom control bar to return to the desktop and so on. You can take a look at the video display at the beginning of this article, and static electricity has introduced it in detail. In short, no matter whether you have a new mobile phone or not, you must adapt it as soon as possible. As for black technology such as face recognition, I have experienced static electricity and think it is amazing! The recognition speed is comparable to fingerprint recognition, and even smoother , sweaty hands like static electricity are really a blessing.
Don’t want to read the long article? Just read the summary!
1. Be sure to pay attention to the safe area of ??iPhone X, it is not enough to stretch the design draft directly
2. Pay attention to the adaptation of full-screen pictures and videos
3. You can use 375-812px to design under the double image, which is compatible with iPhone plus, that is to say, the triple image will become the mainstream?
4. The upper status bar area is 44pt high, and the lower control bar area is at least 34pt high (in case of double image)
5. Pay attention to the impact of changes in interaction methods.
Tips for thinking about problems: Please pay attention to the way static electricity analyzes problems. When you encounter a new thing, such as a new mobile phone, you can start with its resolution and size, and then calculate its screen density. In this way, you can immediately know whether some of its design rules are different from the old models. The way of thinking about problems is very important. You should try to analyze from this aspect, such as analyzing static articles, instead of just wanting a final result. Because the process is actually very important, especially for designers.
