iPhone 12 is coming, how can designers adapt it in advance?

On October 13, Apple held its annual press conference and released four new iPhones. The highlight of the press conference was the introduction of new designs and new features. Here is a brief summary:

I think this design is a return to the iPhone 5/iPad Pro model. I personally like that design very much, I like its compactness and functionality. Wireless charging technology can also allow future Apple laptops (based on ARM) to have a fast charging method.

The difficulty of adaptation is changing

If you have worked on mobile applications or responsive web design, you may know that there are more and more Apple device sizes that need to be adapted. The following picture shows the current artboard presets on Sketch and Figma.

But these new iPhones make phone size more complicated. Remember when Steve Jobs introduced the iPhone 4 with a retina display?

One point he specifically mentioned at the time was that the basic resolution of the iPhone 4 is the same as that of other iPhones, which is 320×480, but the pixel density is twice as high.

It was a great and pure period. You only needed to design a 320×480 design draft and output it to a 2x retina screen size to meet the requirements.

This is very Apple--a clear, easy-to-follow path designed entirely to remove unnecessary complexity.

Come to 2020

Look at all the complicated sizes in the picture above. I haven’t even included the first-generation iPhone SE (320×568) (click to see the full picture)

Because having all these different resolutions adds a lot of complexity, right?

So how should we deal with it?

In the case of iPhone 12 and 12 Pro, we get a new width of 390 according to the tweet below.

But the resolution of the iPhone 12 Mini has dropped to 375×812, the same as the iPhone X. The problem here is that its actual resolution is no longer 3x, but 2.88x. Of course, for smaller screens, it won't cause much of a problem, because most of the actual calculations of how to display objects are done in code.

So how to design it?

The following design example is not ideal, especially the top and bottom spacing needs to be adapted separately. On some phones, the primary button needs to be scrolled, so we have to adjust the entire card and font size to make it compatible with these devices.

Of course, for programmers, it is much easier to debug the UI directly using Swift code, but in the design stage, we still want to see what it will look like on different devices more intuitively. You can use sketch mirror to preview it on your phone, and the design side can actually do more work.

So far, we need to make two sizes of design drafts, namely 375×812 iPhone X size and larger 414×896. It covers most mobile phones, and developers can simply adjust the layout to adapt more content on other few devices.

• But what about the new widths of 390 and 428?
• Should we simply make these phones larger in design?

The answer is it depends. With the same amount of content, the UI can remain the same size, while the content itself can be scaled up and made higher quality.

But simply enlarging each design may lose the layout design we have done in the picture, and the picture may lose balance. The design elements may start to become too big, too small, or too wide.

Also, some of the scaling up and down can cause bad aliasing on very thin lines, since this is all pixel-based approximation, so if you're using very thin/light fonts you might lose some legibility.

Apple solved this problem after iOS7, which introduced bolder fonts and removed most of the thin fonts. But some designers like these thin fonts because they understand them as "delicate" and "good design".

If we try to apply the same "scroll height" to these phones, we'll end up with some unused space, which is certainly not the best fit strategy. This is a bit exaggerated because some phones have different aspect ratios, but it's just to show a general vertical fit principle.

Fold Line

The fold is a classic concept, an invisible line that separates what we normally see on a screen (without scrolling) from the rest of the design. The idea is that all the most important elements should be “on top” to be more easily seen.

There’s some argument that “people don’t scroll”, which sounds a bit silly in modern times (stats suggest we scroll an average of 300 metres on our phones every day).

But it may affect some e-commerce projects, in which the first screen needs to be carefully designed to display as much relevant information as possible on one screen and increase the purchase rate. Of course, we can create an overlay button, but this does not solve the problem of interrupting specific mobile information.

So I think for e-commerce, it might actually be easier to test the experience by scaling up the same design to a larger size because it would give us a more consistent view of what people are seeing across all devices.

A 44pt high button (equivalent to 44px high at 1@x) is 88px high at 2@x, and renders at a uniform 44pt in a 320×480 viewport.

Caiyun Note: I think it is necessary to explain the meaning of the pt unit briefly here:

pt is a unit designed specifically for Apple's operating system. It has nothing to do with the pixel density on the screen, but only with the amount of content on the screen. On the non-Retina screens of the first generation iPhone to iPhone 3GS, one point is equal to one pixel, which can be expressed as @1x; and on the Retina screens of iPhone 4 to iPhone 4s, one point is equal to two pixels, which can be expressed as @2x. Some devices released later (such as iPhone 6 Plus, iPhone X) will have one point equal to three pixels, which can be expressed as @3x. This @1x, @2x, @3x can be called a "scale factor."

Summarize

I missed the days of having two resolutions based on the same viewport. It makes designing experiences much easier and is also very measurable.

iOS is slowly becoming like Android as its interface fragments — with a plethora of resolutions, aspect ratios, and devices adding to the complexity.

Caiyun Note: I think with the arrival of iPhone 12, screen sizes are becoming more and more fragmented and harder to remember. There are two key points that you need to grasp. Let me summarize:

• Apple currently has only three logical screen resolutions: 320pt, 375pt and 414pt.
• There are two ways to adapt the rules: one is to increase the length of the side in the vertical direction, that is, more content can be seen in the vertical direction (iPhone 4s to iPhone 5, from iPhone 8 to iPhone X, from iPhone 8 Plus to iPhone XR, iPhone Xs Max, from iPhone SE 1st generation to iPhone 12 meet this rule); the other is proportional enlargement, that is, more content is directly leaked on the horizontal interface, such as expanding 2 cards to 3 cards. (iPhone 5s to iPhone 6, iPhone 6 Plus, from iPhone X to iPhone Xs Max, iPhone XR meet this rule).