iOS Labeling and adaptation

Many projects initially did not pay attention to the art material specifications, which in the late will cause confusion. If there is a chance to do a new project (the old project will have its own historical problems, it is very difficult to change), it is recommended that designers and programmers sit down together. Jointly set up a set of norms, and then jointly abide by.

Let's talk about my own specifications and explain why.

Interface Name

A prefix must be set for each interface. such as the home page, the prefix is home, set the prefix to settings, the curriculum is lesson.

After the prefix is set. Designers can create folders:

Homepage (home)
Settings (Settings)
Timetable (lesson)
Course Overview (Overview)
Common (Shared)
Then put the footage under the corresponding folder, so it's easy to find. If a lot of the interface uses the material, such as some buttons, etc., put it in the shared directory.

The designer's English seems not very good, their likes in Chinese name, but the program needs to use English. If you do not agree at first, programmers need to use the material, it is difficult to match the name of the designer, often do not know where to put the material.

Material name

The final material name, using only lowercase letters and numbers, the separation of words with an underscore-separated, the different interface of the material front plus the corresponding interface prefix. Like what

Home-background.png
Settings-icon-email.png
Settings-icon-help.png
Shared-button-0.png
The name uses the corresponding prefix to know the original source of the material. This is a problem, you can find the original file re-export. Also avoids the name conflict.

Use only letters and numbers, which are underlined to avoid special characters such as Chinese, white space, punctuation, and slashes. Character encodings vary on different systems, and some special characters have special meanings. Chinese or special characters are prone to strange problems. For example, the programmer writes a script to unify the copy, the processing material, the Chinese or the special character is particularly prone to the problem.

Only lowercase letters are used to avoid write-by-error case. For example, MAC system, by default, the case is not different, fake film

Home-background.png
Wrong written

Home-background.png
It is not a problem to display in the simulator. The name in the real machine is case-sensitive, so that the emulator's behavior with the real machine is wrong. Using all lowercase letters directly eliminates the problem.

Use an underscore-instead of using the underscore _ delimited. is to search for a better look in the future. The name of the program variable in the project does not appear in the underline, only the underscore is used. When the name of the material is underlined, it can be distinguished from the program variable name, which is easily searched later in the project.

These name specifications, look simple, but can eliminate a lot of problems. Project, the name of the material should be the designer when the export is taken, so that once the need to modify, directly copied over the line. But in reality, I find that designers often do not pay attention to these, often need to rename the programmer. This is one more step to modify.

Dimension units

Designers often use pixels as a design unit, but for IOS. Using pixels to think is not good, you should use point to think. Point and pixel differences, refer to my old article. IPhone screen adaptation, history and status

Like what

IPhone 6, size 375 x 667 dots, 2x mode.
IPhone 6 Plus, size is 414x736,3x mode.
The IPad, with a size of 1024x768, has 1x and 2x modes.
Use point units, easy to correspond with the program. And each IOS device, the same number of points, the physical length is similar. 44 points, is the mobile phone navigation bar, the height of the toolbar, this way of thinking can be roughly estimated to the actual physical length. With pixels, it's easy to make pictures too big or too small.

When using a non-vector picture, multiply the number of points by the corresponding x mode, which is equal to the desired pixel size.

When the vector tool to do the material, you should do a little bit of that size directly. For example, a button with a 66-point x. Create a scene with a x 66. It is then exported to twice times the graph, 3 times times the graph, or directly to the SVG vector image.

At the end of the design, points are also used as units for labeling. In fact, when labeling, as long as the export of a 1x preview, you can use the tool to mark. When 1x, the dots and pixels are directly corresponding.

Design Dimensions

The mobile APP requires only a single design, and does not require multiple designs. If the layout on the tablet is not the same as the phone, then a design draft is needed. If it is basically the same, even the design of the tablet is not required. For example, the iphone version and the IPad version, the process layout is consistent, in fact, only need to make an iphone design draft.

Design, choose one of the most mainstream now, the size of the device you are most likely to get to design. For example, now the most mainstream iPhone is 6 size, choose

375 x 667 Point, 2x mode
As design dimensions. Then the whole design is designed using this size, not for a moment. If you are a personal developer, only 5s around, use 5s size to design.

This allows the design to be put on the phone to see the effect. Adaptation cannot be scaled up or down directly, if you put the design of the IPhone 6s in 5s, the picture is scaled down, but what you see is not the end result.

Marking

Designer to mark it?

In fact, I think it is a waste of manpower to make art mark. As long as a 1x preview, and then let the programmer to install a mark eel, or pixel Winch, or PS, you can let the programmer to measure the size.

But many programmers will shirk responsibility and say that labeling is an art thing.

Still need to discuss how to label. There are mainly 3 kinds of labels, color, font, size.

Color labeling

Color should first define a swatch. For example, in the following way

[Color swatch] #bcbcbc. Used for text.
[Color swatch] #ff8c0f. Main hue, Orange.
[Color swatch] #dddddd. The color of the separator line used primarily for list items.
where [color Swatch], is a small color block, used to see the color preview.

Then in the preview of the design draft, you can use the color number to label. This is clear, the color of a project will not appear too much, basically no more than 10 colors. This is also easy to correspond with the program, the program to write these interfaces, you need to define a color plate. It's also easy to switch themes in this way. such as daytime mode and night mode.

Font labeling

The font should also first define a font disk, such as:

System font, number 14th. Mainly used for the content of text.
System font, number 18th. The caption used for the text.
Equal width font, number 14th. Used to display time.
Then in the preview of the design draft, you can use the font number to label it. The font of a project will not appear too much, probably also 5, 6 kinds. This is also easy to correspond with the program.

Dimensional dimensioning

You just need to label some places that don't change. such as button size, margin, icon size, and so on, no matter how large the screen, are fixed unchanged. And some with the stretching of the place, it is directly noted that will stretch. The spacing and the like are noted, which few spacing is the same.

Some of them need to be scaled up or down, indicating a percentage.

Labels are like comments in a program, not as much as possible. If you can see the preview map to understand, in fact, there is no need to do labeling.

At last

The design drawing is only a reference, and finally the effect on the machine will prevail. When setting the rules, you need to be involved in the formulation, to follow together, and to explain why you need to do so.

In fact, I know that the actual project is not so ideal. tend to cross over each other, shirk responsibility. A project needs a strong person to understand the design and the program to coordinate, and can be final when there is a dispute. This person is the so-called product manager.

But in reality, product managers often do not understand the design, and do not understand the program, and no decision-making power, the so-called Product Manager Light has a name, in fact, is useless. With the decision-making power, it is also necessary to undertake obligations, when the decision is wrong, the biggest responsibility is in the product manager. And the wrong number of times, the product manager can not be convincing, and basically useless.

Huang Cheng
Links: https://zhuanlan.zhihu.com/p/20565936
Source: Know
Copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please specify the source.

iOS Labeling and adaptation