iOS interface design cut-off summary

iOS interface design cut-off summary

APR 12TH, 2013

1. Basic size (1) interface

Actual design time by:

• IPhone4, 4s:640px*960px
• Iphone5:640px*1136px
• ipad:1536px*2048px

(2) Icon:

• 1024px*1024px Fillet 180px
• Submit 1024px*1024px Square Corner png format picture

2. Graphics parts and fonts (1) for clear display

• All graphic parts must have an even size
• The number of shadows, glows, strokes in a style must also be even

(2) for user-friendly click

• All clickable parts need to be greater than 88px*88px
• If the picture itself is not enough, you can fill in the blank pixels when transduction for example:

(3) To reduce the program volume

It is recommended to use the tiled graphic design interface as much as possible

(4) Apple default font

On the PC does not have the exact same font, Hiragino Sans GB Apple black most similar generally do, with Hiragino Sans GB (including Chinese and English) instead, you can also use the founder Blackbody instead of

• All fonts are designed with an even number number
• Apple W3, W6 two kinds of font weight

Attached: Apple Alice Black

(5) The system can do the following font effects

That is, to the specific direction 1px (do 2px effect) projection, you need to give the font color, shadow color. The text on the button is generally not recommended for special effects. If necessary, cut the font and buttons together.

(6) The text in the navigation bar is usually 40 points W6

3. Drawing Tips (1) All cut graphs must be even

Based on the Retina screen transduction (that is, 640960/6401136/1536*2048), the tangent image is then shrunk to the normal screen size. (Special images need to be made separately)

(2) can be tiled parts transduction when:

With rounded button transduction, you can

Similarly

And in the winning out the specific size

Labeling Software recommendation: Dorado

(3) The shadow program under the navigation bar and the tab bar can be automatically generated, not cut,

If you are not satisfied with the default shadow effect, you can cut the 2px wide shadow individually,

If there is an irregular shadow such as:

You need to cut the entire shadow and explain it to the Siege master.

(4) All buttons need to have two states-normal and pressed (6) in general, the chart format is Png24

• If individual picture jpg is much smaller than PNG, JPG can be used
• However, the Welcome page, icon must be PNG, without affecting the display effect of the premise, you can consider using PNG8

4. Naming (1) image naming suffix

• Depending on the transduction file name of the Retina screen, add @2x, the normal screen size does not add.

• Welcome page, background, etc. need to iPhone5 additional transduction file name after add [email protected]

(2) Naming recommendations

It is recommended to use the following methods, such as:

1	切图性质_功能相关描述_图片描述（可无）_状态说明（可无）@2x.png

Case:

• Retina Screen Cut chart

1 2345

[email protected].png [email protected].png [email protected].png [email protected].png bg_main-568h@2x.png

• Normal screen cut chart

12345

bg_booksnum_pressed.ico_arrow_blue.btn_blue_pressed.pic_books_blue. Press status transduction named Add _pressed

• Also put a suggestion name memo

Reference

• iOS Interactive design Guide translation
• iOS Design Guide • official
• Iconhandbook

iOS interface design cut-off summary