On the design dimension specification of iOS and Android interface

Just beginning to touch the UI, the most encountered is the size of the problem, what the canvas to build how big, how much text should be appropriate, I have to do a few sets of interface can be? What 7788 of them also really gives a headache.

Needless to say, I hope you will be patient after reading, do not dwell on the size of related things.

I. Size and resolution

iphone interface Size: 320*480, 640*960, 640*1136

ipad interface Size: 1024x768, 2048*1536

Units: Pixel 72dpi, in the design time not every size to do a set, size according to their own mobile phone to design, more convenient preview effect, generally with 640*960 or 640*1136 size to design.

Ps: When drawing, make sure to use the Shape tool (shortcut: U) to draw, so it is more convenient for later cut or size changes.

Second, the basic elements of the interface

iphone App interface is generally composed of four elements, namely: status bar, navigation bar, main menu bar, content area.

Here's the size of the 640*960, so let's talk about the size of these elements in this size.

Status bar: We often say that the signal, carrier, electricity and other areas of the display phone status, the height is: 40px

Navigation bar: Displays the name of the current interface, including the corresponding function or the jump button between pages, the height is: 88px

Main Menu bar: Similar to the main menu of the page, provides a quick jump for the entire application of the category content, the height is: 98px

Content area: Displays the appropriate content provided by the app, with the most frequent layout changes throughout the application, with a height of: 734px

[To show that I'm not lying: 960-40-88-98=734]

As we often say the size of the iphone5/5s 640*1136, is actually the middle content area height increased to 910px.

PS: In the latest iOS7 style, Apple has begun to slowly weaken the existence of the status bar, the status bar and navigation bar together, but how to change, the size of the height is still unchanged, but everyone in the design of IOS7 style interface when a lot of attention to the next ~

Three, font size

The font on the phone is in English: Helveticaneue. As for the Chinese Mac is used in bold, win under the Chinese black body.

Baidu user experience has done a small survey, you can see the user acceptable text size.

In fact, there is a more simple way is to find you feel good app, mobile phone after the PS itself to adjust the size of the font.

My Music--34px.

My, Amoy song, Discover--30px

Muxx--34px

Local music--30px

Foam, Deng Zi chess--24px

In short, the method is to find, to solve the problem, their own practice, than others tell you the impression of a deeper engraved is not it?

I. Size and resolution

Android interface Size: 480*800, 720*1280, 1080*1920. [Unit: Pixel]

Android more than the size of the iphone is a lot more sets, it is recommended to take 720*1280 this dimension, this size 720*1280 display perfect, in the 1080*1920 look clearer, the image file size after the cut image is also moderate, the memory consumption of the application will not be too high.

Second, the basic elements of the interface

Android's app interface is basically the same as the iphone: status bar, navigation bar, main menu, content area.

The size of the 720*1280 we use in Android, let's talk about the dimensions of these elements in this size.

Status bar Height: 50px

Height of navigation bar: 96px

Main Menu bar Height: 96px

Content Area Height: 1038px (1280-50-96-96=1038)

Android recently out of the mobile phone almost removed the entity keys, the function keys moved to the screen, of course, the height is the same as the menu bar: 96px

Ps: Before I read a lot about Android interface size tutorial, did not find a specific specification like iOS, perhaps because the height of the wirelessly these controls can be customized by the program, do not mention the specific size values, so you find the Android design specifications, Size is the amount of their own in PS.

Android in order to differentiate the iOS from the interface, Android4.0 began to put forward a set of Holo UI style Some of the latest version of the app has adopted this style, the most obvious change in the style is to move the main menu below the navigation bar, this way to solve the current many mobile phones after removing the entity key and then appear on the screen after the embarrassing situation of the double-bottom bar.

Three, font size

The fonts on Android are: Droid sans fallback, Google's own font, and Microsoft ya black very much like.

Similarly, Baidu user experience in the survey, you can see the user acceptable text corresponding problems.

Specific size, or that sentence, find their favorite app interface, mobile phone after the PS to adjust their own font size, remember, must be high-definition

Talking about the design dimension specification of iOS and Android interface