This article is a summary provided by a student. This article also hopes to give some inspiration to new friends: we draw prototype drawing is not just drawing, drawing prototype drawing has been equivalent to designing products, there are a lot of content to think about. If you already have a mature prototype drawing method, you can do the same training as him, I believe there will be no small gain.
The theme
Through the one-week prototype drawing practice, I deeply understood the core of prototype drawing design and laid a solid foundation for the future development of my product path.
background
In 6 days, I copied 7 mature products (including 36 krypton, netease Cloud Music, Weibo, Tencent Video, In, Alipay and Meopai), with a total of 18 pages.
harvest
Mentality building
One of the most overlooked pitfalls of product management: a perfunctory, indifferent approach to prototyping.
In the design of the prototype diagram must be rigorous, serious attitude to face. Prototype design is one of the most basic and important skills that many junior product managers or those who have been working on products for many years overlook. The product manager’s output is not much, and in most cases it is prototype drawings and requirements documents.
Under the banner of “Everyone is a product manager,” prototyping is a simple, basic task that anyone who knows axure can do (even programmers can do it). But prototype drawings and requirements documents are the most basic output of a product manager because they are basic, simple, yet contain the most profound principles in them — the process of design and the expression of ideas.
After practicing prototype diagram for a week, I deeply realized the importance of prototype diagram and summarized the following lessons:
- Learn to think about the design principles of other people’s products when learning from mature products. Don’t simply copy and imitate, but don’t know why they are designed this way. There are two problems with this: one is that we don’t analyze why others are doing this, and the design method may not be suitable for all situations in different situations. It may not be suitable for your product, but it has the opposite effect. In addition, by simply imitating, you will always be one step behind other products, and you will gradually lose your core ability as a product person — to think deeply.
- In the face of different design schemes of the same product, learn to make comparative analysis and think comprehensively from layout mode, perspective order and parameter selection.
- Avoid impetuous, not serious, not thinking, mechanical plagiarism design scheme;
- The following benefits can be built on the premise of the above three points: the ability to do “non-existent product iterations” before development comes in, rather than wait until product development goes live to think about how to iterate; The prototype diagram is used to deduce and simulate user usage scenarios and user feelings.
- If we do not correctly face the prototype design, it will inevitably lead to the design of the prototype are rough and perfunctory, is unable to achieve the core concept of “non-existent product iteration”.
Article detail page design analysis
When copying the information details page of information products, I came across different design concepts of the most typical similar products in the information details page. After comparing the design schemes of Toutiao and 36kr, I found that the real greatness of prototype design was a wonderful feeling and experience. Only in the heart to thoroughly analyze and understand the principle of design can we find that all the core is subtle in the details.
Product managers often like to talk about user experience, but real experience starts from the details, we have learned to say better but do not know how to do, experience how to do? Can be refined to a copy of the order change, the adjustment of words, will result in the user experience of product qualitative change, the product design is to make perfect details, and make detail is continuously go through the comparison and analysis of different design schemes, thinking it is concluded that the optimal design scheme, which is a prototype of polishing process.
We use the information detail page in the design of menu bar and title of the four schemes to do analysis; The four schemes are as follows:
- Dark title bar + title center
- Dark title bar + title left aligned
- Transparent title bar + title center
- Transparent title bar + title left aligned
First look at no title bar design (transparent title bar) this way, it is not common in product design, the general product practice will put the top title bar with dark color do highlight, in order to let the user perspective better notice the title bar to operate some important functions. And transparent title bar design advantage through the use of color (color consistent with the content of the underlying), let the user feel the existence of the title bar, can appear more on product whole perspective space “wide”, while the existence of the title bar will be compressed space in the perspective of people will apply area becomes (an chestnuts: netease cloud music change skin to white).
In the information details page, the design of the “transparent title bar” way conveys the Angle of the effect is completely different, because the design of the transparent title bar here can let a person feel the article title is not in the “top”, but in the position of the “top offset”, because “above is empty,” and because “is empty” gave an extended content perspective, It’s weakened in the title “Hint” (36 krypton, for example).
A counterexample is Toutiao, which uses a “dark headline bar” to make it look like the headline is already “on top”.
As you can see in the image above, 36 krypton and Toutiao have slightly different headline designs. 36 Krypton’s title is centered, which is based on the fact that the irregular shape creates a sense of separation between the headline and the main text, while the left-aligned design of toutiao’s title fails to achieve the visual effect created by the irregular nature.
From this we can see that no one design scheme is absolutely right or suitable for all product application scenarios, through the same “transparent title bar” design in different products, the effect is not the same.
Different layouts of similar products
In many cases, it is easy to overlook the fact that the same products in the same industry and the same target users also need to consider the differences of their products, resulting in different design schemes and final presentation forms of the final products. The differences are mainly in the following aspects: different core values of products, different product positioning, different core functions of products, and different application scenarios.
Here’s another example:
Netease cloud music and QQ music are music products, we will find very interesting place to observe carefully. The biggest difference between cloud music and QQ music lies in the core function. The core function of cloud music is recommendation, while QQ music is search.
Because of the difference in product values and core functions, they are very different in design schemes. The search function of cloud music is in the upper right corner of the blind spot, which is the most inconvenient operation. However, even so, it does not affect the overall product architecture of cloud music, because the core function of cloud music is recommendation, and it is not necessary to find the music you like by frequently using the search function. QQ Music put the search function in the form of the search box in the middle of the top menu bar, from the perspective of more prominent the importance of this function.
Product color
In a large number of mature products, we can also find some rules about the use of color. Although the UI is responsible for product color collocation, the overall presentation effect of the final product still needs to be reviewed by our product manager.
In the color of the choice of the most taboo design requirements to do all kinds of good-looking and cool, in fact, designers and ordinary people, have their own aesthetic standards, blindly pursue beautiful and cool, and ignore specific users, specific scenes, specific needs, such a design plan is unable to create any value for users.
Through observation and copying of multiple mature products, it is found that a good product must be very prominent and easy to identify the main color of the product, and also pay attention to the principle of simplicity in color. In general, there are no more than three colors for products. If the colors are too complicated, it will strengthen people’s difficulty in identifying information and cause unnecessary information interference.
How to analyze a product
Mature products on the market can give us the significance of reference and give us guidance in designing products and making plans. However, how to analyze a product and combine it with our own product becomes the key. I summarized the core dimensions of prototype drawing: page layout, location of core functions, perspective sequence and landing point, parameter selection and location (parameter selection is determined by requirements, core functions, and product motivation), and hierarchical relationship between elements.
Elements by color, size and shape of the relationship between different to distinguish, the concrete in the prototype can distinguish by interval line, system in the design of the bottom space, to distinguish different color plates and other methods to make a clear hierarchical relationships between elements, associated elements are arranged in together, makes the product’s overall administrative levels feeling more organized.
Small details of prototyping
In the initial stage of prototype design, it is not recommended to use the darkest color to express the color, which is reduced to one dimension, so that there is room for the use of dark color to highlight a certain function.
Display of copy works
Information details page comparison of 4 alternatives
Transparent title bar + title center, transparent title bar + title left aligned
Dark title bar + title center, dark title bar + title left aligned
Process of comprehension
Why do prototypes
- Drawing process = design process; The result of drawing = expression of ideas;
- Focus on the thought process of design, how to better express the concept and ideas of the product, rather than mechanical copying;
- Understand the principles, functions and application scenarios of different design schemes, compare and analyze various design schemes to expand the material of prototype design, so as to be able to choose flexible schemes when designing products in the future;
- To further master the core skills of parameter selection, page layout, function location, perspective order, element relationship and so on;
- From the prototype design can be a preliminary simple experience of the product choice;
How to draw a prototype
- Cognitive model: according to the core functions and functional structure of the product, think about the overall layout of the page, the placement of functions, how to highlight the core functions, how to establish visual order, how to establish the hierarchical relationship of elements, how to select important parameters;
- Principle of drawing: do first, think later;
- Materials: basic materials (line, box, word);
- Hide material (distance, color, size, pattern, transparency, position);
- Drawing process: prototype overall framework building (system bottom → top operation layer → content bottom → element layer);
- Page design process is from layout → parameter → element relationship (thinking logic is a forward process, analysis and verification is the reverse, if the element relationship is not satisfied with the modification of parameters, parameters are not satisfied with the modification of layout);
- The core of prototype diagram: the design process and the expression of ideas, the choice of parameters, the sequence of perspectives.
At the end of the article
Any skill that is more basic is more core, because the more basic it is, the more universal it is. All advanced skills are evolved and upgraded from basic skills, while many high-level skills that make people’s heart expand are not universal because they are too professional, and can only solve a fixed problem. Laying a solid foundation is the road we must take as product managers. We should establish a correct cognition for our future growth. We should not go on a detours in cognition because of impetuous, contemptuous and arrogant attitude.
# Columnist #
Withered Leaf, wechat official account: Withered Leaf Cafe. Everyone is a product manager columnist. Nearly 6 years of experience as a product manager, good at social, community, segmentation group mining.
Everyone is a product manager. Reprint without permission is prohibited.
Photo from Pexels, based on CC0 protocol