Found the problem
As a rule, when we design the interface, we don’t have too many colors, but we will mark the coloring values densely on the output interface. The same design will be marked repeatedly on different interfaces, and sometimes mistakes will be made, and we need to go back. Check the color. When we need to adjust the color, when we ask the developer to adjust the color, we also need to take a screenshot and mark it to explain where the color is wrong. Mark the description one by one. The developer also needs to modify it one by one. In this process Design and development are very crazy
Dense marking demonstration (feel the trouble of marking with the same color)
I have said too much before, but I can summarize it in two points:
When the same interface is updated, we will still make color markings
If the developed code design does not carry out style design and code specification, it will be very difficult to change the color of the same elements in the visual design, and the work duplication rate will be high and time-consuming
Note: Before solving the problem, I read articles related to design specifications, and learned and learned methods from them. I hope friends who have seen them will not be surprised. I must have used them)
Solve the problem
Organize
Sort out the interface elements: background (the background that carries content information), icons (function icons, rich content icons), text, buttons, lines
Organize interface element styles: color, size, margins (based on the top, bottom, left, and right margins of adjacent elements, inner and outer margins, etc.)
Clarify the product modules and interface composition
Definition
“Label definition” of text, background, button, and line colors can be defined according to your own habits
(I did not include the color of the icon into the specification when designing. The icon must be named and the picture can be replaced. The design is based on the product requirements. The color can also be stacked during icon development)
Output
After defining the elements, we will mark the interface and define the elements that you will reuse and reuse as a label, such as text: sort the text sequence T1, T2, T3… and Naming, first-level title T1, body text T2, bright text T3…
Write out the location description represented by each tag, then throw the tags onto the interface, align them with the development information, and determine the rule color
If your icon also needs to be standardized, it is as follows. If you don’t need to standardize it, don’t use it
When the development of the entire product is completed according to the designed specifications and we need to change the skin, we only need to provide a “word” document to the development, so that the color change of a complete set of products can be completed with one click
Good standardization can realize theme color matching, day and night mode, personalized theme design, and color change of a certain label of a single product, so that the theme of the same type of products can be changed without pressure. The following is a standardized product display, which is a set of standard color changes
Finally
If you don’t understand anything, you can leave me a message directly. Please give me some advice. Thank you
Found the problem
As a rule, when we design the interface, we don’t have too many colors, but we will mark the coloring values densely on the output interface. The same design will be marked repeatedly on different interfaces, and sometimes mistakes will be made, and we need to go back. Check the color. When we need to adjust the color, when we ask the developer to adjust the color, we also need to take a screenshot and mark it to explain where the color is wrong. Mark the description one by one. The developer also needs to modify it one by one. In this process Design and development are very crazy
Dense marking demonstration (feel the trouble of marking with the same color at will)
I have said too much before, but I can summarize it in two points:
WhenWhen the interface is updated, we will still make another color mark
If the developed code design does not carry out style design and code specification, it will be very difficult to change the color of the same elements in the visual design, and the work duplication rate will be high and time-consuming
Note: Before solving the problem, I read articles related to design specifications, and learned and learned methods from them. I hope friends who have seen them will not be surprised. I must have used them)
Solve the problem
Organize
Sort out the interface elements: background (the background that carries content information), icons (function icons, rich content icons), text, buttons, lines
Organize interface element styles: color, size, margins (based on the top, bottom, left, and right margins of adjacent elements, inner and outer margins, etc.)
Clarify the product modules and interface composition
Definition
“Label definition” of text, background, button, and line colors can be defined according to your own habits
(I did not include the color of the icon into the specification when designing. The icon must be named and the picture can be replaced. The design is based on the product requirements. The color can also be stacked during icon development)
Output
After defining the elements, we will mark the interface and define the elements that you will reuse and reuse as a label, such as text: sort the text sequence T1, T2, T3… and Naming, first-level title T1, body text T2, bright text T3…
Write out the location description represented by each tag, then throw the tags onto the interface, align them with the development information, and determine the rule color
If your icon also needs to be standardized, it is as follows. If you don’t need to standardize it, don’t use it
When the development of the entire product is completed according to the designed specifications and we need to change the skin, we only need to provide a “word” document to the development, so that the color change of a complete set of products can be completed with one click
Good standardization can realize theme color matching, day and night mode, personalized theme design, and color change of a certain label of a single product, so that the theme of the same type of products can be changed without pressure. The following is a standardized product display, which is a set of standard color changes
Finally
If you don’t understand anything, you can leave me a message directly. Please give me some advice. Thank you
微信扫一扫打赏
支付宝扫一扫打赏
