Peer summary can be immediately hands-on iOS specification reference

has been studying the design of the mobile end, different from the creative manuscript, focusing on ideas, visual communication, less consideration of development costs, or product requirements. To be on line of the design of the draft needs strict visual norms, rather than a single page display, is a whole, unified, complete system. Need to consider also more, time, manpower, quality must be considered. So, decided to make a set of visual specifications for the new mobile end product. There are several advantages as well:

More instructional for design or developer

Maintain the unity of product vision and interaction

Improve work efficiency

...

The following is a summary of some of the more typical iphone interfaces before writing a visual specification, on the one hand, to understand some of Apple's default values, on the other hand, there is a general reference to the visual specifications.

Base on IPhone5 Settings page

　　Height

status bar + navigation bar height 128px,1px Split line, Total 129px,

Small icon size in list 58*58px fillet to 12px

The interval between plate and plate is 70px (if the status bar + navigation bar has 1px split line, the distance is 69px)

List height of 86px

　　Font

The iphone's system font, the closest Chinese font in the design draft to the bold-Jianying writing Heiti SC English font for Helvetica RegulaR

Navigation font body style: vigorous 34px

List class font detail style: vigorous 34px

　　Margins

Up and down without restriction

Left and right distance mobile phone screen edge around 30px

The icon in the list is up or down 30px

Take the page in IPhone5 notification as an example

Plate description Text 26px thin body and plate distance 18px

List class headings to the first level title Description 24px fine body and one level of text distance 8px

List height (including 1px split line) 100px

Take IPhone5 's App Store update page for example

return/update fonts on navigation: 33px fine Body (yes 33px-_-| | |); The arrow is 16px from the screen border

Control-level menu bar tab switch: 580x58px (including 2px strokes) tab in font: 24px fine body Vigorous

Search box: 608x56px fillet 12px; search box font: 28px fine body Vigorous

Update the icon in the list: 128x128px fillet: 30px

List height (list does not include down 1px split line): 168px, so icon distance list 20px

The text in the list: 28px thin body vigorous; explanatory text: 24px Fine Body Vigorous

List internal button size 92x52px, contains 2px strokes, font size 28px thin body vigorous

Tabbar Lower Menu: Height 98px (including top 1px split line); font 20px fine Body

Update Notification red dot size: 36x36px red dot digital Helvetica Regular 24px

　　screen pixel dimensions and physical dimensions

pixels per inch The number of pixels on each inch, iphone3gs and iphone4s screen size is 3.5 inches. Iphone4s, however, divides one pixel into 4 pixels.

That is, the original size of the design is suitable only need to build a 320x480px canvas (IPhone 3gs), the retina screen after the appearance of the width and height are multiplied by twice times. 640x960px (iPhone 4s) because the image from the small effect will not be affected, but from a small amplification will appear quality deviation, so designers will be large size for the design standards. This is suitable for each screen size comparison time-saving.

The screen selection that developers develop on Xcode is not the same as the designers, they only need to select the physical size of the phone to the following figure:

Here is a concept of PT, the following is a reference to the "easy to understand!" a section of text in the Hyper-Comprehensive guide to basic knowledge of mobile end dimensions:

1 time Times: 1pt=1dp=1px (mdpi, IPhone 3gs)

1.5 Times times: 1pt=1dp=1.5px (hdpi)

Twice times: 1pt=1dp=2px (xhdpi, IPhone 4S/5/6)

3 times times: 1pt=1dp=3px (xxhdpi, IPhone 6)

4 times times: 1pt=1dp=4px (xxxhdpi)

At present, summed up these, the basic ability to understand later, and developers to work more easily, can also be a good visual restore work!