Beginner's guide to UI design: iOS

This article is the first chapter of UI design, mainly about the development history and design specifications of the mobile iOS system. The reason why iOS is placed in the first chapter is that many companies now adopt the principle of one draft adaptation. Therefore, if you learn the knowledge points of the iOS chapter well, it is equivalent to stepping into the door of UI design (at least you can try to make a design draft through these theories). Only by trying to make a design draft can you find out what you don’t understand in the interface, and learn while practicing. The copyright of some interfaces and material pictures used in this article belongs to the original author. They are only used for learning. Do not use them for commercial purposes.

Table of contents

• The history of iOS
• Screen resolution on iOS
• iOS size specifications

1. The development history of iOS

There are many articles on the Internet about the development history of iOS. Friends who want to know more can go and look for relevant information. Here we think about a question: Why should UI designers know the history of this system? After summarizing, there are only three points: iOS size changes, system changes, and style changes, which will affect UI designers' design drafts. The following figure is a summary of the above three points.

2. iOS screen resolution

When it comes to first draft adaptation, we must first understand a few points about iOS screen resolution. These points will help us understand why the design draft is divided into two-fold and three-fold images. If you find it difficult to understand, just remember the size of the two-fold and three-fold images. After you are familiar with it, you can look back at the theory.

1. Pixels

A pixel is a unit, a small square. It has no fixed physical size, and its physical size is determined by the physical size of the carrier. This small pixel square contains colors, and countless small squares display colors according to their positions to form a picture. (You can think of it as similar to cross stitch) On a screen of the same size, the more pixels there are, the clearer the image will be.

2. PPI vs DPI

PPI and DPI are a pair of brothers that are often talked about. They are both related to density and affect the output quality, but PPI is pixel density, which is how many pixels are contained per inch. DPI is printing precision, which is the number of dots that can be printed per inch. PPI affects the accuracy of the screen display, while DPI affects the accuracy of the printout. In UI design, it is enough to understand the principle of PPI and its application in the interface.

3. Logical Points

From the past models listed above, we can see that there are many screen sizes. Only Apple produces iOS phones, but many companies produce Android phones, so there are many sizes. For this reason, a rule was set to use one of the sizes as the benchmark, and the other sizes are adapted according to this benchmark size ratio. The benchmark design size of the iOS system is 375*667 (also known as the one-time image), and the logical point unit is called pt. 1pt in a one-time image is 1px, which is 2px in a two-time image, and 3px in a three-time image. Therefore, the one-time image we provide to developers allows them to know the size of elements and components in the other multiples of the image based on the unit of pt. In the figure below, the same 44pt circle has different sizes on screens of different multiples:

4. One-time chart, two-time chart, three-time chart

iOS one, two, three times chart definition

The design size of the single-size image on iOS is 375*667, the design size of the double-size image is 750*1334 (the size of iPhone 6, 7, and 8), and the design size of the triple-size image is 1242*2208.

If we multiply the double image by 1.5, the triple image should be 1125*2001. Why is the triple image 1242*2208? This is related to the PPI of the screen. The PPI of iPhone6, 7, 8plus is 401, while the PPI of iPhone6, 7, 8 is 326. In theory, Apple should use 401/326*@[email protected] materials. However, this value has decimals and it is difficult to cut the image. Therefore, in order to facilitate developers, Apple uses @3x materials and then scales them to @2.46x. The scaling ratio is 83%. Apple has selected an approximate ratio of 87% as the final ratio. In this way, the physical resolution size of Apple's plus model accounts for 87% of the virtual resolution size. The physical size of the plus model is 1080*1920. Dividing the two by 87% respectively, we get the virtual design size of 1242*2208.

The above is a virtual triple image, while the iPhone X is a true triple image, its size is 1125*2436. So the triple image is used on the iPhone X.

Application of one, two, and three times charts

Since the first draft can be adapted, the developer can make double and triple pictures according to the size of the one-fold picture in proportion, so why do we need to divide them into one-fold, two-fold and three-fold pictures? In fact, the double pictures here are mainly for cut pictures (cut pictures are certain elements you draw in the interface, such as icons, illustrations, etc. If they are to be placed on screens of different sizes, they must be appropriately increased in multiples, that is, @2x, @3x). Although the design draft only needs one set of styles for the developer to write code, the cut pictures need to be given several sets, otherwise it will be very blurry if only one-fold cut pictures are used to stretch on the double-fold interface (in theory, 1 bitmap pixel corresponds to one physical pixel, and the picture can be displayed accurately. This theory is fine on ordinary screens, but now there are high-definition retina screens. If you still use the original pixel pictures, it will cause insufficient pixels and blur). Therefore, use one-fold cut pictures for one-fold interfaces, two-fold cut pictures for two-fold interfaces, and three-fold cut pictures for three-fold interfaces, and so on.

5. One-Draft Adaptation

Today's development teams usually adapt other sizes according to a set of design drafts and in proportion. Therefore, we only need to provide a set of design drafts, which greatly saves our design time. As for whether to use a one-fold or two-fold image, it depends on personal habits. Both have their pros and cons. I personally like to use a two-fold image, which is 750*1334 in size, because in addition to the advantages of the two-fold image itself, it is also convenient for development and use. The adaptation method of development is also based on personal habits. Some development partners use js to write code, and get the final result by obtaining the screen size and dividing it by a value. If the design draft is made according to the two-fold image size of 750, they don't have to calculate it themselves, which is more convenient.

3. iOS size specifications

1. Fixed part

In the interface, some parts are fixed, and other than those parts, the rest are designable areas. What we do is design the designable areas.

2. Grid layout

In the designable area, when we are making a design draft, we need a framework, which is often called grid layout. With the grid layout specification, the content in the design draft will have a certain regularity, and there will be a sense of rhythm when composing the interface. The interface is composed of rows and columns. The composition rules of these rows and columns are related to the initial definition of the minimum unit. Here I will use the double image size to explain how to make a grid layout. My habit is that the minimum unit is 8px (if the minimum unit you set is other values, you can also substitute it into the following framework theory), so the size setting in the framework is a multiple of 8.

3. Component Modules

Different types of apps have different contents, but generally speaking, they are nothing more than an icon layer and a graphic layout layer. These small elements can be combined into different modules. The icon specifications were previously written in the article "How to draw a set of linear icons? Take a look at this beginner's science summary!", which can be used as a reference, so I won't go into details here. In the graphic layout layer, you should pay attention to the proportion of the picture, the distinction of information levels, the spacing between the title and the content, etc.

Conclusion

If a novice wants to make a good interface, he must first understand the design specifications and determine the interface skeleton. You can usually study various types of excellent apps: how others use typeset, how to use font size, the display ratio of pictures, the style of icons, the interaction method, etc. If you come across some well-designed interfaces, you can save the interface and make notes next to it.

See more, learn more, do more.