A detailed analysis of the 8PX principle of mobile phone end

Taobao's official blog has a "map explaining the 8px principle of mobile phones," Simply put IOS and Android together to compare. The dimensions and resolution of 1x, 2x, ldpi, MDPI, hdpi, xhdpi and xxhdpi are also discussed. This article on my personal point of view. (Pictures taken from android–devices and displays)

The content of the 8PX article was written in my understanding based on the "ios interface and the Android interface being identical. IOS and Android are two completely different systems, and the user's operating habits are completely different, and they should not have done exactly the same thing in development. A 100 step back, even if the customer budget is not enough to lead to the same interface, there is no such a pleasant way to conquer.

　　Screen size Conversion

First, the easiest to understand ios:1x (320x480px), @2x (640x1136px), in these two dimensions. At most, pay attention to the IPhone4 640x960, depending on the content of the contract, still belong to the @2x mapping specifications. Note that the "big and narrow" when all size units if even, including distance, coordinates, Chettu and so on (word level is allowed 0.5pt). Now Store audit even if do not do 1x size can also pass, but IOS engineers in the engraving interface is still 1x as the benchmark, coordinates or something or to use 1x when unit. So the UI in doing @2x big picture or obediently put all the numbers are set to even.

Android is more trouble, screen size and machine species are very many, it is not possible to have a version of each size PSD, usually signed will be included in the "specific certain number of mobile phones" must be no problem, other mobile phones as perfect as possible but not guaranteed. I do the Android interface will be 1.5x, 2x, 3x of these three sizes of Chettu. 1x models have been rare, not to mention the 0.75x ldpi? (The official illustration has taken away the ldpi, adding 4x of xxxhdpi.) (Each country has different national conditions, this part should study the size of local models.) )

DPI has little impact on the UI, and the biggest question is the size of the screen. My own common size is as follows, PX size may not be the same as others, but no effect, the size of the Android screen is already many kinds of, so only need 9-patch to assist.

MDPI 160dpi (1x) 480x320

hdpi 240dpi (1.5x) 800x480

xhdpi 320dpi (2x) 1280x720

xxhdpi 480dpi (3x) 1920x1080

Android Screen Size

This part thanks friend Takeru explanation.

In order to adapt to the Android Blooming screen resolution and screen size, are based on the DPI (Dot peer inch) as the benchmark;

In the definition of guideline http://blog.csdn.net/moruite/article/details/6028547 this side has the DPI calculation method;

The DPI is affected by the actual size of the screen size;

Even if the same resolution in different screen size, will get different dpi;

The existing Web site to organize the current screen resolution and DPI of each machine;

So when the DPI is between 480~320, the system takes the xxhdpi image as the first priority;

As for 1920x1080 is the most common resolution at present;

Then, between the 320~240, it is the xhdpi of the map file as the priority, and so on;

Similarly, the 1280x720 is the most common resolution in xhdpi.

Therefore, the resolution in the initial list is a common resolution, not absolute;

Although the document folder is the DPI as the partition, is a range, not a single value;

(most of them are based on this, of course there are exceptions, such as: Note2);

　Picture zoom in and zoom out

For IOS and Android in total only a set of PSD, can not use the 9-patch extension of the picture, in the 1x case to 4px as a unit, to do 2x when the unit is 8px. All pictures can be produced using vector vectors, set 4px is "to avoid the proportional conversion of 0.X px resulting in blurred image distortion" (px must be an integer, no decimal point), rather than the final Chettu output. Chettu like to cut several sets of different resolution, do not think that 4px when the unit, the entire PSD file magnification twice times, the pixel icon will not be burnt out.

　　Chettu and tagged files cannot be shared

The pattern of light cut is different. How do you use the same document? Android has a unique Chettu approach called "9-patch", which allows Chettu to be automatically extended. IOS also has an extended design, but the way it is labeled is different from Android, and I write this part separately. (Some IOS Rd requires coordinates to be used to make the markup file, but Android Rd doesn't use coordinates.) )

Even the same design cannot use the same set of slices, for example: In the case of a button, IOS can cut text directly into a picture on the bottom, whether it's on the iphone 5s or iphone 4 on the edge of the text. But if you want the Android phone to see sharp text, the bottom and text will be separated, to RD Chettu is marked 9-patch of the pure bottom of the picture, the text must be produced by the system to remain absolutely clear.

In the case of the inability to use built-in text, the Android bottom chart and text should be cut apart and not be used 9-patch. 9-patch can only extend the bottom of the map, if the extension is very long, will become the bottom of the picture is very large or very small situation.

Conclusion

For RD (engineer) good, or to separate IOS and Android ... Just take the IOS Chettu and the logo file to the Android RD and wait to be returned.

IOS and Android design interfaces separately.

Do 1x and then zoom to other sizes to use the safest.

In the case of large and narrow, all values must be set to double.

Study how to enlarge and shrink the picture without prejudice, I have written a teaching article.

IOS, Android must be "separate" cut diagram.

The mark file must be IOS, android"separate.

Again, the IOS interface should not look like Android. There is a difference in the back of the entity alone. For some RD point of view will feel a version of the two platform to use maintenance is very convenient, is the UI should look up to the "This is not elegant ~". "

Note : For more wonderful tutorials, please pay attention to the Triple Web Design Tutorial section,