An app that's all about the process from design drafts to cutting diagrams. Mark

Pure Dry Goods! An app that's all about the process from design drafts to cutting diagrams

@BAT_LCK: I am a GUI designer, so I just stand on the GUI designer's point of view to write the app from the start of the project to the output of the slice, which is equivalent to the workflow introduction. The company is different, the process is not the same, but after all, still can some help.

Still declare: Here is not a specification, but a working method, everyone in the specific work, must be flexible use. In addition, the technical update is very fast, I wrote these may have some things and your engineers to use the same method, so, or to use the flexible ~

Here we only say the design under the iOS system, as for Android, because of the size of too many things involved in a mess, I put it together later.

Page length is longer, do not recommend a one-time reading, so you will be tired of the subconscious, so you can have a moment to read, take a look.

Part 1 Project Establishment

The perfect company will bring together the project related personnel, Product Manager will be the product detailed prototype display, including product positioning, market demand, the main selling point, product nature and the specific functions of each module, a logical jump demo, and then evaluate the project time, coordination, project start.

Not much to say, to receive prototypes, then what should we do to prepare for the work?

At the beginning of the project design, it should be the project archiving, My Habit is "project name + version sequence";

There is no right way to work, only the most suitable for their work habits.

I personally used to divide different types of files into different types of folders, some designers are accustomed to all put in a folder, if the file is also said in the past, if the page too much, you know the pros and cons.

工欲善其事 its prerequisite, basically I do interface design with the most is PS and AI, version does not matter, with comfortable on the line, the recommended version of a little higher, low version of a lot of convenient features are not.

Labeling Tools:

Pxcook, at present I also useless on Mac, so also do not know the legendary sketch in the end how magical. Pxcook on the Windows on the label is also more handy, although it also comes with a cut graph function, but relatively chicken, it is not recommended to cut pictures.

transduction Tools:

Cutterman

Website address: http://www.cutterman.cn/

A PS plug-in, transduction is very convenient, but does not support the Green free version PS, and the PS version requirements are relatively high, for CS 6 has not maintained the update. It is recommended to install the official full version PS cc and then hack it yourself. The official website has the installation to use the tutorial, own research, because I also recently began to touch this plug-in.

Assistor PS

is also a PS transduction labeling plug-in, also known as the artifact; I use the next, feel pretty good, is the label is not too suitable, recommend this.

Specific introduction to see:

1. Assistor PS in-depth interpretation of the external artifact of cut-chart mark (i)
2. "Free of charge!" Transduction Mark External Artifact Assistor PS in-depth interpretation (the next) "

Part 2 Photoshop

Several design sizes are now commonly used

1. The size of the 640*960 4 era, just touch the app design is this size, the era of quasi-material prevalence (now with this size design should be relatively few bar);

2. 640*1136 5/5s/5c,iphone Update, we have to follow the design with the times (should still be used in this design size), into the flat era;

3. 750*1334 6 At present I do design draft design size, IPhone6 size, down can be adapted to 4, 5, upward can be adapted to 6 Plus; I remember IP6 after the launch, I asked the director should use what size design, he said with IP6 bar, good adaptation, 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.

The size of the IP 6 is not changing compared to IP 5, but the height of the content display area has changed. Here's a blank document for iphone 6, and I've set up a reference line.

It's a good work habit to set up a reference line at the beginning of the document, and I hope more designers can develop better working habits.

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.

Part 3 Page Callout

Labeling is the most important, the engineer can completely restore the design manuscript, a large part depends on the label; If you do not know how to mark, be sure to communicate with the engineer!

Each engineer's approach to achieving the effect is different, and what I'm saying here is my labeling habits, but should apply to most designers and engineers.

Do not need to each of the label, you marked the page can ensure that the engineer to develop each page can be carried out smoothly;

Attached: UI designer angry turn! How do you make a note that makes an engineer cry in tears? 》

The labeling software here uses Pxcook, mark a blank document, and see what you need.

Here to say, Pxcook Although can automatically read the color, but not to the PSD document set transparency, so if you use a transparent color, it is recommended that you use text labels directly write the value of primary colors and transparency.

Basically I don't use the color notation tool inside Pxcook, but I use the text Callout tool , because to identify two color values, Pxcook can only display one color value (RGB and 16 binary conversion codes).

In general my habit is PS and labeling software Open at the same time, because sometimes the labeling software can not completely put the PSD file in the label, so the label should be flexible use, if not marked, to the PS to check, and then use the text callout to explain.

Is the callout color used with 16 or RGB:

Can be used to see the implementation of something, it is recommended to label color, two color value expression is marked on (16 binary &rgb).

What you need to mark is:

1. Text needs to be provided: Font size (px), font color;
2. The background color value of the top title bar, transparency;
3. There is actually a dividing line below the title bar and above the tab bar, which needs to provide the color value;
4. The background color of the content display area (if all the pages are white, just say a word to the engineer);
5. The background color value of the bottom tab bar.

Because there are thousands of pages, I would like to talk about each page, but it is not realistic, I hope I can extrapolate.

The following is a more common home page, but basically an app should be labeled elements have ~

General pages you need to label these places:

all elements unified distance from the screen to the left 24px(global data can be directly and engineers to communicate, can also be labeled, recommended )

1, title bar: background color, title bar text size, text color (no longer repeat);

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 , so mark and transduction time to note that the size of the clickable area is marked , Cetucci is also the size of the clickable area, that is , with transparent areas to fill up, otherwise the picture will be blurred .

In the design of the time to consider the scope of the clickable area , such as the X-Treasure Shopping cart page on the left side of the small circle, clickable area is much larger than the actual small circle size.

This type of icon requires an icon to click the area size, the icon is from the left and right of the screen and up and down. As for the spacing of the icons, because sometimes designers can not be completely 1px, so I basically do not mark, to the engineer let them to deal with, in fact, isometric arrangement of the icons do not need to mark the spacing, because the engineer also dynamically adapt to different screens, marked the spacing is white label (or to communicate with your partner how to mark);

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.

Picture needs to be marked wide, because the engineer to set the picture area, from the background, so to speak, the software in addition to the horizontal screen full of figures, basically all the pictures should 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 .

Tab Bar:

This position is actually more special, you can individually mark the size of the icon + text size, you can also count the icon text as a control, the whole cut out;

The habit of our engineers is to use the whole, that is, the icon + text counted as an icon, so I basically do not label a single icon (here you can communicate with your partner to see what his development habits).

About labeling problems for list page types

There are two ways to get a regular list (ask your partner what he likes to do):

1. standard Travel High, in-line element center ;
2. Mark travel inside elements, element up and down spacing, determine row height ;

How each element's position is determined:

Usually the element is the distance from the left side of the screen, such as the icon element is 24px away from the left, and the text element is 100px from the left.

There is no fixed method of labeling this thing, the development habits of engineers are different, the labeling method is different.

How to Label although you can find the method on the Internet, but it is not necessarily suitable for you, must and their partners to communicate, the method is dead, people are alive ...

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

(The above icon appears in the singular of 45px, because the software automatically adsorbed on the display of the size of the icon itself, when you cut the picture, remember to output an even size slice)

the output of the Part 4 slice resource

Before cutting, be sure to communicate with your engineer, how to cut to match his development.

Global transduction FAQs

① all your design dimensions, including graphic effects, you should use even numbers as much as possible.

Technology development using the size is half the size of the design manuscript pixel, that is, if you use 24px font, the technology is set to 12px;

So make sure to use even numbers when labeling, in order to ensure the best design effect, avoid 0.5 pixels of virtual edge.

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

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

[Email protected] iphone4,5,6 load this size picture (not must use this size, is the priority load call this size)

[Email protected] 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 .

My engineer partner asked me to give two sets of sizes, that is, @1x @2x two sizes, because we do not have 6 Plus test machine, so do not see the effect, according to him said should not be too distorted, but in order to ensure the effect, I still give three sets of size.

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 this repetitive button, as long as the provision of a common resources can be, the above text is technically written up .

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 to communicate well with your partner and ask what way he needs it.

Output format for ④ slices

File → Save as Web format

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 formats, but the general support, and does not guarantee that 100% of all the image effects rendered;

For the sake of insurance, I usually do not use these two formats, recommend or use bitmaps, if later technology, 100% support SVG and PDF vector format diagram, at that time may not provide so many sets of size ~

⑤ The click area of the icon

Minimum click Area problem:

The smallest clickable element recommended in the iOS manual is 44*44point (dot), where 1 points equals 1 pixels on the device, so the conversion imager is 44*44 pixels , The conversion into physical size is about 7mm bar (ergonomic study concluded: with the index finger operation, the touch range of 7mm appropriate; With the thumb operation, the range of 9mm appropriate ). It is said that this size, not prone to misoperation, delayed hit, less than this size, click will change some less accurate, always focus on the user experience of the Apple company defined this minimum size is not unfounded ...

So now do the design, in order to make the icon delicate, you can make the icon smaller, but transduction output, to consider the user click on the difficulty of the problem, so, when the cut, when involved in the need to click on the small icon, the ordinary screen or cut 44px size, Gaoqing need to cut 88px, not enough place with transparent area to complete , otherwise the user clicks the time will be more difficult, will be very insensitive.

⑥ different states of picture icons

Each icon or picture has a different state, and each of these different states requires a slice output.

For example, buttons have normal (normal), press (pressed), check (selected), disable (disabled) and other States,

The most common occurrence is normal→pressed→normal; Some specific button controls appear selected, specifically analyzed. What is shown here is that you have to know that the button may have several states ...

naming rules for slices

Naming is not a unified specification, different companies and different engineers have their own different naming conventions and naming habits, but there are still traces to follow, generally:

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)

I usually name it in this way, if your company has a design document to look at the naming conventions that were left before, if not, ask the engineer.

Tab bar (bottom bar)

Say tab bar here, because it's more special.

If only the icon, nature is only cut the icon is good;

Morning and engineer communication, here how to cut, the engineer gave the advice is

Icon + text mode, the icon is best to cut separately, the text behind the program plus go.

Also remember that the same module's icon tile size is consistent, the four icons themselves are not the same size, but transduction you need to cut out the same size of the shadow size, easy for engineers to develop and use.

How to cut the diagram, or to partner with your engineers to communicate;

The following is a common name, this is my naming habit, not the norm, so be flexible, if you really do not know English, use pinyin instead of also line.

Part 5 work common data the font you need to use:

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.

I will upload these two fonts, there is a need to download.

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 have not seen 3GS physical machines, only seen pictures on the internet, but you need to know this size)

640*960 IPhone 4/4s (design size for 4 times)

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, with 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

This is the size of the Launchimage (Start page) provided by the development tool Xcode, but it seems like it has been changed, and this is what engineers gave me a long time ago. The engineer is set up according to the iOS system version, but you are the designer, you are according to the version of the iphone to be plotted, so actually not so much, in fact, our engineers asked for the following several sizes:

640*960 (4/4s)

640*1136 (5/5s/5c)

750*1334 (6)

1242*2208 (6 Plus)

2208*1242 (6 Plus horizontal screen size, if your software supports landscape mode, you need to make a horizontal screen of the start page)

Note that the boot 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.

That's all there is to it, there's time to check out Apple's iOS manual or development documentation with more detailed data.

But the actual work does not need to be as large as the size of the manual, so work with your engineers to communicate, what you need to know is the data of your company's development, not the data Apple provides to you.

"Several powerful material management artifacts"

New generation of material management artifact!
"Give me all the pictures!" New generation of image material management artifact inboard

Icon Footage management tool iconjar!
"Specialized in the operation of the industry!" Ultra-convenient icon material management tool Iconjar "

Font management artifact!
"Designers!" Easy-to-use font management tool Rightfont "

Original address:UI
@BAT_LCK

An app that's all about the process from design drafts to cut-chart Mark