Go to "iOS design" an app that outlines the process from design drafts to cut graphs

This article, which stands in the GUI designer's perspective, outlines the process of the app starting from the project to the slice output, which is equivalent to an introduction to Workflow. Here is not a specification, but a working method, coupled with the technical update is very fast, everyone in the specific work, must be flexible use.

Here we only talk about the design of the iOS system, as for Android, because of the size of too many things involved in a mess. 1

Part 1 Project Establishment document structure

Project Name v1.0, 01_ source file psd
02_jpg
03_ Callout Map png
04_ Callout Source file
05_ Slice resource png
Prototypes. rar

Tools:

Interface design: PS, AI

Callout: Pxcook (Windows), Sketch (MAC)

Cut diagram: Cutterman (ps plugin), assistor PS (PS plugin)

Part 2 Photoshop Design dimensions

1. Size of the 640*960 4 era

2. 640*1136 5/5s/5c

3. 750*1334 6 Currently I design the design size, IPhone6 size, down can be adapted to 4, 5, upward can be adapted to 6 Plus. I remember IP6 launch, I asked the director should use what size design, he said with IP6 bar, good fit, cut out is @2x, change a change up and down can take care of.
   
   It is recommended to use the size of the IPhone6 when designing the draft.

Reference line

It's a good practice to set up a reference line at the beginning of a document. The reference line is easy to set up, because it is based on the iphone's own system settings, the left and right guides I am accustomed to set to 24px, that is, the distance to display content distance from the border. This is not absolute, I and the director has studied, whether is set to the left or right 30px or 24px is better, through the domestic and foreign applications of the comparison, think 24px more suitable for some, not wide, this is entirely the designer's personal design habits, so do not as what specifications, exactly said, You can do it all on the screen, but what we're talking about here is the normal page.

PT and PX

Formula One:

1pt= (DPI/72) px

When the new canvas in Photoshop has a resolution of 72ppi (that is, 72dpi), 1pt=1px; When the new canvas resolution is 72*2=144ppi, 1pt=2px.

Dimensions are attached to the definition:

Px:pixel, pixel, the basic unit of a picture or photo on an electronic screen.

Pt:point, DOT, printing industry common unit, equals 1/72 inches

Ppi:pixel per inch, pixel pixels, the higher the value, the more delicate the screen

Dpi:dot per inch, the higher the value, the finer the picture.

Dp:dip,density-independent pixel, which is the length unit for Android development, 1DP indicates 1px length at 160ppi on screen pixel density.

Sp:scale-independent pixel, the font size unit for Android development. 2

Part 3 Page Callout Color

Colors can be used in 16-and RGB-notation, and it is recommended that both color-value expressions are labeled (16-&RGB) when labeling colors.

Label content

文字需要提供：字体大小（px），字体颜色；顶部标题栏的背景色值，透明度；标题栏下方以及Tab bar上方其实有一条分割线，需要提供色值；内容显示区域的背景色；底部Tab bar的背景色值。

Where the page needs to be labeled

All elements are uniformly away from the screen at the left 24px.

1, title bar: background color, title bar text size, text color;

2, Banner: All the large picture of the horizontal screen, do not need the horizontal size, the height marked out on it;

3. Menu icon:

The size of the icon and the clickable area of the icon do not necessarily match.

In other words, the icon can be done very small, but in order to ensure the accuracy and smoothness of the click, the engineer can set the clickable area is very large, such labeling and transduction time to note that the size of the clickable area, Cetucci is also the size of the clickable area, that is, with transparent areas to fill, otherwise the picture will be blurred.

4, module interval: This position is not too important, I used to mark here, trouble can be less.

5, Picture + text: This should be more common, only a unit (figure + text) on it.

The picture needs to be marked wide.

Picture distance from top to bottom, text size color, here the text actually counted two controls, title text and explanatory text, need to be marked separately.

6, Tab Bar: This position is actually more special, you can individually mark the size of the icon + text size, but also the icon + text counted as a control, the whole cut out; Our engineers are accustomed to using the whole, that is, the icon + text counted as an icon.

All the page callout summed up is: The standard text, the standard picture, the mark spacing, the standard area;

When transduction, remember to output an even size slice.

The output of Part 4 slicing resources Global transduction FAQ ① All your design dimensions, including graphics effects, should use even numbers as much as possible.

Technology development uses a size that is half the size of a design, which means that if you use a 24px font, the technology is set to 12px.

How many sets should be provided for the ② cut size?

*.png iphone2g,3g,3gs Use (as if no one used the phone)

*@2x.png iphone4,5,6 Load this size picture (not must use this size, is the priority load call this size)

*@3x.png IPhone6 plus dimensions used

Can be simply understood as a multiple relationship (in fact, in order to meet the different resolutions, I do not think too much), if you use the iphone 6 size design, then the slice output is @2x, twice times smaller is @1x, expand 1.5 times times is @3x.

Theoretically, in order to achieve the best visual effect, you should output three sets of sizes and recommend the output of three sizes of slicing resources.

In addition, we can hardly see the 3GS now, so we need not to provide a picture, or to discuss with the engineer ~

@1x @2x @3x is the UI resource needed to develop the tool Xcode software, and the iOS device automatically chooses the appropriate size when the name is good.

③ share a picture of the resources, output one can be

Similar to duplicate buttons, as long as a shared resource is provided, the above text is technically written.

In theory, you should provide a multi-dimensional picture according to the best visual effect, but usually I only provide a picture of the largest size, which is good communication with your partner, but ask him what he needs.

Output format for ④ slices

Bitmap format: PNG 24,png 8,jpg

In the case of JPG and PNG two format picture size difference is not very large, the recommended use of PNG, if the picture size varies greatly, use JPG.

Welcome page, icon must use the PNG format, without affecting the visual effects of the premise, you can consider using PNG 8;

Vector Chart format: pdf,svg

iOS native support for two vector picture format, but the general support, does not guarantee that 100% of all the picture effects rendered; for the sake of insurance, I usually do not use these two formats, recommend or use bitmaps, if the later technical improvements, 100% support SVG and PDF vector format diagram, At that time may not have to provide so many sets of size ~

⑤ The click area of the icon

Minimum click Area problem:

The smallest clickable element recommended in the iOS Man-machine guide is 44*44 point, which is 1 points equal to 1 pixels on the device, so converting to pixels is 44*44 pixels, which translates into a physical size of about 7mm. (Ergonomic study concludes: Use the index finger to operate, The strike range is suitable for 7mm or so, with the thumb, the range is about 9mm.

⑥ different states of picture icons

Buttons may have normal (normal), press (pressed), check (selected), disable (disabled) and many more states.

Naming rules for slices

Slice type + function + Picture description (optional) + status. png

Names should be named in English (Chinese not recognized, recommended lowercase letters), do not use numbers or symbols as the beginning, using underscores to connect.

For example: A home page in the normal state of the OK button

Btn_sure_nor.png

[Email protected]

The type of slice is a button (BTN); function is ok (sure); the state is normal (OK)

Tab bar (bottom bar)

Icon + text mode, the icon is best to cut separately, the text behind the program plus go. Also, keep in mind that the icon tile size of the same module remains the same.

Part 5 working with common data you need to use the font

If it is a small partner designed with a Mac, just use the apple bold word, but not so lucky with Windows, the PC is not the same as the iphone default font effect is the same font, usually with other fonts instead.

Apple Hiragino Sans GB W3 (normal)/w6 (bold) is a font that is closer to the iphone font, which is the design font I've been using before.

Blackbody-Jane Stheitisc-light mac inside the Apple black, more close to the iphone font, is currently in use.

Questions about font size

Top Action Bar Text size 34-38px

Title Text Size 28-34px

Body Text Size 26-30px

Accessible Text Size 20-24px

Tab Bar Text Size 20px

Text size is only a range, which depends on the design of the visual effect to decide, do not memorize, but remember, the font size to use even.

You need to know the size of the iphone design (here is a full screen size including the status bar)

320*480 iphone3gs (I've never seen a 3GS physical machine, only seen pictures on the internet, but you need to know this size)

640*960 IPhone 4/4s (Design dimensions for the 4 ERA)

640*1136 IPhone 5/5s/5c (5 era design size, although now out of 6/6 Plus, but still others use this size design)

750*1334 IPhone 6 (currently the latest design size, basically now do iOS app design, use this should be the most)

1242*2208 IPhone6 Plus (this is the standard resolution, which is the size required for the design, and there is also a physical resolution of 1080*1920, which does not require in-depth understanding.) Plus also involves horizontal screen, horizontal screen is no status bar, design horizontal screen can refer to the ipad design mode)

You need to submit the launch page

Depending on the size of the Launchimage (Start page) provided by the development tool Xcode:

320*480 iphone3gs (I've never seen a 3GS physical machine, only seen pictures on the internet, but you need to know this size)

640*960 IPhone 4/4s (Design dimensions for the 4 ERA)

640*1136 IPhone 5/5s/5c (5 era design size, although now out of 6/6 Plus, but still others use this size design)

750*1334 IPhone 6 (currently the latest design size, basically now do iOS app design, use this should be the most)

1242*2208 IPhone6 Plus (this is the standard resolution, which is the size required for the design, and there is also a physical resolution of 1080*1920, which does not require in-depth understanding.) Plus also involves horizontal screen, horizontal screen is no status bar, design horizontal screen can refer to the ipad design mode)

The complete list is as follows:

iphone size Specifications

width Scale

Device iphone	Wide	High Height	Diagonal Diagonal	logical Resolution (points)	Factor	Device resolution (pixel resolution)	PPI
1st Gen (Includs 1/1g/2g)	2.4 inches (mm)	4.5 inches (mm)	3.5-inch	320*480	@1x	320*480	163
3G (s)	2.44 inches (62.1 mm)	4.55 inches (115.5 mm)	3.5-inch	320*480	@1x	320*480	163
4 (s)	2.31 inches (58.6 mm)	4.54 inches (115.2 mm)	3.5-inch	320x480	@2x	640x960	326
5c	2.33 inches (59.2 mm)	4.90 inches (124.4 mm)	4-inch	320x568	@2x	640x1136	326
5 (s)	2.31 inches (58.6 mm)	4.87 inches (123.8 mm)	4-inch	320x568	@2x	640x1136	326
6 (s)	2.64 inches (67.0 mm, 67.1 mm for 6s)	5.44 inches (138.1 mm, 138.3 mm for 6s)	4.7-inch	Standard mode 375x667 (zoomed mode 320x568)	@2x	Standard mode 750x1334 (zoomed mode 640x1136)	326
6 (s) Plus	3.06 inches (77.8 mm), 3.07 inches (77.9 mm) for 6s Plus	6.22 inches (158.1 mm), 6.23 inches (158.2 mm) for 6s Plus	5.5-inch	Standard mode 414x736 (zoomed mode 375x667)	@3x	Standard mode 1242x2208 (zoomed mode 1125x2001) downsampled/1.15 (x0.96), 1080x1920	401

ipad Size Specifications

width Scale

Device ipad	Wide	High Height	Diagonal Diagonal	logical Resolution (point)	Factor	device Resolution (pixel)	PPI
Mini 1	5.3 inches (134.7 mm)	7.87 inches (mm)	7.9-inch	768*1024	@1x	768*1024	163
Mini 2 (3)	5.3 inches (134.7 mm)	7.87 inches (mm)	7.9-inch	768*1024	@2x	1536x2048	326
Mini 4	5.3 inches (134.8 mm)	8 inches (203.2 mm)	7.9-inch	768*1024	@2x	1536x2048	264
Air (Air 2)	6.6 inches (169.5 mm)	9.4 inches (mm)	9.7-inch	768*1024	@2x	1536x2048	264
Pro	8.68 inches (220.6 mm)	Inches (305.7 mm)	12.9-inch	1024x1366	@2x	2048x2732	264

Note that the startup page must be in PNG format.

Submit Dimensions for icons

The iOS system can automatically crop the picture to rounded corners, so when you submit the icon, you only need to submit a square PNG image.

Because of the need for a lot of icons, it is not possible to add all, only choose the best size, our engineers asked me to provide the standard size:

1024*1024 Retina app Icon for App Store (HD screen App Store)

512*512 app Icon for App Store (normal screen App Store)

Main screen size of 120*120 6

114*114 5/4S/4 's main screen icon size

57*57 3GS main screen icon size

58*58 Retina Settings icon size

29*29 Settings icon Size

The size of the submitted icon is not fixed, so go to your partner's engineer and ask him to give you an icon size document that needs to be submitted.

1. "Pure Dry Goods!" An app from design drafts to the full disclosure of the process "Http://www.uisdc.com/from-design-to-slice?"
2. "Grilled one of those px, PT, PPI, DPI, DP, SP relationship" http://design.jobbole.com/92179/?

Go to "iOS design" an app that outlines the process from design drafts to cut graphs