Dimensions specification for Android/ios app interface design

1. Size and resolution

iphone interface Size Needless to say,640*960 is the basic OK, can also be adapted to 5S 640*1136, immediately the iphone 6 is also coming soon (casually spit slot on the online exposure of the real machine spy photos, really ugly to outrageous ...) ), as long as the width is not changed. As for the pixel problem, Web page and mobile UI with 72px can be, do not have to tangle.

2. Basic elements of the interface

The iphone App interface typically consists of the status bar, navigation bar, main menu bar, and middle content area. Because the width is fixed, it is convenient to design and develop. Now let's talk about the size of these "columns":

　　status bar: display operator, signal, and battery area, height 40px

　　navigation bar: Display the current page name, including the page "back" and other function buttons, height 88px

　　main Menu bar: displayed in the area below the page, generally as the content of the express navigation, height 98px

3. Font size

The English font on the iphone is:Helveticaneue, as for Chinese, usually a holly blackbody or a blackbody-Jane. The size of the text depends on different types of apps have different definitions, but Baidu User experience department provides such a statistic: reading the most comfortable long text between 32~34px, short text is 32px, comments and other prompt text for 28px. Regardless of whether or not agree, at least people have the data to speak, you can also think good application in PS to compare to see, thus debugging their own design of the text size.

In short, a lot of methods, personal aesthetic is not the same, some people deliberately big to highlight the character, their own practice, the data as a reference, do a few more applications in the heart also have a few, than to see the tutorial or instructions useful!

Android article

1. Size and resolution

Referring to the size of Android, how much design and development scratching, countless models and sizes, repeated adaptation. Here we will talk about the mainstream design size, such as 480*800,720*128. For a long time, we are all using 480*800, but the development of Android phone resolution is known to be more and more large, so I recommend the use of 720*1280 this size to design, cut on the map can be a 9-cut to do all the mobile phone adaptation.

2. Basic elements of the interface

As with iOS, there are status bars, navigation bars, and main menu bars designed to 720*1280 size, so the status bar should be 50px high, the height of the navigation bar 96px, and the height of the main menu bar 96px. Because it is an open source system, many manufacturers have the Android system "play Bad", the value here can only be used as a reference, such as Meizu flyme status bar is normal twice times high, there are many manufacturers also in the interface similar approach.

Android in order to differentiate from iOS, starting from 4.0 to put forward a set of Holo UI style design style, encourage the bottom of the main menu bar under the navigation bar, so as to avoid clicking on the material behind the virtual button, many of the new version of the app also adopted this style, such as. On the recent I/O Conference, the latest Android L officially unveiled, announcing the full entry of Android into the flattening era.

3. Text Size

The Android font is:Droid sans fallback, which is Google's own font, and Microsoft ya black very much like. Baidu also provided a statistical data, but the personal feel has expired, and now does not make much sense, because they are based on the 480*800 resolution as a test, the test result is the most comfortable reading long text for 27px, the short version is also 27px, comment notes text 21px. Specifically, we will do a good job of the interface to the same resolution on the phone to see the subject!

Dimensions specification for Android/ios app interface design