Design specifications that good UI designers have to know
Good APP designers must know how to develop a plan. What is the nature of the APP design specification?
So what I’m going to bring you today is some design guidelines that good UI designers have to know,
Before formally entering the body may wish to do a designer small test, to see whether they have the potential to do designer yo ~!
30 second designer potential test: t.cn/RKaKga5 ☚☚ click the test to learn about yourself
[Icon specification]
Many designers think that UI design is about designing ICONS. Although this is not the case, icon design is a relatively basic part of the OVERALL UI design.
ICONS like brand logo, do proper subtraction, when the design should try to use simple lines to express the meaning, should try to avoid the line is the design of the structure is too complex, and the whole icon need to maintain consistent style, such as the line thickness, corner radian, icon in the icon height width ratio, style, etc.
Especially for newcomers, so let’s take a look at the guidelines for icon design:
(1) Pixel alignment
Pixel alignment needs to be strict, especially for smaller ICONS. If you don’t follow pixel alignment strictly, the final display will be problematic.
(2) Use Boolean operation
When making ICONS, do not use pen when using basic graphics to perform Boolean operations. The advantages of doing this are as follows:
· Make your ICONS more formal
· Have a deeper understanding of graphic structure
· It is more convenient to change the shape later
(3) Unique style
When making a series of ICONS, it is important to set a style and principle for the ICONS in the early stage to make them look different.
Here it is worth mentioning that when we do linear ICONS, we must ensure that the stroke thickness is the same, the same rounded corners, if these basic rules are not followed, it is not the unity of style, innovation.
(4) Unified visual size
When designing ICONS, we will use grid guides to help us be more careful, but don’t get trapped by guides. Learn to use them flexibly and keep the size of the ICONS visually uniform.
In today’s APP design environment, some top APP designers have always emphasized that designers should have brand awareness. Then, in the design of the icon, we must also emphasize the “brand”, in a simple way, is to turn the abstract concept of the brand into concrete graphics, the main and secondary colors of the brand into the design of the icon. At the same time, it is suggested that you complete a theme work every week to improve your graphic design ability.
[Labeling specification]
How to sort out the annotated ideas clearly — deconstruct the structured thinking, break down the big problems into small ones, and break them down one by one!
Annotations are mainly the content of four different attributes: size, text, spacing, and color.
In the annotation, the navigation bar and label bar should be removed first, because these controls have strong versatility and need to be taken out separately for unified annotation. Here, we only annotate the content area.
(1) Size
We should mark the contents on the page that need to be told the size, such as ICONS, pictures, head pictures and so on. For dimensioning, we need to note that:
· Where there are rounded corners, the radius of rounded corners should be marked.
· For some controls, such as button and list, be sure to ask yourself whether there is any special state at any time, such as press state, invalid state, selected state and so on. If you do not indicate it, the meeting will have no such effect by default.
· Under normal circumstances, the size of the picture needs to be told in proportion, rather than fixed size, so that the development can be better adapted. The commonly used picture proportion is 4:3, 16:9, etc.
, many inexperienced designers do not understand the principle of adaptation, so it’s easy to some control will give a fixed size, if you will be the width and height of the button is marked, the development will be the button case died, once encounter (white area) wide screen, button or fixed size, can affect visual result. Therefore, the correct annotation method is to give the spacing between the two sides of the button, so that the width of the whole button is self-adaptive (of course, the height should be fixed), so that no matter what resolution size is encountered, the same visual effect can be maintained, and the expansion is very strong.
Text, need to mark text size, font, color, transparency, line height and so on, of course, can also communicate with the development, some content to delete. Note about text annotation: text has a very special property, in some scenarios, text is dynamic, so at this time, it is necessary to consider the limit case clearly.
On the surface, we can clearly mark the size and color of the title text, but what should we do if the title text is too much? So you have to give a specification of the limit case, for example, how many characters can be displayed at most, and if the characters exceed the limit, they will be treated with dots.
(3) Spacing
One might think that spacing and size are somewhat similar, but in fact they are very different. We can understand them as follows: dimension refers to the size of containers, while spacing refers to the distance between containers. Spacing is relatively simple, as long as the clear mark will not be too big a problem.
(4) Color
Things that need to be colored include line colors, background colors, button colors, and so on. Notes for color annotation: Remember that the color of the text has been classified into the text attribute, there is no need to repeat the annotation, the idea must be clear.
[Naming conventions]
A lot of UI designers don’t know much about “naming”, they just randomly name pages with letters that don’t have a specific meaning, which I think is bad.
Because I think, the unified, standard naming of our own file arrangement has a great help, the later modification of the file, layer more convenient and fast, and the standard naming also appears our own more professional.
Moreover, if the name is not unified, it is difficult for members of the team to reach a consensus, and a great learning cost is needed in task handover.
And, more importantly, have a standard naming can greatly save time cost of application development, reduce a lot of unnecessary communication and the probability of repeat cutting figure, the programmer can directly use we slice without changing section, the name of the late change we cut figure, as long as the name the same slice, development don’t have to look directly to replace it.
(1) All names shall be lowercase English letters
In programmers’ code, there are only lower-case letters. If you name them all in Chinese, they will change, so it is a basic rule to name all in lower-case letters. Some people will feel that writing so much English is too much trouble, but in fact, in order to improve their professional ability, this standard naming way is a must go through the process, when you get used to this naming way, your sense of achievement will arise spontaneously.
(2) naming format
A large project will be divided into many modules, each module is independently completed by different designers, and some people will manage the common components, such as Tabbar, Navbar, etc. In this case, there will be two kinds of cutting diagram, one is the general type of cutting diagram, and the other is the specific cutting diagram of each module.
General section naming format:
Component _ Category _ Function _ Status @2x.png
Example: [email protected] (corresponding to Label bar_ Icon _ Home page [email protected])
Naming rules for module specific cut diagrams:
Module _ Category _ Function _ Status @2x.png
Example: [email protected] (corresponding Chinese: mail_icon_search_ default @2x.png)
Our principle is to clearly express the specific content of the slice without repeating the name. (Note that the name cannot contain Spaces.)
(3) List of commonly used English words
If all the names are written in full, the names will be very long, so we can abbreviate some commonly used English words to reduce the cost of work and development of code resources. As for abbreviations, as long as the team is on the same page and produces a list of abbreviations, any rule is fine.
Here is a list of commonly used English words for naming:
Bg (Backgrond background)
Nav (Navigation bar)
TAB (Tabbar)
BTN (button button)
Img (image)
Del (delete delete)
MSG (Message prompt)
Pop up
An icon.
(selected)
Disabled (not clickable)
Default (default)
I am pressed.
Go back
Edit
Content
Left /center/right (left/center/right)
Logo
Login
Refresh
Banner (advertisement)
Link
User (user)
Download
Note:
[Interactive Specification]
The following common knowledge of interaction:
Simplify operations: Don’t have two interactions that can be done in one step.
User habits: Most users have fixed thinking, we as designers should respect data, respect user choice.
Reduce distractions: Reduce the uncertainty of interface elements and make it easier for users to quickly find what they want.
Fast response: speed up the response speed of user reading, and try to avoid fetching data from remote.
Interface friendliness: In addition to providing visual solutions as required, it is the designer’s responsibility to incorporate small details into the design process to make the interface more user-friendly.
[Image processing specification]
I. Unity of pictures:
1) The color and temperature of the picture should be unified. For example, the home page of a baby product should be matched with warm pictures, so that the whole picture can be unified and comfortable.
2) The proportion of pictures should be unified. For example, in a product details page for selling goods, the proportion of products or people in the column (page) on the same screen should have a unified size proportion, so as to look more unified and comfortable.
Two, picture details processing:
1) the precision of image is not enough (the accuracy of here is not to say that 300 DPI resolution need oh, that is to do high precision printing output only when needed, and in the pictures on the computer and mobile phone is 72 DPI resolution, in addition the output images need appropriate compressed when the size of the picture), noise too much can use PS built-in CR filter processing.
2) The picture size is recommended to be even value, which is convenient for front-end technical personnel to develop.
3) Avoid blending the edges with the white background and add color at the edges.
4) The picture can be partially lightened or darkened to match the heading font.
[Dynamic effect specification]
Whether it is now often seen in the enterprise/brand H5 publicity page, mobile terminal launch page, or once very popular home page animation, all need to use dynamic effect. Being able to do motion effects would be a plus, especially for loading animations, which is a common requirement.
When doing dynamic effects, we need to pay attention to the following points:
1) No matter how beautiful and eye-catching your animation is, it will not be able to be implemented if the cost is too high or too complex. Therefore, we should follow the principle of simple and practical design and never over design.
2) The normal state and abnormal state should be considered for the state caused by any interactive action. In the case of loading animations, we need to take into account the feedback on the success of loading and the feedback on the failure of loading and note this in the output specification.
3) Tools for dynamic effects: PS can make some dynamic expressions, AE can make some loading animations, and Flinto and Principle can be used for interactive effects between pages.