How can UI design break through the design bottleneck and become a more valuable designer?
First of all, let's take a look at the competency points that UI designers need, as shown below: UI design competency model:
Three abilities closely related to design are: communication ability, professional design and problem-solving ability. As shown above, we can see a very interesting point. Although we are designers, we require designers' communication ability > professional design ability. Why? Because the essence of UI design is a service-oriented industry (it is not purely aesthetic, but purely visual), we should serve our users and products well. Then communication skills help us to do a good job. This also requires us to pay attention to the usability of the manuscript in the UI.
How is communication ability reflected in our design process?
Through communication with product and interaction designers (helping products to sort out a reasonable product scheme and helping interaction to sort out a reasonable prototype output), we can find and solve problems and better serve products and users, thus making the design more reasonable (well-founded).
This also requires us to break the traditional design thinking, expand our functional scope, and do some products and interactions, instead of doing some visual work in an executive way, so as to gradually get out of our bottleneck.
This is the difference between ordinary designers and senior designers. The design of senior designers not only ensures the fineness of design, but also has visual beauty, which is more theoretically supported and more commercially valuable.
Therefore, to get out of our bottleneck, we need to make the design more meaningful and theoretically supported.
So how to make the design more theoretically supported and more commercially valuable?
This also leads to the key point of teacher Zhang Shuang's explanation-the design process of the whole link.
This is also the future development direction of our UI design.
With the development of UI industry, the industry competition is becoming more and more fierce. From a ps-only offer to the popularity of user experience, 20 16-20 17 industry began to filter, and 20 18 needs full-link and compound design talents in the future.
What is the design process of the whole link?
First of all, let's take a look at the traditional design process.
As shown above, it is not difficult to see that our design is in the middle and late stage, which leads to a problem, that is, we will be relatively closed when making manuscript output, mainly because we don't understand the product background and why the interactive prototype is so laid out.
Therefore, it is not difficult for us to see that the traditional design process leads us to do only some design work, which is also the reason for our bottleneck.
Therefore, we should step out of the traditional design process and gradually design some products and interactions, so as to make our functional scope wider and develop in the direction of full link.
The complete link design process is divided into the following six steps:
These processes run through the whole design:
Before design: find the problem and analyze the background.
Design: solution, visual verification.
After design: after the product goes online, the data is tracked and the project is re-listed.
Compared with the full link design process, we can easily find the advantages of the full link design process:
1, full link can bring us more comprehensive design thinking?
2. Make our design more meaningful and well-founded.
Next, let's explain the steps of the complete link design process:
First, the problems found and background analysis
Finding problems and analyzing the background are two things to talk about together, because both are things to be done before design, and both belong to analyzing product requirements. By doing product analysis, we can enhance the value and experience of products.
Then how do we analyze the product demand? We can use 5W 1H product analysis method.
This requires our designers to make an interpretation when they get the product documents, communicate with the product manager, do background analysis after getting the interactive prototype, and sort out the points that better meet the needs of users in the overall content presentation of the products.
① Product background:
Analysis of product background can be made from the following three aspects: what to do, competing products and industry information.
Think about what kind of visual sense to give users by knowing what to do.
Through the situation of competing products, we should think about whether to maintain a consistent design layout. (Whether the layout should be consistent with the competing products is mainly to consider that if the competing products have cultivated users' habits very maturely, we must make users feel the same operation when doing some innovative product design. At this time, some visual innovations can be made, and the innovation in interactive layout does not require major changes. )
By understanding the industry information, we should think about whether it is necessary to do it.
② Target population:
To analyze the target population, we can analyze it from the following three aspects:
A person's age (where the main users are concentrated) corresponds to the design. What should we think about is the preference of this part of the accurate population?
B the gender distribution (ratio of male to female) corresponds to the design. If there are more women, what we should think about is women's color preference?
C interest characteristics (what do you like in your spare time) corresponding design, if you like reading magazines? Then can we integrate the feeling of magazines into the interface? In other words, the elements under the line are moved to the line. Or where is it easier for users to see when advertising?
③ Expected goal:
To analyze the target population, we can analyze it from the following two aspects:
What does A want to solve? (What problem is this requirement to solve? What kind of purpose is achieved? How? Reproduction analysis)
Are there any other options? (Are there any mature solutions in the industry that need to be used for reference? )
(4) usage scenarios:
To understand the user's usage scenario, we can analyze it from the following three aspects:
An interactive travel map: where do users come from and where do they go under this demand? That is, where is this in the interaction process? What is the environment before and after this step? Doing so can help us make the interface reasonable, that is, the information level, and help us judge where the vision is stronger and where the vision is weaker.
B scene characteristics:? For example, in what environment do users use it? Dim or bright environment? Is there any interference? This helps us to judge when using colors. Should we use bright colors or dark colors?
In addition, you need to do some strong light tests and candlelight tests after you finish.
C user psychology. ? What is the user's psychological state in the scene? For example, we make an order result page. At this step, the user is anxious to know the order result. At this time, it is necessary to highlight the user's result status and display the information well in order to improve the user's reading efficiency.
⑤ Use nodes:
We do this to avoid being too busy. We need to know the priorities of products and make a schedule according to these priorities. ? So how should we arrange it? We can arrange it by Carnot model:
Carnot model: Many of our design requirements and product requirements can be divided into five dimensions, which are based on users' expectations of the whole product. As shown in the figure below:
The order we require is the first factor, the second expectation factor, the third attraction factor, the fourth indifference factor and the fifth direction factor, which is what we try not to do in the product process. At this time, it is necessary to communicate with the product and remove these bad places. ?
⑥ How to verify:
I think this step belongs to visual verification and data tracking, which will be discussed in detail in the visual field later. ?
The above is a six-step modular product analysis method. That is, the first step and the second step in the whole chain design process.
Two? solution
There should be many solutions. This video teaching mentioned one: the basis of interface typesetting: cross analysis.
As shown above, the layout is made according to the importance and urgency of some information that users pay attention to in the interface.
The basis of judgment is: which functions are important (for users)? What is urgent (for the product)?
First, list some points that users are concerned about, then conduct research, speak with data, and screen out points that are important to users and urgent to products, and then make layout according to the cross analysis of the above figure.
Three? Visual Verification → Design Verification
In this piece, the video explanation says "visual verification", but here I want to combine several UI design verification, so I temporarily named it "design verification". This step will be completed after the manuscript is completed and before going online.
In the video explanation, two aspects of testing and verification are mentioned before and after: interface browsing test and usability test.
① Interface browsing test
The interface browsing test is to test the rationality of the manuscript. Ask yourself or the tester three questions to see if the actual results have reached the expected results:
1. What attracts you most about this page? Verify whether the visual communication is reasonable and meets the expectations.
2. What do you think is the function of this page? See if this interface design gives users a clear perception. What is this page for? It is that the function transfer is not clear.
3. When you use this page, will you use the functions it provides? That is, to verify whether the advantages of the product are clearly conveyed.
② Usability test
There are two methods to verify the usability of UI: scenario analysis and task testing. (Of course, we can not only use two methods to verify the usability of UI, but also use these two methods to improve the usability of UI. )
A scenario analysis: when we see a manuscript and can't see its usability, we can use the scenario analysis method to verify its usability:
Scenario analysis requires us to think like detectives. How do users use our products? Who, when, where and what?
For example:
b？ Task test
Through the task test, we can verify whether our design scheme is understood by users.
Task testing is to let the user complete an operation, and then check the user's reaction during the operation to see if our design is understood. What is the reason for not being understood? So how can we improve it?
Four data tracking
Data tracking refers to the design output from the data point of view after the product goes online.
In our design process, most people often ignore this point. In fact, the product is iterative. We need to analyze some data buried in the background, and then find out the problem and solve it. Therefore, this kind of data tracking analysis is still necessary.
When there is no room for improvement in detail and vision of our manuscript design, we can still find problems through data. Such as page jump rate, purchase rate and so on.
There is also, for example, when we do two A/B schemes, we don't know which one is better. At this time, we can do some A/B tests, and then we can see which one is better according to some data given by the background, so as to decide which one to use.
You can also look at the data to see if our design optimization has achieved better results. So in order to verify &; Quantify our design results.
So, how do we understand the data?
For example: Tencent App Bao.
Because the explanation is complicated, I won't say it here. You can go to the high school to learn the video explanation of the teacher's "Business UI Design: Full Chain Design Method and Process".
Five? Project resumption?
Project resumption, according to the teacher's explanation, in my understanding, is to introduce or summarize the design work of a project you have done. We can talk about it from the following five aspects:
1. Design fineness:
So how do we explain the design fineness? We can start from the following three aspects:
① Commercial color attribute.
② Unification and standardization of gradient amplitude.
③ Control of respiratory sensation
? Like the icon:?
? 2. Design process
That is to say, tell others what you have done in the product link, interaction link, design link and post-design link respectively.
Then let's sum up what should be done in the whole design process, such as product link, interaction link, design link and post-design link. ?
See the figure below:
3. Definition of style
In other words, when designing the visual scheme style, we should constantly optimize the airplane draft to match the visual tonality of the product. How to make the design draft finally conform to the visual tonality of the product? We can use the method of 5W 1H mentioned above.
4. Design judgment:
Before and after a manuscript is revised, the advantages of the revision should be clearly stated, such as: what has been improved? what has changed? What is the feeling for users?
5. Language organization ability
Share your achievements and insights with others.
The five aspects of the above-mentioned project resumption are also five aspects that we can introduce in the interview process or resume, which will help us to get the offer in mind.
Write it at the end
Finally, I hope this article can help you break through the design bottleneck and become more than 40% design industry division.
Finally finished! Please correct me if it is not good enough or wrong! Because this article involves a lot of content, some views are somewhat general. If you want to have a detailed understanding, I recommend you to learn from Zhang Shuang's "Business UI Design: Full Chain Design Method and Process" video explanation, and there will be cases in it. I just want to sum up and share it with you after learning. For the sake of my efforts, just like it ~