Interaction designer talking about rigor and specification in the design process

In the past, designers should be free, random and creative. However, in the practical work, especially the Internet product designers, because the need to manage their own working documents and work with colleagues to communicate, the design process of rigor and norms appear particularly important.

Unfortunately, I haven't been paying enough attention to this for the last six months of my design work, and luckily, it's not too late to wake up.

Layer management, naming conventions, Style Guide and so on are all important content, every step to steal the lazy, in the future will take several times to landfills.

This is the first time I design a version of the layer screenshot.

Can be seen, there is no logic, just from this picture, there is no way to design content and layer, naming, not to mention understanding and management. Group all retain the default naming, can not understand the meaning of the Chinese and English mixed, mixed case, not normal reading; the logical level of confusion, take layers, selected layers are difficult; no symbol feature (or Smart object) is used, and the style is managed with zero.

Most of the time, if you need to add a split line to the interface, what do you do? Maybe you'll be able to pull a line directly, determine the length and angle, and put it in place. So, the name of this line is called "line", the next time the copy, the new line name becomes "line copy 2". If you switch to another page or create another component, a messy layer is gradually formed.

Layer confusion is the biggest problem is iterative cumbersome, including design level of layer modification and cooperation level of Chettu.

Generally, the design of a project has a minimum of dozens of pages, more likely to have hundreds of pages. If I use a new "split line" in every page, such as a 200pt wide, plain black line, it may be Bailai. When the project review, the request to change the color of the line to Gray, you will silently "really day dog." It's easy to understand that if you don't use symbol for style management, each line needs to be edited again, making sure that it's not missing, doesn't go wrong, and that the work is absolutely amazing.

And then cut the map, according to the above named method, direct Chettu to development, the other party is basically not understand this rule, the result is simply can't find the content in the folder what position. Moreover, the encoding process of each component may also be an object, also need to name, such as "separator_leftview_long", if your Chettu named "line Copu 2", what is the mood of colleagues?

So, this time I spent a lot of time sorting through the designs, using symbol for all of the font styles, layer styles, and common components, and making sure that the same components in all the pages have the exact same naming and style.

For page names, use the form "Module _ content _ Memo" as shown in the following illustration:

level, so that the layer and visual order, the layer itself is named "type _ position _ Note" In the form of annotations. For example, "bar_project_leftview_segnav_selected" refers to a bar that is located in the secondary navigation page of the left view under the Project module, which identifies the selected effect.

For frequently used components such as icon, Split line, buttons, and so on, using symbol and font style for unified management, and they are listed in style guide, on the one hand easy to find, on the other hand Chettu time as long as the output can be. As shown in the following illustration:

In this way, no matter what content you want to change, you can "lead the whole body", greatly avoiding duplication of work.

In terms of Chettu, @1x and @2x are stored separately, and content that often needs to be reused for style classes can be exported separately, and each module's unique content is listed separately, so that engineers can quickly find what they need with the artwork.

PS: The cooperation of the engineers said that @1x is not required to name the individual annotation, @2x will be in the end of the file name. The first time I also deliberately added to the @1x, superfluous, but also learned this small request.

As for labeling, the use of Zeplin after a lot of convenience, it would have taken a lot of time to work can be avoided, development also said it looks more comfortable.

Perhaps today's article is a trivial matter for a lot of experienced designers, because it's really a basic work standard. But for new people, do not make mistakes may not know the importance of these content, the so-called chastened wiser, do meticulous, will only let you more professional.