Mobile Device Interface Design: secrets behind the display

With the release of the new iPad, many friends are worried about the new resolution (2048x1536 pixels. For example, worry about designing a brand new iPad application Program Whether a larger display device is required for the designer. For example, the Development difficulty increases due to the need to adapt the resolution. The worries are no less than the complaints we often hear about the various resolutions of Android devices. Is it really terrible to design interfaces for devices with ultra-high or multiple resolutions? Let's take a look at the relationship between the screen size and resolution. If you have any conditions, you can try it. A 22 inch display screen and a 15.4 inch display screen have a resolution of X pixels. They must display the same content: A x 48 pixel square. Through comparison, we can find that the square looks a little smaller on the 15.4 inch display than the 22 inch display. I think everyone can understand this because the physical size of the display is small. In turn, we adjust the display resolution of the smaller 15.4 inch display to 22 inch pixels, and you will find that the square looks bigger than the display. It is a pity that the display effect is not ideal and clear enough. At this point, we can understand that the displayed content decreases as the resolution increases on the screen of the same size. Conversely, the size of a screen with the same resolution increases as the size increases. The above results may be more of a market opportunity for device vendors. They clearly know that to make the display device provide a more delicate visual experience, they must increase resolution in limited screen sizes! Since the pc diy era, major display device manufacturers are destined to participate in this competition. Until the appearance of the 1920x1080 pixel screen, it seems that everyone is somewhat satisfied, higher resolution than this is no longer emphasized. This resolution means that the HDTV level is reached! You can watch HD movies! HD is the most widely used word in advertisements of TV manufacturers or other display equipment manufacturers in recent years. Obviously, neither the resolution nor the size can be infinitely improved. The size of the device is heavy and the resolution is high, which will make the original content look smaller. The displayed content is too small to be clearly visible during normal viewing. Therefore, as the resolution increases, it is imperative to make the content display size appropriate and make the display effect better. So what should we do? The answer is to increase the resolution of the display device, but at the same time, it is necessary to separately provide resources for high-resolution screens to ensure that the final display results are the same or similar. Display the same content on different devices to keep the same or similar physical size, which is especially important for the touch screen. The physical size of the display determines whether the user can operate the content on the display accurately and comfortably. At this time, the screen density is now available! Screen density refers to the pixels arranged along the length and width of the Screen Based on the screen resolution. Low-density screens have only a small number of pixels in the long and wide directions, while high-density screens usually have many, or even a very large number of pixels arranged in the same area. In a screen of the same size, as the resolution increases, the screen density also increases accordingly. Look, this is the superior display effect of high-resolution and high-density screens! [Image Source: Apple official website] We know that in Apple products, PPI (pixels per inch) is used to describe the screen density. In Android, DPI (the number of points per inch) is used to describe the screen density. Next, let's take a look at the popular iPhone, iPad, and Android devices to see how they solve interface design challenges for multi-resolution and high-density screens. IPhone: The first generation of iPhone screen density is 165ppi, and the screen density increased by twice from iPhone 4. When designing the iPhone 4 application interface, the designer still needs to design on the basis of the first-generation iPhone, and then create a set of image resources that are doubled. Because all iPhones use the same size, the physical size of the same content displayed on the two resolutions is identical through system adaptation. IPad: The first generation of iPad screen density is 132ppi, and the brand new iPad screen density is also doubled. When designing the brand new iPad app, we still use the screen of the first-generation iPad as the benchmark, and then provide twice the size of image resources, finally, the system adaptation makes the physical size of the same content displayed on the two resolutions of the same size identical. Android devices: The screens of Android devices are relatively complex because they have various sizes and resolutions. In order to make the screen of various resolutions display the appropriate size for users to read or operate, while also meeting the needs of the diversity of Android devices. As a result, Android officially divided the density levels of various screens into "low density (ldpi)", "medium density (mdpi)", and "high density (hdpi) "," ultra-high density (xhdpi) ", and define" medium density "as the baseline. [Image Source: Android official website]

In this way, when designing the android application interface, we can design the screen with medium density as the benchmark, and then provide corresponding image resources for screens with other density. Finally, the system automatically handles the adaptation, so that the same content can be displayed relatively close to the size on various screens. [Image Source: Android official website]

Back Article At the beginning, we can now know that it is not terrible to design interfaces for devices with ultra-high resolution and multiple resolutions. It is difficult. Although most of our current common displays are in medium density (the current display density of PCs and Mac displays is around 90 to 130), with the gradual promotion of high-resolution and high-density display technology, in the near future, we may need to design the PC or Mac software interface to face the problem of ultra-high resolution and multiple resolutions. /// // The End Of The Body ///////////////// Appendix 1: Formula for Calculating screen Density Interestingly, the screen density of iPhone 4 calculated based on the formula is 330ppi, which is a little higher than the 326ppi officially published by Apple.
Appendix 2: Size, resolution, and density of apple series devices [Picture from @ Love fan er]
Appendix 3: Other screen-related terms Screen Size: It usually refers to the physical size of the screen, which is the diagonal length of the screen. For example, 2.8 inch, 3.7 inch. Resolution: The total number of pixels on the screen. It is usually expressed by "width x length. In most cases, the resolution is expressed as "width x length", but the resolution does not mean the proportion of the screen. Screen ratio: It refers to the ratio of the physical length of the screen to the physical width. We usually call a screen with a ratio of length to width at or as a wide screen, and a screen with a ratio of 4 to 3 as a narrow screen. In addition, an ultra-wide screen with a wider 2.35: 1 aspect ratio also begins to enter the life of enthusiasts. HD: It can be divided into "Standard HD" (also called "quasi HD") and "Full HD ". 720p and 1080i are internationally recognized standard hd TV (HDTV) resolutions. The letter P indicates a row-by-row scan, while the letter I indicates a row-by-row scan. In contrast, 1080i is superior in definition, while P is smoother in dynamic image performance. Full HD (Full HD) 1080p meets both the definition and dynamic performance requirements. It is the highest standard of HDTV and the ultimate goal pursued by many enthusiasts. To achieve a complete HD experience, three conditions must be met simultaneously: HD content + HD decoding + HD screen. Indispensable.