Interface dimensions for mobile devices

Every now and then someone will ask about the mobile set-up interface design when the size should be large, small not big God, so often someone asked when they chose silence, and aunt because can not help to read ER and feel extremely guilty. All the way to yesterday to see this tutorial, the excitement of the heart of the moment into a rolling Jean, so immediately contact the author Musen_xiong, hope that this tutorial reprinted to Morning reading class, Musen_xiong great God very very very very nice, soon reply, the atmosphere of the approval of the small series of demanding. No thanks, small series has been arranged stationmaster (of course, stationmaster is not me) tonight face to the south mercilessly kneeling knock three a head.

Just beginning to touch the UI, the most encountered is the size of the problem, what the canvas to build how big, the text of how much to use, I want to do a few sets of interface can? What's 7788 is a bit of a headache for us.

Needless to say, I hope you will be patient after reading, no longer entangled in the size of the related things ~

iOS articles

1. Size and resolution

IPhone interface Size: 320x480, 640x960, 640x1136

IPad interface Size: 1024x768, 2048x1536

(The above units are pixel Oh, as for the resolution of the general Web UI and mobile UI basically as long as the PPI)

Of course, in the design is not every size to do a set, size according to their own mobile phone size to design, more convenient preview effect, generally with 640x960 or 640x1136 size design.

P.s. When drawing, make sure to use the Shape tool (shortcut: U) to draw, so more convenient later transduction or size change ~

2. Basic elements of interface

The iphone App interface typically consists of four elements: status bar , navigation bar , main Menu bar , and middle content area

Here's the size of the 640x960 , so let's talk about the dimensions 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: +px

navigation Bar: Displays the name of the current interface, including the corresponding function or the button to jump between pages, the height is:

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:98 px

content Area: display the corresponding content provided by the app, the most frequent layout change in the entire application, the height is:734 px

(Wait, to show that I'm not lying: 960-40-88-98=734)

Iphone/ipod Touch

First generation, second generation, third generation

Iphone4/iphone4s

Iphone5/iphone5c/iphone5s

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

P.S. In the latest iOS7 style, Apple has begun to slowly weaken the presence of the status bar, the status bar and navigation bar together, but how to change, the size of the height is still unchanged, but we re-design iOS7 The style of the interface when a lot of attention ~

3. Font size

The font on the IPhone is English: Helveticaneue As for Chinese, the Mac uses a blackbody-Jane, and win is the Chinese blackbody.

Baidu user experience has done a small survey, you can see the user acceptable text size, pixel units, that is, everyone in the PS text pixel size.

P.s. Pay more attention to the data research of some big companies, you will find a lot of problems that you have not considered at all Oh ~

In fact, there is a more simple way is to find you feel good app, mobile phone after the PS oneself contrast adjust font size ~

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

Android article

1. Size and resolution

Android interface Size: 480x800, 720x1280, 1080x1920 ... (Unit: pixels )

Android than the size of the iPhone more than a lot of sets, it is recommended to take the size of 720x1280 , the size of the 720x1280 display is perfect, in the 1080x1920 look more clear, the image file size is also moderate, The memory consumption of the app is not too high.

2. Basic elements of interface

Android's APP interface is basically the same as the IPhone: the status bar, navigation bar, navigation bar, main menu bar, and middle content area.

In Android we take the 720x1280 size design, so let's talk about the size of these elements in this size:

Status bar height:px

Navigation bar Height: +px

Main Menu Bar Height: +px

Content area Height:1038 px (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: +px

P.S. Before I read a lot about the Android interface size tutorial, did not find the same specifications as iOS, perhaps because the height of the wirelessly these controls can be customized by the program -no reference to the specific size values, so you find the Android design specifications , the size of their own in the PS amount of ~ ~

Android 4.0 starts out with a holo UI style that is different from IOS in the interface, and the latest version of some apps uses this style.

The most obvious change in this style is to move the lower main menu below the navigation bar, which solves the embarrassing situation of the double-bottom bars that appear on the screen when many phones are removed from the body button.

3. 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, it must be high-definition oh ~)

Interface dimensions for mobile devices