Whether it is UI or interaction, it is an "imported product" from abroad. When translating into Chinese, there may be some unintelligible errors. During propagation, these errors may be further amplified. We can see many design-related articles or books on the Internet, in which the same things may be expressed differently in different places, and some of them may be contradictory. This brings great inconvenience to the work of our designers, because there is no unified standard. Among them, pixel and resolution are the most typical. You may have read many similar articles, but still do not understand what is pixel and what is resolution. Well, I hope this article of mine can help you resolve this confusion.
The relationship between pixels and resolution
I think the reason a lot of designers don't understand resolution and pixels is because they don't understand what an inch is. When we were young, the TVs at home would say 21-inch large color TVs, 25-inch large color TVs, 29-inch large color TVs, etc. Including mobile phones we will also say 4.7 inches, 5.0 inches, etc. But the display screen is a surface after all, and you use inches to represent a surface, so many people will mistake an inch as a unit of area, which means that an inch is regarded as a square inch.
Designers who think of inches as a unit of area will have a completely different understanding of resolution. In fact, the inch here refers to the length of the diagonal of the screen, and the inch is actually a unit of length.
There are two types of resolution, ppi and dpi.
ppi: The number of pixels per inch (length).
dpi: The number of dots per inch (length).
For dpi, I think as long as you understand it, ppi is more important. From the above definition, it can be seen that the difference between dpi and ppi is not big, except that the pixel (px) is the smallest design unit of the designer, and the point (pt) is the smallest development unit of iOS. What we call double image and triple image in daily life means that there are two pixels or three pixels in a point on the screen. Whether a device should use a double image or a triple image only needs to look at the ratio of ppi to dpi. (ppi/dpi=2.6 in ps:plus, approximately equal to 3)
Some designers may feel that this knowledge is useless, or that this knowledge belongs to the front-end and has nothing to do with them. But mastering some basic development knowledge can help us complete the design work better. Next, I will give three examples to illustrate.
Resolution conversion
As I said earlier, designers only need to know about dpi. What they really need to master is ppi. So what kind of help can ppi bring us? Because the physical size of a pixel is not absolute, it will change accordingly with the ppi of the screen. Knowing b2b data the ppi will help us avoid mistakes.
For example, we often see the numbers 44 and 88 in the design specifications given by iOS. So how did 44 come about? In fact, the minimum clickable element size recommended by iOS is 44*44 px. Take the iPhone1 as an example, because when this design specification was proposed, Apple had not yet adapted to the retina screen. Apple only started to adopt the retina screen when the iPhone4 was introduced. The screen ppi at the time was 163px. The physical size that the user can click on the screen is 7mm-9mm. We calculate with 7mm, there are 163 pixels in one inch, and 25.4mm in one inch, so how many pixels should there be in 7mm?