We call ourselves UI/UX/PD/etc designers, but we don’t know anything about the screen of the device we’re working on
What is DPI and what is PPI?
Dpi, PPI, DP, PT, SP and so on these units we contact every day, but I am afraid there are not too many designers who really understand these units, after all, it is really a little complicated, let alone designers who learn art, many programmers do not understand. However, as a UI/UX/PD/etc designer, it is almost a daily occurrence to make a joke because you do not know these knowledge. Do you think it is really good that you do not even know your own computer screen to do design?
This sharing will try not to involve mathematics, try to use the most simple language, try to use the most close to life to remove all these doubts in the mind of patients and friends present here.
DPI, short for Dots Per Inch, was originally used to describe the performance of a printer, meaning the maximum number of ink Dots a printer could use to produce one Inch of content. At present, the common home black and white printers on the market generally go to 600*600 DPI and home color photo printers can go to 5760*1440 Dpi. The higher the DPI, the more ink dots per inch, and the sharper your print will be.
PPI is an acronym for Pixels Per Inch, which describes the pixel density of a screen. The printing material we mentioned above forms an image with an infinite number of dots of ink, and the screen also forms an image with a certain number of dots of light. Ever see those red LED screens on the street? The LED lights above are the luminous points of this screen. The Principle of the Retina display of the MacBook we use is the same as these very rough red-letter display, but the density of the luminous points of the Retina display is so high that the human eye can no longer see the sense of granularity. For screen PPI is used to describe the amount of light dots per inch, it shows a screen markers of high and low density, these markers we are more often called pixels, a screen wide high there is a few inches at the time of production is good, high and wide each can accommodate how many pixels, and at the time of production is good, So what we call PPI is a physical unit.
To give a simple example, the iPhone(6~7) we have is 2.3 inches wide and 4.1 inches high, and the Pythagorean Theorem dictates that the screen size (screen diagonal distance) is 4.7 inches. ** Meanwhile, the iPhone(6-7) screen is 750 pixels wide (per row) and 1334 pixels high (per vertical).
Resolution, pixels, and screen size
PPI refers to pixel density, while resolution refers to the pixel size of a screen. For example, 1334*750 is the resolution of an iPhone (6-7). It is a misrepresentation to say that the iPhone (6-7) has a resolution of 326, which is its pixel density in PPI.
It’s a tricky question to ask someone how big a pixel is. Although we say pixels are the luminous dots that make up the screen and are physical, pixels have no size outside of the screen size. You can cram 1920px by 1080px pixels into a 40-inch xiaomi TV, and you can cram the same number of pixels into a 5.5-inch iPhone7 Plus. Each pixel grain will of course be larger than the pixels of a 5.5-inch phone. Therefore, just looking at the screen pixel size does not have much practical significance for designers, but the pixel density (PPI) calculated by the resolution is what we designers should care about. We can calculate the screen pixel density by the screen resolution and screen size.
Again, use the iPhone (6~7) as an example. We know that the screen has a horizontal physical size of 2.3 inches and 750 pixels. Based on the following formula, we can calculate that the screen size of the iPhone (6-7) is 326 PPI, which means 326 pixels per inch.
In fact, no matter how we divide it, the calculated pixel density (PPI) is going to be this number, so if the width is pixels divided by the width physical length, and if the height is pixels divided by the height physical length, it’s going to be close to 326.
What is the impact on the design
The physical dimensions of a 326 by 326px square displayed on an iPhone 7 will be 1 by 1 inch. That’s because the screen holds 326 pixels per inch, so 326px adds up to just one inch. If we could turn down the PPI of the iPhone 7 screen by 50% to 163, the physical size of the color block would be 2 inches by 2 inches. For the same number of pixels, it would look twice as large. Yi! Why is that?
Since our color bar is 326 by 326px, this 163PPI fake iPhone 7 has only 163 pixels per inch. To display a 326 by 326px color bar, it would have to use an extra inch of the screen, so the color bar looks twice as large on the screen.
summary
- Pixels themselves have no size. You can cram 1920px by 1080px pixels into a 40-inch xiaomi TV or cram the same number into a 5.5-inch iPhone7 Plus.
- It only makes sense to talk about pixels in conjunction with the screen size, because we can figure out the PPI of that screen.
- Although the concepts of DPI and PPI are similar, I advise you not to use them together, although many people may tell you that it is not relevant.
- In the design process, we don’t necessarily have to calculate the actual dimensions of various things, but the understanding of the principle can give you a low level of awareness, or what we often call “consciousness”. Don’t assume that what’s on everyone’s screen is the same as what’s on yours.
What are DP, PT and SP?
DP or DiP stands for Device Independent Pixel, PT stands for Point, DP for Android and PT for iOS. But fundamentally they all mean the same thing.
In the last article we took a close look at some of the most basic attributes of the screen — resolution, PPI, and physical size — and it seemed that if we knew these things we couldn’t do anything wrong with our design. But a smart kid might find something wrong. We can’t know every screen and then design for that screen, right? Of all the screens in the world, how many drafts I have to draw for that one interface!
Yes, if that were the case, it would be impossible not only to redesign but to rewrite the program for a different screen. But not only did we think of this problem, but the computer and smartphone manufacturers thought of this problem, and in order to make it easier for programmers and designers to solve the adaptation problem, to get more developers to develop software for them, they used a very clever way. That’s why we have DP, PT, SP, etc.
The necessity of analyzing these units may be clearer from a development point of view.
Programmers build interfaces just like we designers do. First, there is a canvas. A canvas represents a screen for the device. For the iPhone (6-7), the optimal size for this canvas is 375 by 667pt. The following is a programmer’s canvas, which looks like this, a bit like Sketch, and notice the numbers in the red box.
Wait, didn’t the iPhone (6-7) have 750 x 1334px resolution? What is this strange thing? This is the logical point resolution (or virtual point resolution) of the iPhone (6~7), which is a mechanism designed to deal with screen sizes. IOS uses this 375 by 667pt canvas for a double rendering to fill the 750 by 1334px screen. This is one of the reasons why so many designers recommend the use of one-size diagrams, which are the closest thing to a development environment and allow developers to set the dimensions and positions of elements directly from your draft without converting.
For example, if you draw a 44 by 44px button in Sketch using a double draft (375 by 667px canvas), for development purposes the button is not 44px on the canvas, it is 44 pt. ** Yes, we output the image of the button as 88px (@2), or 132px (@3), but what we output is a.png image of the “skin” of the button. ** Px is dead, PT is alive, and facing iPhone 7, 44PT will be rendered as a 88px button. On the iPhone 7 Plus, it will be rendered as a 132px button with your @3.png skin on top. The ** system is a mechanism to ensure that a single layout file can be used to layout screens with different resolutions and PPI as correctly as possible.
Much the same goes for DP or DiP, except this unit is used for Android development.
SP stands for scale-Independent Pixels, a unit commonly used for font sizes on Android devices. It is similar to the concept of DP and PT, and can render text at different screen sizes.
Rory’s got so much to say. Do you want a picture?
Using the iPhone (6-7) as an example, this is true of other devices, including computers, phones, tablets, and even smartwatches.
summary
- Don’t want to see the picture above 233333.
Cutting and annotation of iOS
There are two main types of devices running iOS, the iPhone and the iPad. (Aside from the iPod Thouch, which is basically the same as the iPhone.)
iPhones
On the iPhone, we went from the non-Retina iPhone3G/S to the iPhone 7/Plus.
- Apple introduced the Retina display to its smartphone for the first time with the iPhone 4/S. Note that the screen size is the same as the iPhone 3G/S, which is 3.5 inches, but the resolution is four times higher, which means that the same screen has four times as many pixels and a PPI of 326 is twice as high.
- The iPhone 5/S/C has a 4-inch screen. It’s worth noting that the iPhone 5/S/C screen remains the same as the iPhone 4/S with 640 pixels in landscape, and the horizontal physical size remains the same, 2.0 inches in landscape. The sides of the screen get a little bit longer, PPI stays the same.
- The iPhone 6/7 (Plus) has 4.7-inch and 5.5-inch screens. Unprecedented size, unprecedented split screen, unprecedented logical resolution, but also unprecedented physical resolution. The non-Plus model maintained 326 PPI, while the Plus went to 401 PPI. Bigger screen, higher resolution, iOS designers need to output @3x cutout from this point on.
One small feature of the Plus has to be noted.
On the iPhone 6/7, the system does a double render of a 350*667pt logical canvas, which becomes 750*1334, and then projects the interface onto the screen. The Plus model is similar, and the optimal size of its logical canvas is 414*736pt. (Since the logical resolution is not too different from that of non-PLUS models, there is no big problem when we only use one time drawing for design. The error was reduced by the programmer using some technical layout tricks) and then the system performed a triple render to 1242 by 2208px. However, the Resolution of the Plus model is 1080 × 1920px, so how can the logical canvas render a different size? How can it accurately project the entire screen?
On the Plus model, the render 1242*2208px will be sampled down to 1080*1920px before being projected onto the screen. Let’s look at the picture.
1080*1920px is about 15% smaller than 1242*2208px, so many sizes will have decimal numbers, such as 131.3244 pixels, which will blur the edges of the image. Almost all images on the Plus model are not whole numbers. But thanks to the high-resolution Retina display, it may not be visible to the naked eye (try it if you look closely). For the most part, Plus’s reduced sampling mechanism doesn’t have much of an impact on our design. Just output the @3x graph, but the smaller the element, the bigger the impact.
iPads
On the iPad side we went from the first generation iPad with a non-Retina display to the 12.9-inch iPad Pro that was meant to replace a computer to the iPad Mini 1/2/3/4.
- Apple introduced a Retina display for the second generation of the iPad. The iPad 2/Air/Air 2/Pro both maintain 2048*1536 resolution and 264 PPI. The 7.9-inch iPad has maintained this configuration.
- It may surprise you, but with the exception of the original iPad Mini, which was not retina display, all the minis (generation 2 to 4) have the same screen resolution as the 7.9-inch iPad, with a physical resolution of 2048 x 1536. The logical resolution was 768 x 1024, and since the screen was 7.9 inches, the PPI went to 326.
- The 12.9-inch iPad Pro has a huge screen with a physical resolution of 2732 x 2048 and a logical resolution of 1366 x 1023, while the PPI is 264. Since the logical resolution is too different from other models, we can’t use the same drawing as normal iPad to do the design. Yes, you’d better start from scratch.
Some of you may have noticed that the screen parameters of both iPhone and iPad have not changed much for several generations. The higher the PPI, the better. Has It been a long time since Apple upgraded its screen, a heirloom screen to fool consumers? No, because the human eye can according to the human eye to the requirement of pixel density changes distance screen, RMBP PPI is 109, and finished by phone, but we still feel that to use at ordinary times is very clear and sharp, because when we use computer eyes from the screen will than mobile phone away, don’t need such a high pixel density can also eliminate grainy. ** The corresponding use distance to prepare the corresponding PPI, the so-called enough is good. ** High PPI does not result in much improvement in image quality, but can lead to a series of negative consequences, including increased processor rendering burden, increased battery burden, bad design developers, and increased screen manufacturing costs. There were 2K and even 4K screens in the early days of the Android market, but they’ve all disappeared, and consumers simply want those high-resolution screens. Apple is wise to maintain a stable PPI on all devices, from computers to smartphones to smartwatches. Stable screen parameters are very, very helpful to design and development, and this stability is more convenient for developers than anyone might think.
Annotate and Slice – Take Chrome as an example
In the days before Apple introduced the Plus, designers typically only needed to export 1x and 2x graphics. The 1x is for the iPhone without retina display and the 2x is for the iPhone with Retina display. Since the Plus model came out and started to output 3x graphics, the iPhone without retina display is too old to worry about. We usually end file names with the suffix @2x or @3x to indicate the size of the file, as shown in the image above. This is an iOS specification, but it’s worth keeping track of.
As for the iPad version, the rules are not too different, except that the iPad doesn’t require a triple slice.
summary
- @2X, @3X, please be sure to add the corresponding suffix to the corresponding material.
- For current screen sizes on the market, it is no longer necessary to output a double image, while a double or triple image must be output.
- The file name of the double triple map must be the same, otherwise it will be hacked to death.
- Make design with double drawing, annotate document with double drawing output, and finally output double and triple drawing.
- If there are no special circumstances, ensure that the files are in.png format.
- The annotated document for the output of a double sketch should be in pt, not PX.
Android slice and annotation
MDPI,HDPI, XHDPI, XXHDPI and XXXHDPI
As we all know, Android is an open source system. Unlike iOS, only Apple’s own devices can run, and the screen size has always been relatively stable. However, the screen size of devices running Android system is very different, which is one of the reasons why people often say that Android devices are fragmented. The fragmentation has improved a lot today. Although Google’s open source approach to Android has not changed, Oems are starting to use less “weird” screens, and some lower-resolution models have become obsolete over time. However, after the launch of iOS Plus model, the problem of iOS screen fragmentation has become prominent. I believe that the problem of screen fragmentation exists on both platforms and everyone is similar, so you don’t have to worry about it when designing Android products.
Similar to iOS, designers also need to output slices at different rates, but at a higher rate. The programmer will put all the different power cuts into the same installation package, and the system will automatically select the correct power cuts according to the screen resolution during operation.
Frankly, if we want to struggle to the logic of each screen resolution, then Android fragmentation is very serious, but we know that as long as the logic of poor resolution not too far, we can use the same draft for the design, the output cut figure, the error will be impossible to avoid but will be within an acceptable range. For Android products, we usually use 360 × 640px as a double design.
So far, there are five resolutions that need to be output: 1 times MDPI, 1.5 times HDPI, 2 times XHDPI, 3 times XXHDPI and 4 times XXXHDPI (Samsung’s recently released S8 is this multiplier). Ldpi and TVDPI can be ignored. One thing that needs to be pointed out is that the eliminated TVDPI resolution is now widely used in wearable devices running Android system, such as Moto 360 smart hand, which was very popular a while ago. If you want to design the products above the watch, then you have to output the cut figure of this multiplier.
Here is a picture to let you have a look at the representative models of various levels of DPI. Some younger students (such as myself) may not even have heard of them. It is good for you to have a look and broaden your horizon.
Annotate and Slice – Take Chrome as an example
As with iOS, I still recommend that you use a double draft for your design, and then output the various power cuts, but Android requires the naming and management of image resources is completely different from iOS.
In the last chapter, we briefly introduced the naming method of iOS image resources. It is very simple, that is, the file name plus @2X, @3X small marks. However, when we came to the Andorid platform, we didn’t call it that.
Below is a long image of how Android Project Files manage image resources. You can see that there are several folders, from drawable-hdpi to drawable-xxxhdpi, and you can guess what, these folders contain various carefully designed.png images.
The Android system automatically selects which folder to use according to the screen properties. For example, when running on a new Galaxy S8, the system will automatically select images from the drawable-xxxhdpi folder. For the new Mi 6, the system will automatically select images from the drawable-xxhdpi folder.
In addition, the names of the pictures we output should all be the same, and different magnations should be installed to export, without suffixes or other marks. Five resources with different magnations from the same picture are put into corresponding folders respectively. Bulk exports with the magic Sketch Measure and programmers will be on their knees thanking you.
It might look something like this:
Drawable -mdpi/[filename].png
Drawable -xhdpi/[filename].png
Drawable -xxhdpi/[filename].png
Drawable -xxxhdpi/[filename].png
Take Chrome, which runs on the Nexus9 Android tablet, as an example. Chrome comes with all five of these rates in its installation package, but on the Nexus9 tablet, it used xhdpi to fit itself.
There’s a very important point here that you have to pay attention to. An image cut at 1.5 times will inevitably have a decimal number, such as 33pt * 1.5 = 49.5px, which will make the edges of the image unendurably blurred. So when we encounter these two multiplies, we have to manually remove the decimal, for example by changing the size to 50px, but the magic just mentioned does this automatically. For the sake of your health, don’t send 49.5 × 49.5px images to programmers.
It’s too long to see
- It is said that there are seven resolutions to cut, but in terms of the current market devices you only need to pay attention to mdPI, HDPI, XHDPI, XXHDPI, XXXHDPI these five are enough. For wearable devices, tvDPI may be used.
- Design 360 by 640px as a double draft.
- Use dp as the unit for annotation (iOS uses PT, but it actually means the same thing)
- If the size appears as a decimal, remove the decimal manually. Using Sketch Measure to export, there is no need to manually lift, plug-in will do it for you.
- Output. PNG image resources.
- Remember the naming rules, the file name for each multiplier of the same image resource is the same.
DesignCoder Design is a project; After wave: Zhuyuxuan
Everyone is a product manager. Reprint without permission is prohibited.