Five core key factors
As for how to make the design draft look like our original vision, I have summarized several major points and some experience from my personal exchanges with developers.
1) Organize a label document
2) Publicize and mark to the development
3) Actively respond to every question of development
4) Development Reduction View
5) Review before finalization
1. Organize a label document
Why should I organize a labeling document?
The documents here do not have to be made strictly according to the interactive documents or visual specification documents. They can be made easily. The key is to make the development understand them.
What is in the document? Is it all?
If it is a small version iteration, it is relatively simple, because the previous several controls already exist, and as long as they are clearly marked in the label, there is no need to write documents.
What about big version iteration? For example, for a new visual language from 7.0 to 8.0, a document must be organized at this time.
In the document, we will sort out the common pages of this update iteration, common controls, just sort out and mark a copy, and then explain the details.
For example:
There are several types of lists: single and double line height. If it is a dynamic list, the character truncation rules should be written clearly. If line breaking is allowed, the maximum number of lines should be written clearly. Generally, the maximum number is 3 (used in multiple languages). How to deal with the super large mode? Generally, the list text is marked with a height from top to bottom, so that even in the super large mode, super large fonts will not cause control interleaving.
How to deal with the rules of navigation in super large mode, how to wrap lines in multiple languages (such as Arabic), and what are the wrap rules? First reduce the font, and then wrap the line? wait
How to deal with the type of picture grid layout, how to display small and large screens (referring to phone and pad), what are the display rules of horizontal and vertical screens, and how to implement adaptive layout, etc
Remember that banners must give the proportion, usually 21:9, 16:9, 4:3
The key point is that the designer must mark the click area when marking. If you do not mark it, the developer will fill it in with your cut image directly, which will eventually lead to poor usability and eventually lead to back and forth debugging.
This link is the core part of the annotation, and very subtle restoration is very critical
2. Publicize and mark to the development
Why should I read layout to developers? Because there are some subtle points that need us to be particularly like the development description, and also deepen their image, so as to reduce errors in the implementation. For example, in the development day reading, we only clarify the key core points and rules. Every step we take in the front is to make it easier for us to review the degree of restoration later, and to make development easier, for example, the early foundation is not well laid, It's hard to go further. (If the big vision is not restored, how is it called development and polishing of details?)
3. Actively respond to every question of development
In the development tension, even if all the work in front of us is ready, it is difficult to avoid the development from not communicating with me. At this time, we should actively respond to them and deal with problems with them, such as some pages with greater difficulty. The development implementation effect and design draft are quite different. At this time, the development will cut a picture of their implementation effect for you to see, At this time, you should look for problems carefully. Don't insist that it is the reason for development. First, communicate the specific reason, and then find out the solution. If there is a problem with the tag, such as the tag is dead, the page is inflexible, and the adaptation is very limited.
Then you have to think about layout, such as whether the spacing can be marked as a percentage relationship.
4. Development reduction degree inspection
After all kinds of collaborative operations in the front and development, the final step of acceptance is to check the degree of reduction. At this time, you must have a pair of fire eyes. How to check?
There is a set of scientific methods for inspection. Some students may start to look at the page with their mobile phones. In this way, it is easy to miss the scene.
5. Review before finalization
With whom? Here, of course, are product managers, design leaders, development classmates and test sisters (why there is no boss, because you can't see the boss at all).
Of course, we don't need to call so many people at the initial stage. We just need to talk to the design leader directly. Because the version landing design needs multiple reviews, we won't talk about it here at the early stage. Then we must play a key role in the product chain during the mid-term design review.
First of all, during the review, it is necessary to clearly explain the biggest visual changes in the revision to the development. Changes in the layout framework will increase the development workload, whether it can be achieved or whether it has high power consumption (generally there will be a lot of power consumption with advanced dynamic effects). At this time, the development leader will estimate and judge in advance here, because if this link is not well understood, In the later stage, if there is an accident and the implementation is difficult, the vision will have to be modified again. At that time, time is very tight, so we must grasp each joint link
Some people will ask, isn't the framework interaction already reviewed with the development in the early stage? This is not necessarily because if we are inspired during the design process, some things that we didn't think about before may be changed at this time. If not, we will change the local framework, so we must pay attention to these details.
If this link is mastered, it can be basically realized, except for special cases, such as ignoring some background data problems in the early stage.
This article comes from: Chaoyang website construction
