The difference between a mobile phone and a monitor: make our design more precise

Article Description: how the gap between the phone and the monitor is generated.

Is the difference between a mobile phone and a monitor just a big one or a small one? Obviously not so, careful mobile phone users will find that the same picture or photo on the phone and the monitor to see, "looks" the size is not the same, or even the difference between, this matter how?

From the parameter, the display size is: 21 inches, the resolution is: 1680x1050, mobile phone size is: 3.7 inches, resolution is: 480*800. In a simple comparison, it is obvious that the two are not simply stretching and zooming out according to the magnification of size or resolution.

There is a transition relationship between the two

Anyone who has done print design will know that there is a dpi (dots per Inch) parameter in print that describes how many pixels are in the unit area, and the smaller the DPI, the lower the sharpness of the scan. So, in the digital age, we still have a parameter called PPI (pixels per inch), used to describe the number of pixels each inch has, it is the unit of image resolution, the higher the image PPI value, the more details of the screen. So PPI is the root of the difference in the display on the phone screen.

The conversion relationship between PPI and screen size and resolution can be mathematically calculated as:

The calculation can be found in the example of the handset's PPI is 252, while the Monitor's PPI is 90, the phone screen ppi is 2.8 times times the monitor. Simply put, the image you see on your phone is 2.8 times times as good as what you see on your monitor, or the image you see on your monitor shrinks 1/2.8 times times (about 36%), which is equivalent to the effect you see on your phone.

The introduction of PPI if you want to get this number? Then it is not worth our attention, because if you try, you will find that, as the above data, the computer image reduced to 36%, although it looks like the area of the image on the phone to see the same, but the actual image of the content has already been pasted into a group.

So what's the point of the PPI argument?

By analyzing this mathematical formula we can see that the PPI is related to screen resolution and screen size, so if we have any two sets of these three sets of values, we can get another one.

For example, we learned from the ISO HMI instruction manual that iOS has some general principles: the minimum size of clickable elements is 44x44px. So we can figure out how much of a screen size corresponds to the minimum size of 44px on the iphone by calculating the PPI.

According to the previous calculation formula, we can easily get the Iphone 3GS PPI value of 164

The PPI of the 44x44px region of the smallest click region is also equal to 164;

So, by pushing the formula back, you get the actual size of the iphone 3GS's minimum click area of 0.38in.

We know 1in=25.4mm, so the size of the iphone 3GS minimum click Size on the physical screen is: 0.38*25.4=9.6mm

In fact, in general, we get more of the data is this: Windows Phone recommended Click area of 9mm, minimum 7mm, the distance between elements of the smallest 7mm; Nokia: recommended no less than 1cm (0.4″) of the click Area. The minimum value is: The index finger clicks 7x7mm/1mm Spacing, the thumb clicks 8x8mm/2mm Spacing, the list option has 5mm spacing .... Because the resolution and screen size of different terminals are not the same, most vendors prefer to define more intuitive and physical dimensions to guide our design (iOS is directly defined as pixel values because they are both hardware vendors and software vendors). So the resolution of the models is entirely in their control.

Nokia 5230 For example:

With such data, we are able to develop the software on the touchscreen phone, which makes it possible to have a good grasp of the difference between the mobile display and the display.

PPI is only a parameter, it is a bridge, the mobile phone and monitor associated, so that our design can be more accurate and targeted.