Recently, I have been working on UI design for front-end development. I thought it would be a simple task, but it took me a whole day to complete. The most frustrating part was that I didn't do enough research when setting the canvas size in Photoshop. I misunderstood the meaning of size mentioned by my classmates, which resulted in the UI being one size smaller than intended. 😂 What should I do? Redraw it, of course~
Therefore, I am recording this for future reference.
Physical Size#
Inch#
Inch is a commonly used unit to measure device size.
It represents the length of the screen diagonal.
1 inch ≈ 2.54 cm
Resolution#
Pixel#
Pixel is the smallest unit of a screen, and all images are made up of countless pixels.
Pixels are used to measure size, and the number of pixels is proportional to the size.
Screen Resolution#
Resolution refers to the number of pixels in the vertical and horizontal directions, for example,
1080*1920.
It refers to the pixel size of a specific device screen. When we talk about the resolution of a phone or a computer, we are referring to the screen resolution of the device.
A higher screen resolution does not necessarily mean a clearer screen. It also depends on the physical size of the device. In other words, resolution needs to be combined with physical size to reflect clarity, as it directly represents the total number of pixels that the screen can accommodate. If the physical size of the device is different, comparing resolutions may not be meaningful. Of course, here the term "pixel" refers to physical pixels, which will be mentioned later.
Remember that screen resolution/device-independent pixels (logical pixels) = pixel density (device pixel ratio) defines clarity.
Image Resolution#
Image resolution refers to the number of pixels in a picture in the vertical and horizontal directions.
It is similar to the definition of screen resolution, but one defines the screen and the other defines the image. The higher the resolution at the same size, the clearer the image.
PPI (Pixel per Inch)#
PPI refers to the number of pixels per inch and can be used to describe the clarity of a screen.
The higher the PPI, the better the image quality.
It is worth noting that when designing, it is generally agreed that:
Mobile screens use 72 PPI, and posters use 300 PPI.
It is said that when the PPI reaches 300 or above, it gives a sense of reality. Therefore, the PPI of a poster should reach this value. If the PPI of a mobile screen is set too high, it will result in slow loading and lagging. Generally, 72 PPI is sufficient.
The formula for calculating PPI:
DPI (Dot per Inch)
DPI refers to the number of dots per inch. It can refer to screen pixels, image pixels, or printer dots.
When describing images and screens, DPI and PPI can be considered equivalent.
When using a printer, since the dots printed by the printer are not arranged regularly and there are gaps between the dots, DPI is also referred to as the density of printer dots.
The higher the DPI of a printer, the higher the image quality, but it also means more ink consumption and longer printing time.
Logical Pixels and Physical Pixels#
The pixels we have seen so far are real pixels, which are physical pixels.
However, with the development of technology, logical pixels have emerged, which are composed of multiple physical pixels.
This was first proposed by Steve Jobs at the release of the Retina Display on the iPhone 4.
A straightforward comparison is that an image with a resolution of 10801920 composed of logical pixels (assuming one logical pixel consists of three physical pixels) is three times the size of an image with a resolution of 10801920 composed of physical pixels. Imagine compressing this image with three times the size into an image with the same size. The clarity would suddenly increase, wouldn't it?
Device-Independent Pixels#
Device-independent pixels refer to the original size of a device, and here, pixels refer to logical pixels.
By opening the developer tools in Chrome, we can simulate the display of various mobile phone models. Each model will display a size, such as "375x812" for the iPhone X. The actual resolution of the iPhone X is much higher than this, and what is displayed here is the device-independent pixels.
Device Pixel Ratio (DPR)#
Device pixel ratio, also known as DIP or DP, refers to the ratio of physical pixels to logical pixels on a device, also known as the multiplier.
Development Issues#
Mobile End#
The unit of measurement for sizes in iOS is "pt," and in Android, it is "dp." In React Native, no specific unit is specified, but they are actually device-independent pixels (dp).
Web End#
CSS pixels use device-independent pixels (logical pixels).
When preparing UI design drafts, prepare 2x and 3x pixel sizes based on the screen quality (Retina or high-density screens).
When writing CSS, the most commonly used unit is "px," which refers to CSS pixels. When the page zoom factor is set to 100%, one CSS pixel is equal to one device-independent pixel.
However, CSS pixels can be easily changed. When a user zooms in on the browser, CSS pixels will be enlarged, causing one CSS pixel to span more physical pixels.
Page zoom factor = CSS pixels / device-independent pixels
Screen Issues#
We often use "P" and "K" to measure screen quality.
"P" represents the number of pixels in the vertical direction of the screen.
1080P means that the screen has 1080 pixels in the vertical direction.
"K" represents the number of pixels in the horizontal direction of the screen.
K represents how many 1024 pixels are in the horizontal direction of the screen. If the number of pixels exceeds 4096, it is generally referred to as a 4K screen.
Reference article: What You Need to Know About Mobile Adaptation