Basic knowledge of software development and mobile terminal size

Basic knowledge of software development and mobile terminal size

Students who are initially involved in mobile design and development will basically be stuck on the size issue for a while before they can get a clue. It took me a long time to understand it. I felt it was necessary to write a simple and easy-to-understand tutorial to help you. Starting from the principle, clarify all the details about the size. Because it is intended for beginners, don't bother me.

Symptom

First of all, we all know that mobile devices have a large number of screen sizes and are severely fragmented. Especially for Android, you will hear a variety of resolutions: 480x800,480x854,540x960,720x1280,108 0x1920, and the legendary 2 k screen. In recent years, iPhone fragmentation has also intensified: 640x960,640x1136,750x1334,124 2x2208.

Do not be intimidated by these dimensions. In fact, most apps and mobile Web pages can be normally displayed on screens of various sizes. There must be a solution to the dimensional problem, and there are rules to follow.

Pixel density

You must know that the screen consists of many pixels. The various resolutions mentioned above are the actual pixel sizes of the mobile phone screen. For example, a 800x480 screen consists of rows and columns of pixels. Each vertex emits light of different colors to form the picture we see. The physical size of the mobile phone screen is not proportional to the pixel size. In the most typical example, the iPhone 3gs screen pixel is 320x480, and the iPhone 4s screen pixel is 640x960. Exactly twice, but both phones are 3.5 inch.

Therefore, we need to introduce the most important concept: pixel density, that is, PPI (pixels per inch ). This indicator serves as a bridge between the digital world and the physical world.

Pixels per inch, specifically the number of Pixels arranged per inch in length. 1 inch is a fixed length, equal to 2.54 cm, which is about the length of the finger segment at the end of the index finger. The higher the pixel density, the finer the display effect. The Retina screen is much clearer than an ordinary screen because it doubles the pixel density.

Rate and logical Pixel

Take the iPhone 3gs and 4s for example. Suppose there is a mail list interface, we may wish to follow the idea of PC-side web page design. Only 4-5 rows can be displayed on the 3gs, and 9-10 rows can be displayed in 4s, and each row becomes very wide. But the two phones are actually the same size. If this method is used, the effect of 3gs will be smaller than that of 4s, and the characters cannot be clearly viewed.

In reality, the two have the same effect. This is because the Retina screen uses 2x2 pixels as 1 pixel. For example, in the top navigation bar with a 44-pixel height, 88 pixels are used for display on the Retina screen. As a result, the page elements are converted to 2 times the size, but the effect is the same as that of 3gs. The image quality is clearer.

In the past, the same image in the iOS app's resource image usually has two sizes. You will see that some file names contain the words @ 2x, and some do not. The common screen without @ 2x is used, and the @ 2x is used on the Retina screen. As long as the image is ready, iOS will determine which image to use. The same applies to Android.

From this we can see that Apple defines a 2x magnification for the Retina screen based on the normal screen (except for iPhone 6 plus, which is 3 times ). The actual pixel is divided by the magnification to obtain the logical pixel size. As long as the two screens have the same logic pixels, their display effect is the same.

The Android solution is similar, but more complex. Because the Android screen size is too large, the resolution span is very large, unlike Apple's only a few fixed devices, fixed size. Therefore, Android divides the pixel density of various devices into several range intervals, and defines different rate for devices of different ranges to ensure similar display effect. Although the pixel density concept is important, we don't need to calculate it by ourselves. iOS and Android have helped us calculate it.

The screen with a pixel density of about 120 is classified as ldpi, and the screen with a pixel density of about 160 is classified as mdpi, and so on. In this way, all Android screens locate their locations and assign the corresponding rate:

Ldpi [0.75 times]

Mdpi [1 times]

Hdpi: [1.5 times]

Xhdpi [2 times]

Xxhdpi [3 times]

Xxxhdpi [4 times]

The rate of each iPhone is relatively simple. We will talk about it later. So how are there so many Android phones? Which mobile phones are several times the rate? Let's first look at a table, which is the data of umeng from October 2014 to March 2015:

In terms of current market conditions, the resolution of various mobile phones can be roughly determined in this way. Although not comprehensive, at least one year has some reference significance:

Ldpi is now extinct and you do not need to consider it

Mdpi [320x480] (the market share is less than 5%. new mobile phones do not have this rate, and the screen is usually very small)

Hdpi [480x800, 480x854, 540x960)

Xhdpi [720x1280] (early mid-range machines with screens ranging from 4.7 to 5.0 inch)

Xxhdpi [1080x1920)

Xxxhdpi [1440x2560] (very few 2 k screen mobile phones, such as Google Nexus 6)

Naturally, the mdpi is doubled as the benchmark. For devices with higher or lower pixel density, simply multiply by the corresponding rate to obtain a display effect similar to the reference rate.

However, it should be noted that the logical pixel size of Android devices is not uniform. For example, two common screens, 1080x1920 and x, are hdpi and xxhdpi respectively. Divided by the respective rate of 1.5 and 3 times, the logical pixels are 320x533 and 360x640. Obviously, the latter is wider and higher, and more content can be displayed. Therefore, even if there is a magnification, the display effects of various Android devices cannot be completely consistent.

Unit

It is not difficult to find that what really determines the display effect is the logical pixel size. Therefore, both iOS and Android platforms define their respective logical pixel units. The unit of iOS size is pt, and the unit of Android size is dp. To be honest, the two are actually one thing.

The Conversion Relationship between units varies with the magnification:

1 times: 1pt = 1dp = 1px (mdpi, iPhone 3gs)

1.5 times: 1pt = 1dp = 1.5px (hdpi)

2x: 1pt = 1dp = 2px (xhdpi, iPhone 4S/5/6)

3 times: 1pt = 1dp = 3px (xxhdpi, iPhone 6)

4x: 1pt = 1dp = 4px (xxxhdpi)

The Unit determines how we think. In the design and development process, we should try to use the logical pixel size to think about the interface. When designing Android applications, some designers like to set the canvas to 1080x1920, and some like to set it to 720x1280. The size of the interface elements is not uniform. The minimum size of the click area for Android is 48x48dp, which means that the button size is at least 96x96px on the xhdpi device. On the xxhdpi device, it is 144x144px.

No matter how big the canvas is, we design the interface style of the baseline rate, and the units required by developers are logical pixels. Therefore, in order to ensure accurate and efficient communication, both parties must describe and understand the interface in the logical pixel size, whether in the annotation graph or in the daily communication. Don't say "the height of the label bar at the bottom is 96 pixels, I made it according to xhdpi.

What about Web

The absolute unit of the mobile page is still px, at least in the code, but the principle is the same as that of the app. Because pixel density is an inherent property of the device, it affects all applications on the device, including browsers. The front-end technology can utilize the pixel density of the device. With only one line of code, the browser uses the app display method to render the page. Scales according to the pixel density.

You can check the screen width of your mobile device at http://greenzorro.github.io/demo/basic/response break. html, which is the width of the logical pixel.

For iPhone 5s, the screen resolution is 640x1136, And the magnification is 2. The browser determines that the screen resolution is 320x568, which is still the size of the reference rate. Therefore, when creating a page, you only need to follow the reference rate. Regardless of the screen and magnification, pages are designed and developed based on the Logical pixel size. Only when preparing a resource diagram, you need to prepare a diagram of 2 times the size and scale it to 1 time by code to ensure clarity.

Practical Application

The most important thing is how to set the canvas. Let's take a look at the three platforms: iOS, Android, and Web. However, before that, I would like to introduce a tips to my friends who use PS for design.

As I said before, we need to think about the interface in logical pixel size. In the design process, the Unit should be set to logical pixels. Open the PS preference-unit and ruler interface, and change the size and text unit to Point ). The point here is pt, which is used by the organization for iOS, Android, and Web applications. Of course, the names of the platform units should be remembered. Here we only use its principle, so we don't need to care about the name.

The DPI in the image size is used to adjust the magnification. This DPI is actually the PPI, pixel density. As we all know, the design DPI on the screen is set to 72, and the design DPI of printed materials is set to 300. Why are these two numbers?

First, 300, which is related to the resolution of human eyes. Since 1 inch is a fixed length, the number of pixels per 1 inch determines the image quality. As mentioned before, this is the pixel density, that is, DPI. When DPI reaches more than 300, its delicate level will give people a sense of reality, like objects in the real world. On the contrary, if DPI is only 10, there are only 10 pixels in the length of one index finger, which is obviously mosaic. Therefore, printing materials must be set to 300 to ensure clarity.

There are some historical reasons for this. The earliest graphic design was performed on mac computers, and the display resolution of mac itself was 72. In PS, the image DPI is set to 72, which ensures that the size displayed on the screen is the same as that displayed on the screen and is easy to design. 72 PC display resolution gradually becomes a default industry standard, this set of rules will be followed.

Now back to the question, how can we adjust the rate through DPI? Since the resolution of the screen itself is 72 and DPI is set to 72, which is exactly twice the size of the screen, it is so simple to set the resolution to 72, that is, the screen with a magnification of 2.

Next let's take a look at the canvas settings of the three platforms:

IPhone

The iPhone's screen sizes vary. I'm talking about the logical pixel size, which is really a headache. If you want to use a set of designs to cover all the iPhones, you need to choose a model with a logical pixel discount.

From the market share data, the screen with the largest iPhone 5/5s is currently. The magnification is 2, and the logical pixel is 320x568. The most intense growth is expected to be on the iPhone 6 screen in the future. The magnification is 2, and the logical pixel is 375x667.

According to the two sizes, the design is a mainstream practice. Can take into account the shorter iPhone 4S, the larger 6 plus will not be too empty.

However, when you cut the image, note that because the iPhone 6 plus 3 times diagram is enlarged by 2 times, so the bitmap must be clear.

Android

Android fragmentation is serious, but it is better than iOS now. Because the logic pixels of the current Android screen have become uniform: 360x640, you can set it to several times. To use xhdpi as the standard, set DPI to 72x2 = 144. To use xxhdpi as the standard, set DPI to 72x3 = 216.

For those older low-end servers whose width is PX, the screen size is indeed smaller and the display content is smaller. Note that important content should be kept in the upper part of the interface as much as possible.

Of course, these models will be marginalized and basically eliminated in less than a year. What can be operated now is also used as a function machine, and there is no doubt that the software is more necessary and the user experience cannot be discussed. It is OK if you do not consider it.

Web

There is no uniform standard for the webpage on the mobile phone end. The popular practice is to design the webpage based on the iPhone 5 size. Magnification 2, logical pixel 320x568.

In this way, the screen with a magnification of 2 is mainstream in both iOS and Android, and the screen has the smallest logical pixel. Therefore, the image size can be kept at a relatively small level, and the page loading speed is fast. Of course, the disadvantage is that the picture is not particularly clear on the device with a magnification of 3.

If you are willing to sacrifice the loading speed when pursuing image quality, you can design it based on the largest screen. That is, the size of the iPhone 6 plus, with a magnification of 3 and a logic pixel of 414x736.

Summary

The size of the Mobile End is more complex than that of the PC end, and the key is the magnification. But it is also because of the existence of rate, large and small screens are pulled back to the same horizontal line, to ensure a set of design to adapt to various screens. From the perspective of this horizontal line, we can find that it is easy to understand.