Mobile Device Interface design: The secret behind the screen

New ipad release, many friends have a variety of 2048x1536 resolution (pixel) worry. For example, if you are worried about designing a new ipad application interface, you need to equip your designer with a larger display device. For example, because of the resolution to deal with the adaptation and worry about the development of increased difficulty.

All sorts of worries are no less than what we often hear about the multiple resolutions of Android devices.
Is it really that scary to design an interface for ultra-high or multiple resolution devices?

Let's start with a look at the relationship between screen size and resolution. A qualified friend can try.
A 22-inch display with a 15.4-inch display with a resolution of 1680x1050 pixels. They want to display the same content: a 100x48 pixel size box.
By contrast, the squares look smaller on a 15.4-inch display than the 22-inch display. This reason I think we all can understand, because the screen physical size is small.
Conversely, we adjust the display resolution of the smaller 15.4-inch display to 800x600 pixels, and you'll see that the box looks larger than the 22-inch display. But unfortunately, the display effect is not ideal, not clear enough.

At this point, we can see that in the same size screen, as the resolution increases, the displayed content becomes smaller. Conversely, the same resolution of the screen, with the size of the increase, the content of the display becomes larger.
As a result, there may be more market opportunities for display equipment manufacturers. They know that in order for the display device to provide a more nuanced visual experience, you must increase the resolution in a limited screen size!

Resolution battle, starting from the era of PC DIY, the major display equipment manufacturers are doomed to participate in this contest. Until the advent of the 1920x1080 pixel screen, everyone seemed to be starting to get a little bit more satisfied, and the higher resolution was no longer emphasized. Because this resolution means reaching the HDTV level! You can watch HD movies! HD, in recent years, has been the most popular in the advertising of many TV makers or other display equipment manufacturers.

Clearly, resolution and size cannot be improved indefinitely. Large size equipment bulky, high resolution will make the original content looks smaller. The display of the content is too small, will cause users in the normal viewing distance can not see clearly. Therefore, with the improvement of resolution, both the content display size is suitable, but also let the display effect better, become an urgent need to solve the problem.

So what to do?
The answer is to increase the resolution for the display device, but at the same time provide resources separately for the high-resolution screen to ensure that the final display results are the same or similar. Displaying the same content on different devices keeps the same or similar physical size, which is especially important for touch screens. The physical size of the display determines whether the user can accurately and comfortably manipulate the contents of the display.

This time, screen density is time to play!

Screen density is the pixel that is arranged along the screen in a wide direction, based on screen resolution. A lower-density screen has only a smaller number of pixels in both long and wide directions, whereas a high-density screen usually has a lot of pixels in the same area. In the same size screen, as the resolution increases, the screen density correspondingly increases.

See, this is the high resolution and high-density screen with the excellent display effect!

"Pictures from Apple's official website"

We know that in Apple's products, the PPI (pixels per inch) is used to describe the screen density. In Android products, the dpi (dots per inch) is used to describe the screen density.

Now look at the popular iphone, ipad, and Android devices to see how they solve the interface design challenges for multiresolution and high-density screens.

IPhone:
The first generation of iphone screen density of 165PPI, and from the IPhone4 start screen density increased by twice times.
When designing the IPhone4 application interface, designers still need to design the first iphone as a benchmark and then create a twice-fold image resource. Because all iphones use the same size, eventually the system's suitability makes the same content appear in exactly the same physical size as the two resolutions.

IPad:
The first generation of ipad screen density is 132PPI, the new ipad screen density also increased twice times.
In designing a new ipad application, we still design the first ipad screen as a benchmark, then provide twice times the size of the image resource, and eventually the system's suitability allows the same content to be displayed at the same size in both resolutions at exactly the same physical size.

Android devices:
The screens of Android devices are relatively complex because they have a variety of sizes and resolutions.
In order to make the screens of various resolutions display the right size for users to read or operate, but also to meet the diversity of Android equipment needs. So, the Android authorities, by dividing the density of various screens, are divided into "low-density (ldpi)", "Medium density (MDPI)", "High-density (hdpi)", "Ultra-high density (xhdpi)" Four specifications, and at the same time "medium density" defined as the baseline.

"The image comes from the Android official website."

In this way, when designing an Android application interface, we can design the medium-density screen as a benchmark, and then provide the corresponding image resources for other density screens. Finally, the system's adaptability is automatically processed, so that the same content on various screens can display a relatively close size.

"The image comes from the Android official website."

Back to the beginning of the article, we can now know that for ultra-high resolution, a variety of resolution of the device design interface is not really scary. It's not necessarily a very difficult thing to do. Although our current common display is medium density (PC and Mac display density of 90 to 130), but with ultra-high resolution high-density display technology gradually promoted, perhaps in the near future, we design PC or Mac software interface also need to face ultra-high resolution, Multiple resolution problems.

Body End/////////////////

Appendix 1: Calculation formula for screen density

Interestingly, the iphone 4 has a 330PPI screen density based on the formula, a little higher than the official Apple announcement of 326PPI.

Appendix 2: Size, resolution and density of Apple series equipment

"Pictures from @ Love fan son"

Appendix 3: Other Terms related to the screen

Screen Size:
Usually refers to the physical size of the screen, which is the diagonal length of the screen. Like 2.8 inches, 3.7 inches.

Resolution：
Refers to the total number of pixels that are in the screen. It is usually expressed using "width x Length". Although resolution is represented in most cases as "width x length", the resolution does not imply a percentage of the screen.

Screen proportions:
Refers to the physical length of the screen compared to the physical width. We usually call a 16:9 or 16:10 long wide proportional screen for a wide screen, with a 4:3 long wide proportional screen for a narrow screen. In addition, there is a wider, more extensive range of 2.35:1 wide-width ratio of the screen also began to slowly enter the life of enthusiasts.

hd：
Divided into "Standard HD" (also known as "quasi-HD") and "Full HD." 720P and 1080i are internationally recognized standard High-definition TV (HDTV) resolutions. The letter p means a progressive scan, while the letter i is the meaning of interlaced scanning. In contrast, 1080i is above in terms of sharpness, while 720P is more fluent in dynamic graphics.
Full HD 1080P takes into account both sharpness and dynamic performance requirements, is the highest standard HDTV, but also the pursuit of the ultimate goal of many enthusiasts. To achieve the full HD experience, must meet three conditions: HD content + HD decoding + HD screen. Integral。