Basic knowledge of mobile app UI design dimensions

Introduce the design dimension specification of mobile terminal from the starting principle

Initially involved in mobile design and development of the students, the basic will be on the size of the problem for a while to feel the clue. It took me a long time to figure it out, and it felt necessary to write an easy-to-read tutorial to help you. From the principle, clarify all the details about the dimensions. Because it is for beginners, so don't think I'm wordy.

Recommended with this reading: "Latest Android & iOS design dimensions specification"

Phenomenon

First of all, we all know that mobile device screen size is very large, fragmented seriously. Especially Android, you will hear many kinds of resolutions: 480x800, 480x854, 540x960, 720x1280, 1080x1920, and the legendary 2K screen. The fragmentation of the iphone has intensified in recent years: 640x960, 640x1136, 750x1334, 1242x2208.

Don't be intimidated by these dimensions. In fact, most of the apps and mobile pages are displayed properly on screens of all sizes. There must be a solution to the problem of size, and there are rules to follow.

Pixel density

You know, the screen is made up of many pixel points. The number of resolutions mentioned earlier is the actual pixel size of the phone screen. For example, 480x800 's screen is made up of 800 rows and 480 columns of pixels. Each point emits a different color of light that forms the picture we see. The physical size of the phone screen is not proportional to the pixel size. The most typical example of the IPhone 3GS screen pixel is the 320x480,iphone 4s screen pixel is 640x960. Just twice times, but two phones are 3.5 inches.

So, we're going to introduce one of the most important concepts: pixel density, which is the PPI (pixels per inch). This indicator is a bridge connecting the digital world to the physical world.

Pixels per inch, exactly, is the number of pixels in the length of the line. 1 inches is a fixed length, equal to 2.54 centimeters, about the length of the knuckles at the end of the index finger. The higher the pixel density, the finer the representation of the screen appears. The retina screen is much clearer than the normal screen because its pixel density has doubled.

Magnification vs. logical pixels

Then use the iphone 3GS and 4s for example. Suppose there is a mailing list interface, we might as well follow the PC-side web design thinking. Only 4-5 rows can be displayed on the 3GS, and 4s can display 9-10 rows, and each row becomes particularly wide. But the two phones are actually the same size. If shown in this way, the 3GS is just good effect, on the 4s will be small to see the word is not clear at all.

In reality, the two effects are the same. This is because the retina screen uses a 2x2 pixel as 1 pixels. For example, the top navigation bar, which is 44 pixels high, is displayed with a height of 88 pixels on the retina screen. Causes the interface elements to become twice times the size, but the same as the 3GS effect. The picture is clearer.

Previously, in a resource picture of an iOS app, the same picture usually had two dimensions. You will see the name of the file with @2x words, some without. The use of @2x in the ordinary screen, with @2x on the retina screen. As long as the picture is ready, iOS will decide which one to use, and the same is true for Android.

As you can see, Apple has defined a twice-fold magnification for the retina screen, with the exception of the IPhone 6plus, which is 3 times times the standard screen. The actual pixel is divided by the magnification and the logical pixel size is obtained. As long as two screen logic pixels are the same, they display the same effect.

The Android solution is similar, but more complex. Because Android screen size is too much, the resolution of the high and low span is very large, unlike Apple only a few fixed devices, fixed size. As a result, Android has divided the pixel density of various devices into several ranges, defining different magnification for different ranges of devices to ensure that the display is similar. The concept of pixel density is important, but we don't have to do it ourselves, and iOS and Android help us figure it out.

, the pixel density of about 120 of the screen is classified as ldpi,160 mdpi, and so on. In this way, all Android screens find their own location and give the corresponding magnification:

• ldpi [0.75 times times]
• MDPI [1 time Times]
• hdpi [1.5 times times]
• XHDPI [twice times]
• xxhdpi [3 times times]
• xxxhdpi [4 times times]

The magnification of the iphone is relatively simple, as we'll talk about later. So many Android phones, specifically how to divide? Which phones are several times the magnification? Let's look at a table first, this is the data from October 2014 to March 2015:

In terms of current market conditions, the resolution of various mobile phones can be so roughly judged. Although not comprehensive, but at least within 1 years have a certain reference significance:

• LDPI is now extinct, not to be considered.
• MDPI [320x480] (market share less than 5%, the new phone will not have this magnification, the screen is usually very small)
• hdpi [480x800, 480x854, 540x960] (early low-end machine, screen at 3.5-inch gear; today's low-end machine, screen at 4.7-5.0-inch gear)
• xhdpi [720x1280] (early mid-end machine, screen at 4.7-5.0 inch gear; today's low-end machine, screen at 5.0-5.5-inch gear)
• xxhdpi [1080x1920] (Early high-end machine, today's high-end machine, the screen is usually more than 5.0 inches)
• xxxhdpi [1440x2560] (very few 2K screen phones, such as Google Nexus 6)

Naturally, 1 time times the MDPI as the benchmark. A device with a higher pixel density or lower can be approximated with a reference magnification by multiplying the corresponding magnification.

However, it is important to note that the logical pixel dimensions of Android devices are not uniform. For example, there are two common screen 480x800 and 1080x1920, which belong to HDPI and xxhdpi respectively. Divide the respective magnification by 1.5 times times and 3 times times, to get the logical pixels for 320x533 and 360x640. Obviously, the latter is wider and taller, and can show more content. So, even with the presence of magnification, the display of various Android devices is still not fully consistent.

Unit

It is not difficult to find that the real decision to display the effect is the logical pixel size. For this reason, both iOS and Android platforms define their own logical pixel units. The size unit for iOS is pt,android in units of DP. To tell the truth, the two are actually one thing.

The conversion relationship between units varies with magnification:

• 1 time Times: 1pt=1dp=1px (mdpi, IPhone 3gs)
• 1.5 Times times: 1pt=1dp=1.5px (hdpi)
• Twice times: 1pt=1dp=2px (xhdpi, IPhone 4S/5/6)
• 3 times times: 1pt=1dp=3px (xxhdpi, IPhone 6)
• 4 times times: 1pt=1dp=4px (xxxhdpi)

The unit determines the way we think. In the design and development process, you should try to use the logical pixel size to think about the interface. When designing Android apps, some designers like to set the canvas to 1080x1920, and some like to set it to 720x1280. The dimensions of the interface elements given are not uniform. Android's minimum click Area Size is 48X48DP, which means that on XHDPI devices, the button size is at least 96x96px. On the XXHDPI device, it is 144x144px.

No matter how large the painting is, we design the interface style of the benchmark magnification, and the developers need the units that are logical pixels. Therefore, in order to ensure accurate and efficient communication, both sides need to use a logical pixel size to describe and understand the interface, whether in the labeling diagram or in daily communication. Don't say it. "The height of the bottom tab bar is 96 pixels, I did it according to Xhdpi".

What about the Web

The absolute unit of the mobile page is still px, at least in the code, but it's the same as the app. Because pixel density is an intrinsic property of the device itself, it affects all apps in the device, including the browser. The front-end technology can take advantage of the pixel density of the device, just one line of code, and the browser will use the app's display to render the page. According to the pixel density, scale according to the corresponding magnification.

You can use this test page to http://greenzorro.github.io/demo/basic/a responsive breakpoint. html to see the width of your mobile device screen, which is the logical pixel width.

In the case of the iphone 5s, the screen resolution is 640x1136 and the magnification is 2. The browser will consider the screen resolution to be 320x568, which is still the size of the reference magnification. So in the production of the page, just need to follow the benchmark magnification to the line. Regardless of the screen, the magnification is the size of the logical pixel to design and develop the page. Just prepare the resource map, you need to prepare twice times the size of the figure, through the code to shrink it 1 time times the size of the display, to ensure clarity.

Practical application

People are most concerned about the actual use of the canvas how to set. We combed through three platforms on iOS, Android, and web. But before I do, I'm going to introduce a little trick for a friend who is designing with PS.

As I said before, we want to think about the interface in logical pixel size. Embodied in the design process, is to set the unit into a logical pixel. Open the PS Preferences-unit and ruler interface to change the size and text units to point. The point here is PT, which is used by the organization, whether it's iOS, Android or Web apps. Of course, the name of each platform unit should be remembered. Here we use only its principle, do not care about the name.

To adjust the magnification, it is controlled by the DPI in the image size. This dpi, in fact, is the PPI, pixel density. One common sense is that the design dpi on the screen is set to 72, and the print design dpi is set to 300. Why are these two numbers?

First of all, say 300, which is related to the discernment of the human eye. Since 1-inch is a fixed length, how many pixels per 1 inch determines the clarity of the picture. As I said before, this is pixel density, which is dpi. DPI of more than 300, the degree of sophistication will give people a sense of reality, like the real world of objects. Conversely, with a dpi of only 10, you have only 10 pixels in the length of your index finger knuckles, which is obviously a mosaic. So the print should be set to 300 to ensure clarity.

Besides 72, there are some historical reasons for this. The earliest graphic design was done on Mac computers, and the Mac itself had a display resolution of 72. PS in the image DPI is also set to 72, you can ensure that the screen display of the same size and print size, easy to design. The 72 PC display resolution is becoming a default industry standard, and this set of rules follows.

Now back to the point, how do we adjust magnification by dpi? Since the screen itself resolution is 72,dpi set to 72 is just 1 time times the size, it is set to 72 twice times the magnification of 2 screen, it is so simple.

Here's a look at the respective canvas settings for the 3 platforms:

Iphone

The iphone has a different screen size, and I'm talking about the logical pixel size, which is really a very frustrating thing to do. If you want to cover all your iphone with a single design, choose a logical pixel compromise model.

Judging from the market share data, the most current is the iphone5/5s screen. The magnification is 2 and the logic pixel 320x568. The biggest rise in the future is expected to be the first on the iphone 6 screen. The magnification is 2 and the logic pixel 375x667.

In accordance with these two sizes to design, are the more mainstream approach. With a shorter iphone 4s, a bigger 6 Plus won't be too empty.

However, in the transduction of the time to note that because the iphone 6 Plus 3 times times the figure is magnified by twice times the graph, so the bitmap should be careful to ensure clarity.

Android

All say Android fragmentation is serious, but it is now better handled than iOS. Because today's Android screen logic pixel has become unified: 360x640, it depends on you set to several times. If you want to xhdpi, set the DPI to 72x2=144. If you want to xxhdpi, set the DPI to 72x3=216.

For those older low-end machines, the width is 480px of the batch, the screen is really smaller, the display will be less. Keep an eye out for important content as much as possible in the upper part of the interface.

Of course, these models will be marginalized and basically eliminated in a year. Now can operate as a function of the machine in use, more software must be card undoubtedly, the user experience can not talk about. It is OK not to consider it.

Web

There is no uniform standard for mobile-phone web pages, and the popular practice is to design the iphone 5 in size. Magnification 2, logic pixel 320x568.

This is true, magnification 2 screen in both iOS and Android is the mainstream, but also twice times the screen of the smallest logical pixels. So the size of the picture can be kept at a smaller level and the page loads faster. Of course, the disadvantage is that the magnification 3 of the device to see, the picture is not particularly clear.

If the pursuit of image quality, willing to sacrifice loading speed, then you can follow the largest screen to design. That is, the iphone 6 Plus size, magnification 3, logic pixel 414x736.

Summarize

The size of the mobile side is more complex than the PC, the key is the magnification. But also because of the presence of magnification, the large and small screen to pull back to the same level, to ensure that a set of design to adapt to various screens. Standing in the angle of this horizontal line, you will find it very well understood.

Basic knowledge of mobile app UI design dimensions