UI Novice headache size problem, in fact, is not complex, the key is the design itself is more difficult to grasp. The following design specification is the main content selected by Tiger brother, which is basically introduced clearly.

More detailed specifications can be found in the design specifications Album: http://www.xueui.cn/category/design-theory/style-guide

 ios11-guifan

Let's take a look at the sizes and resolutions of the various iPhones. This is a very clear picture.

 chicun

Equipment name Screen size PPI Asset Vertical screen point Vertical screen resolution (PX)
iPhone X 5.8 in four hundred and fifty-eight @3x 375 x 812 1125 x 2436
iPhone 8+, 7+, 6s+, 6+ 5.5 in four hundred and one @3x 414 x 736 1242 x 2208
iPhone 8, 7, 6s, 6 4.7 in three hundred and twenty-six @2x 375 x 667 750 x 1334
iPhone SE, 5, 5S, 5C 4.0 in three hundred and twenty-six @2x 320 x 568 640 x 1136
iPhone 4, 4S 3.5 in three hundred and twenty-six @2x 320 x 480 640 x 960
iPhone 1, 3G, 3GS 3.5 in one hundred and sixty-three @1x 320 x 480 320 x 480
iPad Pro 12.9 12.9 in two hundred and sixty-four @2x 1024 x 1366 2048 x 2732
iPad Pro 10.5 10.5 in two hundred and sixty-four @2x 834 x 1112 1668 x 2224
iPad Pro, iPad Air 2, Retina iPad 9.7 in two hundred and sixty-four @2x 768 x 1024 1536 x 2048
iPad Mini 4, iPad Mini 2 7.9 in three hundred and twenty-six @2x 768 x 1024 1536 x 2048
iPad 1, 2 9.7 in one hundred and thirty-two @1x 768 x 1024 768 x 1024

 ultimate-guide-to-iphone-resolutions

 

 iPhone-X-Screen-Demystified

 

 iPhoneX-Portrait

 

 2-(1)  Design-Colors

 

The latest design guidelines recommend:

  1. Ios11 design guidelines
  2. Super comprehensive UI design specification summary (including iPhone x adaptation)
  3. Design for iPhone x, IOS 11 Design Guide
  4. UI design details in IOS 11 design
  5. Apple's official iPhone x human machine interface Guide
  6. Hands on how to fit iPhone x
  7. How to design app icon from IOS 11
  8. IOS 11 vs 10: a comprehensive comparative analysis of UI and interaction
  9. The latest version of IOS 11 design specification, official source file download!
  10. IOS 10 GUI (iPhone) source file produced by Facebook

 

Although the iPhone x is out now, we will design it according to 750 * 1334 in our work. Tiger summarizes a simplified design process method, and we can start work according to this method.

 

At present, we mainly use PS, sketch (Mac computer), and XD All three are OK. Since most people don't have Macs, many designers are still working with PS, XD It is expected to break out in a wave, win10 system can be used XD la

Here we use PS tool to design IOS interface

Canvas size:

New 750 × 1334 resolution 72, pixels / inch.

 

Common font sizes:

24px, 26px, 28px, 30px, 32px, 34px, 36px, etc. Remember it's even. The minimum font size is 20px.

 

typeface:

English is San Francisco. If you can't install it, you can use Helvetica instead.

 zitibao

Download the big gift bag of font used in app (organized by Tiger brother)

 

The unit of IOS development is PT

The conversion relation of 750 × 1334 dimension is 1pt = 2px, that is to say, the programmer gets the marking draft of PX unit and divides it by 2 to get Pt.

 

Common sizes of small icons in the interface:

24px, 32px, 48px, etc. remember that the multiple of 4 is better.

Note that the size of the icon should be uniform, with eye observation as the main adjustment size to look the same. The square one looks bigger than the round one and needs to be adjusted.

 

Spacing and element size on the interface:

Take even number as the unit. If it is not clear, the app interface of large companies can be taken as a reference.

750 x 1334 design draft size:

Status bar height: 40 PX
Navigation bar height: 88 PX
Label bar height: 98 PX

 

Real time preview of design draft:

Install one Ps Mirror You can watch the effect in real time on the iPhone.

 

Mainstream annotation tools:

  1. PS blue lake plug-in download > >
  2. Sketch plug-in download > >
  3. Blue lake mobile phone preview app download > >
  4. Blue lake automatic synchronization network disk team cooperation > > >
  5. Detailed use of blue lake
  6. Zeplin

 

Other annotation tools:

  1. markman
  2. Pxcook pixel Chef
  3. Parker standard

 

Cut diagram of the interface Icon:

  1. Blue lake cutting course
  2. use Cutterman Select @ 2x @ 3x export.

 sample1

 

Start Icon:

The size of 1024 × 1024 is 1024 × 1024. Generally, it is square without fillet. Then use IconTemplate Automatically cut a set of icon resources to the programmer on OK.

 Design-IconGrid  Design-RoundedCorners

 

Handover procedure:

It is better to have an interface and a folder. The folder includes: interface rendering, annotation file map, cutmap resource file package.

 

Guide page:

It is worth noting that multiple sets (640 × 1136, 750 × 1334, 1125 × 2436, 1242 × 2208) should be designed separately to guide page cuts. Don't use cutter man to cut several sets of graphs, which is embarrassing.

 

Three principles of adaptation method: (unclear search the website for 2 words)

  1. Text streaming
  2. Control elasticity
  3. Image scaling

 

Test interface:

After the demo version of the program is implemented, we should check the interface problems on the tester, communicate with the program and change it in time.

 

Dry goods information:

 ios10

IOS 10 GUI (iPhone) source file produced by Facebook

Take a look at the following articles:

       

       

  1. Find out the design size and fit of iPhone X in three minutes
  2. Dimensions of mobile interface design (Taobao version)
  3. Description of iPhone 6 & 6 plus visual design
  4. Novice benefits! Super comprehensive UI design specification
  5. UI adaptation strategy · Tutorial 4 one manuscript with two platforms
  6. H5 mobile page design learning document
  7. Summary of ten design trends of dribbble 2016
  8. Three small principles of icon design
  9. New design trend is coming, reading IOS 10 Design Guide
  10. A detailed and comprehensive guide to font and typesetting for UI design

 

Design Android interface with PS tools.

Canvas size:

If you want to fit IOS, create a new 720 × 1280 resolution of 72 pixels / inch.

If the new Android MD specification is designed separately, a new 1080 × 1920 resolution of 72 pixels / inch will be created.

 

720 × 1280 common font size:

24px, 26px, 28px, 30px, 32px, 34px, 36px, etc. Remember it's even. The minimum font size is 20px.

 

typeface:

In Chinese, Noto / Siyuan boldface is used, and in English, robot is used.

 zitibao

Download the big gift bag of font used in app (organized by Tiger brother)

 

Unit conversion

The unit of distance is DP

The unit of text is sp

 gongshi

The conversion relation of 720 × 1280 dimension is 1DP = 2px, and the character 1sp = 2px. In other words, the programmer gets the annotation draft of our PX unit and divides it by 2 to get DP and sp.

The size of 1080 × 1920 is 1DP = 3px, and the character 1sp = 3px

 

Common sizes of small icons in the interface:

24px, 32px, 48px, etc. remember that the multiple of 4 is better.

Note that the size of the icon should be uniform, with eye observation as the main adjustment size to look the same. The square one looks bigger than the round one and needs to be adjusted.

Dimensions of mobile interface design (Taobao version)

 

Spacing and element size on the interface:

Practice of the latest specification MD:

8dp principle The minimum unit of grid system is 8dp, and all distances and sizes should be integral multiples of 8dp.

 

Common common practices:

Copy the design draft of IOS directly, but the status bar, navigation bar and label bar follow Android's.

720 x 1280 design draft size:

Status bar height: 50 PX
Navigation bar height: 96 PX
Label bar height: 96 PX

 

Real time preview of design draft:

Install one Ps Mirror You can watch the effects in real time on Android phones.

 

Tagging tool:

  1. markman
  2. Pxcook pixel Chef
  3. Parker standard
  4. Zeplin
  5. Moke IDoc

When marking, if it is 720 × 1280 size design, select the corresponding xhdpi; if it is 1080 × 1920 size design, select the corresponding xxhdpi.

Cut diagram of the interface Icon:

use Cutterman Check the following to select the export with different resolutions as required.

 anzhuo

 

The re used resources in the interface need to be cut into point 9 pictures:

Mainly some buttons, monochrome or translucent background blocks. The icon doesn't need to be a 9.

 

Start Icon:

For the size of 1024 × 1024, Android has no requirements on the style of the icon. You can do all kinds of shapes. Generally, you can make square without rounded corners. The customized systems of various mobile phone manufacturers will add round corners by themselves.

Then use IconTemplate Automatically cut a set of icon resources to the programmer on OK.

 

Handover procedure:

It is better to have an interface and a folder. The folder includes: interface rendering, annotation file map, cutmap resource file package.

 

Guide page:

It is worth noting that multiple sets (480 × 800, 720 × 1280, 1080 × 1920) should be designed separately to guide page cuts. Don't use cutter man to cut several sets of graphs, which is embarrassing.

 

Three principles of adaptation method: (unclear search the website for 2 words)

  1. Text streaming
  2. Control elasticity
  3. Image scaling

 

Test interface:

After the demo version of the program is implemented, we should check the interface problems on the tester, communicate with the program and change it in time.

 

Dry goods information:

 mdzhinan

 

Take a look at the following articles:

  1. Interpretation of Android 1080p interface design specification
  2. Six tips to help you convert IOS UI to Android!
  3. Material design Android 5.1l (download UI kit package!)
  4. Do you know the difference between Android and IOS?
  5. Ui designer must know Android screen knowledge

Finally, he said: "for the font size on the interface, the spacing is not clear, more hands to take screenshots, measure the excellent app interface, more analysis to find rules."

 

Tiger brother finishing.

Updated on December 10, 2016.

 

Please indicate: Learning UI network » Dimensions of mobile interface design (update)

Login collection
 
What you might like:
 How to design the navigation bar? How to design the navigation bar?
 Tiger Gang students' works open Tiger Gang students' works open
 Which designer doesn't want such a tool? Which designer doesn't want such a tool?
 Tiger help app interface design Tiger help app interface design
 Now that we have IOS and Android specifications, why do we still have to sort them out Now that we have IOS and Android specifications, why do we still have to sort them out
 According to UI industry trend, upgrade new courses According to UI industry trend, upgrade new courses
 Vera block top quality full set of templates [dry goods Download] Vera block top quality full set of templates [dry goods Download]
 Android UI (3) - design specification Android UI (3) - design specification
 Why choose xxhdpi for design? Why choose xxhdpi for design?
 Share the prototype of the app "100 words chop" Share the prototype of the app "100 words chop"