App Interface design specifications for iOS and Android

Source: Internet
Author: User
Tags home screen

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 Toolbars
Equipment App Store Program Application Home Screen Spotlight Search Tab Barand 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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.