IOS interface design cut chart Summary

1. Basic Size (1) Interface

For actual design, Press:

• IPhone4, 4 s: 640px * 960px
• IPhone5: 640px * 1136px
• IPad: 1536px * 2048px

(2) icon:

• 1024px * 1024px rounded corner 180px
• Submit an image in png format of 1024px * 1024px.

2. graphical components and fonts (1) are clearly displayed

• The size of all graphical parts must be an even number.
• The shadow, glow, and stroke values must also be an even number.

(2) Click

• All clickable parts must be larger than 88px * 88px
• If the image itself is not enough, you can fill in the blank pixels when cutting the image, for example:

(3) to reduce the program volume

We recommend that you use tiled design interfaces whenever possible.

(4) default Apple font

There is no exactly the same font on the pc. When Hiragino Sans GB is the most similar to Apple Lili, use Hiragino Sans GB (including Chinese and English) instead, or use 正 instead.

• All fonts are designed with an even font size.
• Apple lihei has W3 and W6 font sizes.

Appendix: Apple Lili black

(5) The system can achieve the following font effects:

That is, the font color and shadow color must be given to the projection of 1px in a specific direction (when 2px is used. It is generally not recommended that the text on the button be used for special effects. If necessary, you need to cut the font and button together.

(6) The text in the navigation bar is generally 40 o'clock W6

3. the cropping prompt is as follows: (1) All the cropping images must be an even number.

First, cut the Graph Based on the Retina screen (that is, 640960/6401136/1536*2048), and then scale down the cut image to the normal screen size. (Special images must be made separately)

(2) For tiled parts, such:

The button with rounded corners can be used as shown in Figure

Likewise

And mark the specific size in

Labeling software recommendation: dorado

(3) The shadow program in the navigation bar and label bar can be automatically generated, but not switched,

If you are not satisfied with the default shadow effect, you can separately split the 2px width shadow,

If there is a special shadow, such:

You need to switch the entire Shadow and explain it to the attacker.

(4) two statuses are required for all buttons: normal and pressed (6). In general, the format of the cut chart is png24.

• If jpg is much smaller than png, jpg can be used.
• However, the welcome page and icon must be png. You can use png8 without affecting the display effect.

4. Name (1) image name suffix

• Add @ 2x after the name of the cut graph File Based on the Retina screen. Do not add the normal screen size.

• The welcome page, background, and so on need to add-568h @ 2x after the name of the iPhone 5 Other cut Image File

(2) Naming recommendations

We recommend that you use the following method, for example:

1	@@@@@@@@@2x.png

Use Case:

• Retina screen cutting

12345

bg_booksnum_pressed@2x.pngico_arrow_blue@2x.pngbtn_blue_pressed@2x.pngpic_books_blue@2x.pngbg_main-568h@2x.png

• Normal screen cutting

12345

Bg_booksnum_pressed.png ico_arrow_blue.pngbtn_blue_pressed.pngpic_books_blue.png

• Add a recommended name for memo.

Reprinted: http://danielxu.github.io/blog/2013/04/12/ios-ui-design/