What happened to native app Transduction

Mobile app transduction is a skill that UI design must learn, transduction although simple, but there are still a lot of places to pay attention to, below by Tgideas's LV lead singer to tell you about the native app transduction those things, for the UI primer or need to know the app transduction designers will be helpful oh.

How to cut graphs? Understanding the size of the iphone interface

The minimum resolution is 320x480, which we set as the reference interface size (baseline), and the icon for the reference size is set to 1 time times the figure (1x).

In the actual design process, in order to reduce the design cost, generally take the highest resolution of the device as the original size of the design manuscript, take the iphone is iphone5 or 5s 640x1136, of course, can also use iphone4 or 4s 640x960, because the width is 640px, The standard of their cut is the same. Obviously, 1 time times the reference size (width 320px) for the relative reference, the width of 640px design Draft, the original size of the cut out of the icon is called twice times the figure (2x).

One might ask: why not take 320px as the original size of the design manuscript? Because 1 time times the magnification of the graph becomes twice times more than twice times the figure is reduced to 1 time times the figure is blurred!

So, without considering the Iphone6 and iphone 6 Plus, each icon needs to be cut two copies in order to fit the iphone.

Android-a wider range of interface sizes

Android Open source free of charge is the device specification is not controllable, the market is flooded with a variety of brands of Android phones, with a variety of sizes and resolutions, in order to adapt to a variety of different resolutions of the device, the same icon needs to be cut into n parts, each corresponding to a size.

It is also important to note that the development of Android inside the size unit is DP or SP (DP for element performance size, SP for font size) instead of the PX in iphone ...

For Android devices with a wide range of resolutions, Google has divided them into 4 mode (MDPI, HDPI, xhdpi, and xxhdpi, perhaps one day, with the fifth xxxhdpi, who knows), in order to facilitate native app interface adaptation:

See here, the traditional web front-end students may have been messy, the iphone with Px,android DP, and the visual design is unified with the PX, how to use PX as a unit of PSD to use DP as the unit of Android app Transduction Ah???

Obviously, we have to spend some brain cells to figure out the conversion relationship between PX and DP.

The conversion relationship between PX and DP

In general, the phone resolution is matched to the DPI mode in which it is running, such as the HVGA (320x480 pixels) phone screen, which is typically 3.5 inches or so, running in MDPI mode. When running under MDPI, 1dp=1px: That is, the designer 320x480 as the size of the design, in the PS definition of a item high 48px, development will define the item high 48dp;photoshop 14px font, development will be defined as 14SP.

For a WVGA (480x800 pixel) phone (G7, N1, NS), it is generally run in hdpi mode. When running in hdpi mode, 1dp=1.5px: That is, the designer to 480x800 as the design of the size, in the PS definition of an item 72px, development will define the item high 48dp;photoshop 21px large font, Development is defined as 14SP.

For more details on PX and DP, please refer to the article http://www.zhihu.com/question/19625584

iphone app cut size corresponds to the size of the Android app cut graph

In Android apps, the MDPI is the benchmark interface size, which corresponds to the reference interface size (320x480) of the iphone app mentioned above, the required Chetutu is labeled 1 time times the corresponding image in the iphone, xhdpi corresponds to twice times the graph, hdpi and xxhdpi, and so on.

In other words: If you want to make a app,iphone version and the same set of designs with the Android version with the lowest design cost, then the design draft should be 640x960 pixels in size. Because the size of this cut-out icon covers the iphone 3 ~ 5 resolution, as well as Android mdpi, HDPI, xhdpi mode. The XXHDPI mode automatically enlarges the display with the lower-level xhdpi icon.

To give the tool a cut chart

See the above mentioned the various interface dimensions, if all hand-cut, once cut you can endure. If you have finished cutting all kinds of icons to add, modify, and not a few times you will probably crash blood spray screen ~

Fortunately, we have some very good transduction tools to use, specific ways to refer to their official website tutorial.

Recommended Diagram Tool 1-cut&slice me

Recommended tool for cutting diagrams 2-cutterman

Recommended tool for cutting diagrams 3-devrocket

Note: Damao recommend, see the official website seems very strong appearance, but charge Oh.

What happened to native app Transduction