Mobile Device Interface design: The secret behind the screen

Source: Internet
Author: User
Tags benchmark

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 the kinds of complaints 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 also 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 the 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 a 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 of the war, 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 to reach the HDTV level! You can watch high-definition movies! HD, which has been the most frequently seen advertisement in recent years by 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 more outstanding, become an urgent need to solve the problem.

So, what should we 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, the 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 the long and wide directions, whereas a high-density screen usually has a lot of pixels, and even a very, very large pixel is arranged 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.


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.


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, A variety of resolution problems.

Appendix 1: Calculation formula for screen density

Author: Azi

Article Source: Azi's Blog

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.