Document the interface design specifications of iOS and Andoird to facilitate standard product design and smooth communication with designers
iOS articles Interface Dimensions
Equipment |
resolution |
Status Bar Height |
Navigation Bar Height |
tab Bar Height |
IPhone6 Plus |
1242x2208 px |
60px |
132px |
147px |
IPhone6 |
750x1334 px |
40px |
88px |
98px |
iphone5/5s/5c |
640x1136 px |
40px |
88px |
98px |
Iphone4/4s |
640x960 px |
40px |
88px |
98px |
Ipad3/4/air/air2/mini2 |
2048x1536 px |
40px |
88px |
98px |
Ipad1/2 |
1024x768 px |
20px |
44px |
49px |
IPad Mini |
1024x768 px |
20px |
44px |
49px |
Paste_image.png icon Size
Equipment |
App Store |
Program Application |
Home Screen |
Spotlight Search |
Tab Bar | Toolbars
and navigation bars |
IPhone6 Plus |
1024*1024px |
180*180px |
144x144px |
87x87 px |
75*75px |
66*66px |
IPhone6 |
1024*1024px |
120*120px |
144x144px |
58*58px |
75*75px |
44*44px |
iphone5/5s/5c |
1024*1024px |
120*120px |
144x144px |
58*58px |
75*75px |
44*44px |
Iphone4/4s |
1024*1024px |
120*120px |
144x144px |
58*58px |
75*75px |
44*44px |
Ipad3/4/air/air2/mini2 |
1024*1024px |
180*180px |
144x144px |
100*100px |
50*50px |
44*44px |
Ipad1/2 |
1024*1024px |
90*90px |
72*72px |
50*50px |
25*25px |
22*22px |
IPad Mini |
1024*1024px |
90*90px |
72*72px |
50*50px |
25*25px |
22*22px |
Font
The font on the IPhone is: Helveticaneue As for the Chinese language, the MAC uses the black body-Jane, win is the Chinese blackbody, all the fonts to use a double-digit number.
Baidu user experience has done a small survey, the application of font size survey results are as follows:
Paste_image.png Color value
iOS color values take RGB color values such as a certain color value, given iOS development color value is R:12 g:34 b:56 gives the value is 12,34,56 (sometimes also according to the development habits, sometimes hex)
Interior Design
1, all can click the picture must not be less than 44px (retina needs 88px)
2. The individual components must be even size
3, twice times the graph with @2x as the name suffix
4, fully consider the style of each control button in the 4 state,
Paste_image.pngandroid article Interface Dimensions
android的尺寸众多,建议使用分辨率为720x1280 的尺寸设计。这个尺寸 720x1280中显示完美,在 1080x1920 中看起来也比较清晰;切图后的图片文件大小也适中,应用的内存消耗也不会过高。
Status bar height: px
Navigation bar Height: px
Label Bar height: px
Android recently out of the mobile phone almost removed the entity keys, the function keys moved to the screen, of course, height is the same as the tab bar:
Content area Height: 1038 px (1280-50-96-96=1038)
Chart size
Screen Size |
Start icon |
Action Bar icon |
context Icon |
system notification icon (white) |
most fine strokes |
320x480 px |
48x48 px |
32x32 px |
16x16 px |
24x24 px |
No less than 2 px |
480x800px/480x854px/540x960px |
72x72 px |
48x48 px |
24x24 px |
36x36 px |
No less than 3 px |
720x1280 px |
48x48 DP |
32x32 DP |
16x16 DP |
24x24 DP |
No less than 2 DP |
1080x1920 px |
144x144 px |
96x96 px |
48x48 px |
72x72 px |
No less than 6 px |
Ps:android Design specification, the unit used is DP, DP on the Android machine on the different density conversion px is not the same
Font
The fonts on Android are: Droid sans fallback, Google's own font, and Microsoft ya black very much like.
The Android font size survey concludes that:
Paste_image.png Color value
Android color value is 16 binary value than a green value, giving the developed value is #5bc43e
App Interface design specifications for iOS and Android