Understand the design and size adjustments after the release of iPhone 12 in three minutes

Preface

It has been a while since the iPhone 12 series was released.

The reason why I didn’t write the article right away is because the iPhone 12 mini and iPhone 12 Pro Max will not be officially released until November 13.

Before this, even Apple's offline stores did not have prototypes.

To be on the safe side, we started writing the article after we got our hands on the real Mini and Max machines.

I completed the text part a week ago, and this week I finally finished dozens of illustrations, and now they are meeting you all.

In order to help new students better understand the content of this article, I will briefly mention some necessary information about adaptation.

This article is about 3,200 words and is divided into the following six parts:

Basic parameters

Search for content related to mobile phone interface adaptation on the Internet. You will often see the following parameters mentioned in the article: such as screen resolution (physical resolution), screen size, PPI value...

In fact, when dealing with common mobile phone interface adaptation, designers only need to pay attention to the following three basic parameters: rendering pixels (Pixel), logical pixels (Point), and magnification (Scale).

Rendering pixel (Pixel) can be understood as the image size obtained when taking a screenshot on a mobile phone, and the unit is px;

Logical pixels (Point) can be understood as the size used by programmers when drawing pages with code, also known as "1x image size". For example, the corresponding model size in Sketch

It corresponds to the logical pixel size of the mobile phone.

Scale: Because there is a certain proportional relationship between logical pixels and rendered pixels, this ratio is usually called the scale. For example, the @2x and @3x suffixes in the cut image correspond to the scale values.

It is worth mentioning that the magnification is not necessarily an integer, for example, the magnification of Samsung GALAXY J2 (540×960) is @1.5x;

The magnification of Huawei M3 Life 8.0" (1920×1200) is @2.25x

Two types of adaptation

There are two main adaptation methods:

1. Ratio adaptation

It is mainly used in devices with the same logical pixels but different magnifications.

For example, iPhone 11 is adapted to iPhone 11 Pro Max

The logical pixels of the two adaptations are both 414 x 896pt, but the magnifications are different, the former is @2x and the latter is @3x.

2. Logical pixel adaptation

This adaptation method is applied to two devices with the same magnification but different logical pixels.

For example, iPhone 11 to iPhone 8:

The magnification of both devices is @2x, and the logical pixels are: 414 x 896pt and 375 x 667pt respectively.

If the magnification and logical pixels of the two devices are different, such as iPhone 8 to iPhone 11 Pro Max

Usually logical pixel adaptation is performed first, and then magnification adaptation is performed.

Since the magnification adaptation is relatively simple, only two factors need to be considered: the dividing line and the cutting image.

Therefore, what designers usually refer to as mobile phone adaptation and size adaptation usually refer to logical pixel adaptation.

Therefore, figuring out what types of logical pixels the iPhone has becomes the key to iPhone adaptation and acceptance.

iPhone 12’s impact on design

There are four models in the iPhone 12 series released in October this year.

Before talking about the new devices, let’s briefly review several mainstream iPhone models and their corresponding parameters as of the iPhone 11 series:

It can be seen from the chart that before the release of iPhone 12, there were 6 different resolutions of iPhones on the market that needed to be adapted.

So what changes does the iPhone 12 bring?

From the official screen data, we can see that the physical pixels of the four devices are as follows:

As can be seen from the picture, this year's iPhone has added 3 new screen sizes. (The physical resolution of iPhone 12 and iPhone 12 Pro is the same, so they are combined)

But in terms of design, the four mobile phones in the iPhone 12 series only added two new design sizes for designers: 1170×2532 and 1284×2778.

Key points: There are currently some articles that mistakenly take the iPhone 12 mini's screen parameter of 1080×2340 as the final drawing size, believing that the logical pixel of 12 mini is 360x780pt.

In fact, the iPhone 12 mini uses the same rendering pixels as the iPhone X, which is 1125 x 2436px, and the corresponding logical pixels are 375x812pt.

To explain this problem, we have to start with the iPhone Plus series of mobile phones that everyone is more familiar with.

As mentioned earlier, when adapting the mobile phone interface, designers only need to pay attention to three basic parameters: rendering pixels (Pixel), logical pixels (Point) and magnification (Scale).

The rendered pixels are usually consistent with the physical pixels of the screen, such as the common iPhone 8, iPhone XS, and iPhone 11 Pro.

This also makes it easy for people to confuse physical pixels with rendered pixels.

But since we said "usually remain consistent", there will always be exceptions.

For example, for the iPhone Plus series, the official screen parameters (physical pixels) are 1080×1920, but the rendered pixels are 1242×2208.

Therefore, when designers make graphics for the Plus series, they have to output them in 1242×2208.

The situation with the new iPhone 12 mini is the same as the Plus series:

The official physical pixel size is 1080×2340, but after getting the real device, it was measured that the rendering pixels used by 12 mini are 1125×2436, which is consistent with the rendering pixels of iPhone X.

After clarifying this, let’s take a look at the parameters of the iPhone 12 series devices:

If we only look at logical pixels, including the iPhone 12 series, there are currently 7 sizes of iPhone.

Designers need to pay attention to these dimensions and complete the acceptance inspection of relevant models.

However, we are not done here. Consider that the iPhone has two modes of view: "standard" and "enlarged".

The size of the zoomed-in mode also needs to be taken into account.

At present, the three adaptation factors corresponding to the amplification modes of each device are as follows:

Among them, 320x693pt is a brand new size, which appears in three devices: 12 mini, 12, and 12 Pro.

Therefore, after taking the magnification mode into account, the iPhone's logical pixels are counted into 8 sizes in total.

If you compare the width and height of the smallest and largest sizes, the width differs by 108pt and the height differs by 358pt.

For those pages that need to be partially exposed when sliding horizontally, it is necessary to redesign the size or adjust the local adaptation plan.

This is also a problem for some single-screen pages.

Changes in iPhone market share

Let's think about this question first. Among the following iPhone sizes, which size do you think has the highest market share?

Before the release of iPhone 12, among these iPhone screen sizes, which iPhone do you think has the largest market share?

I believe that most designers will subconsciously think that the 750×1334 size model accounts for the largest proportion. After all, in the past many years, everyone has used this size to make pictures.

So what is the actual situation?

Let’s first look at the data of Alibaba Umeng on May 1 this year:

PS: Data companies count the physical resolution of the device, not the rendered pixels. So the 1920×1080 here corresponds to the Plus series of phones.

In May this year, the Plus series iPhone models had the highest market share in China, while the 750×1334 and 1125×2436 sizes favored by designers ranked second and third respectively.

Among them, the third-ranked 1125×2436 (the corresponding design size of @2x is 750×1624) still has a large gap with the first two.

So, as time goes by, will the proportion of 1125×2436 models gradually increase and gradually occupy the first place?

If you have the same idea, I'm afraid you will be disappointed again.

Looking at the incremental data of iPhone in May, we can find an interesting situation:

In terms of incremental growth, 828×1792 (corresponding to iPhone 11) grew by 51.9%, far ahead of the second place 1125×2436.

Next, let’s take a look at the latest iPhone inventory data for November:

828×1792 has risen from the fourth place to the third place.

Let’s look at the incremental data for November:

The growth rate of 828×1792 has increased from 51.9% in May to 63.8% recently.

If the latest iPhone 12 series is not taken into account, 828×1792 is expected to replace the Plus series and become the iPhone size with the largest market share.

While the number of devices with a screen size of 828×1792 is growing rapidly, the growth rate of devices with a screen size of 1125×2436 is decreasing. It has dropped from 27.8% in May to 10.2% now.

iPhone design size evolution

In the past, designers often used a design size of 750×1334. However, as the iPhone enters the full-screen era, it is obviously no longer appropriate to use 750×1334 as the benchmark size for design.

The models corresponding to the currently commonly used 750×1624 size (corresponding to the size of 1125×2436 under @2x) have a pitifully small share in both the existing market and the incremental market.

Among the newly released iPhone 12 series, only the 12 mini uses 1125×2436 as the rendering pixel size. The other three models use new rendering pixels and logical pixels.

It is hard to imagine that a device with a size of 1125×2436 can still become the mainstream resolution size of the iPhone, just like the 750×1334 size in the past...

When choosing the design reference size, in addition to considering the equipment occupancy rate, the cost of adaptation should also be taken into account. For example, when there are three sizes of equipment to be designed, the middle size is preferred as the reference size.

Taking the middle size as the benchmark, whether it is adapted to a small size or a large size, the adjustment range of the interface is the smallest and the deviation will not be too large.

On the contrary, if you choose small or large as the benchmark, the page may feel okay when it is adapted to the middle size, but problems may easily arise when it is adapted to the relatively extreme size on the other side.

New, design basis

The drawing base size used by interface designers is not always fixed. Looking back:

The benchmark size used by designers has changed four times, from the original 640×960, to 640×1136, to 750×1334, and now to 750×1624. Designers adjust the design size almost every two years with the release of a new iPhone. Now with the release of iPhone 12 and the low market share of 750×1624 models, we can rethink which of the many iPhone sizes is more suitable as the benchmark size for design.

Here we will not consider the designer's inertial reliance on size, but only consider the two aspects of compatibility and market share. For compatibility, we follow the principle of "large, medium and small" to choose the middle size. We can easily choose the middle size among the current 8 iPhone sizes (referring to logical pixels):

They are 375x812pt and 390x844pt respectively. The former corresponds to 1125x2436px and the latter corresponds to 1170x2532px. If we further convert them into the familiar @2x size, they correspond to: 750×1624 and 780×1688 respectively.

In terms of market share, as Apple gradually stops selling previous devices, it is only a matter of time before the resolution of the new iPhone takes over the market. Among the new devices, only the iPhone 12 mini uses the familiar 1125x2436px (375x812pt, corresponding to the size of 750x1624px under @2x). If we extrapolate based on previous experience, it is only a matter of time before the iPhone 12 (1170×2532) replaces the iPhone 11 (828×1792) to become the best-selling device with the highest share.

As of the release of iPhone 12, it is clear that 390x844pt (corresponding to 780x1688px at @2x) is more suitable as the benchmark size for future designs.