Mobile App interface Design size note

There are many types of mobile phones on the market today, and there are a variety of models under the same brand of mobile phones. For example, Apple mobile phone, continuous research and development and innovation, maintain a new model of a year to update the speed of more and more domestic machines in the crossfire, the impact of the mobile phone market. (The flour is going to be agitated.) At the same time, the size of the screen is getting bigger, netizens can not help but joked: mobile phones more and more like tablets, tablets more and more like mobile phones.

And for just getting started UI interface design Novice, a variety of, slick mobile phone model really let a person a bit ignorant, for different phone models, how to grasp the size. Here we need to know a concept: pixel density (PPI), the English full name is the pixels per inch, the number of pixels in the length of the array. Many people may think that the higher the pixel, the clearer the image will be. But this is the wrong point of view. The right thing to do is "the higher the pixel density, the finer the representation of the screen appears." "This is also why when buying a camera, do not blindly pursue pixel-high camera, 12 million-megapixel camera than the 6 million-megapixel camera last shot out of the photo effect is poor." It also involves other hardware of the camera, such as a CCD. If you are interested, you can get to know it.

The retina screen, which compresses 2x2 pixels into a single image, is clearly a law that matches the higher pixel density and clearer screen display. The original iPhone4, as well as iphone4s, and later IPhone5, IPHONE5C, IPhone5S, IPhone6 and IPhone6 plus all used the Retina display technology IPS display.

After correcting the wrong inertia mindset, let's look at how to set the dimensions when designing the mobile app interface. So many mobile phone models, different mobile phone screen size also has a big difference, then their benchmark exactly what is it. Here again, a concept is introduced: logical pixels, plus a formula:

The actual pixel ÷ magnification = logical pixel size of the phone.

The logical pixels are the same, and the display works the same. Let's give an example: Android phones, for example, are now heavily fragmented and large in size. Common Android Screen Size: ①540x960, magnification is 1.5;②720x1280, magnification is 2;③1080x1920, magnification is 3. Then, using the conversion formula, you can get a common logical pixel: 360x640. So finally on these different models of mobile phones, the effect is the same.

Similarly, the UI design on the Apple app follows this pattern. Iphone5/5s, the magnification is 2, the logic pixel 320x568;iphone6, the magnification is 2, the logic pixel is 375x667, and the IPhone6 Plus, the magnification is 3, the logical pixel is 414x736. Now the more popular practice is designed according to the size of the iPhone5, magnification of 2 screen regardless of the iOS or Android is the mainstream, but also twice times the screen of the smallest logical pixels, page loading speed is relatively faster, because the size of the picture can be kept at a smaller level. This is why it is not commonly used IPhone6 Plus, although 3 magnification, the rendering effect is clearer, but only if you are willing to sacrifice load speed.