But as an occasional marketing method, there are some necessary posters, so where do the low-cost and high-quality posters come from? After our gym research, we found that fitness management systems such as fitness assistants and green oranges all have the function of automatically generating posters for free. The posters of fitness assistants are rich and beautiful, and can be generated quickly by adding simple information. The poster of Green Orange is more customized. It takes some time to set the picture content manually, but the final effect is not bad. No matter how the poster is formed, as long as it meets the taste of your gym! The point is that this poster is free! The cost is saved a lot!
Design dry goods ~ visual expression, establish information level, depth, good text and long warning. It is recommended to collect before reading!
As visual designers, our role is not only to meet the aesthetic needs of users, but also to convey brands, information and functions. In order to effectively convey information to users, we need to establish an information hierarchy instead of throwing it to users for their own understanding. What visual methods can achieve this, and whether there is a theoretical basis behind these methods is the theme of this paper.
First look at the following two pictures. The left picture shows the effect of the camera shooting, and the right picture shows the effect when the human eye is still. It can be found that the human eye does not obtain information at one time, and it cannot produce multiple focuses at the same time, thus keeping the line of sight in more places. What designers need to consider is to let users obtain information in a certain order through eye movements, so as to help the process of obtaining and understanding be efficient and natural.
This design method aims to solve two main problems:
1, the efficiency of information acquisition and understanding by users.
Establishing a good information hierarchy will enable users to quickly acquire and understand useful and interesting information in a limited time, and generate the next behavior;
2. Professionalism of designers
Designers consciously analyze information priority, understand which visual expressions can establish information hierarchy, and the theoretical basis behind each method, rather than just designing by feeling.
First, early understanding &; analyse
Before starting the design, the visual designer should not only know the background goal of the project itself, but also know some specific pages to help guide the later design, including page positioning, atmosphere creation, information priority, user core behavior and so on.
1. 1. Page positioning is the premise to help analyze page information priority and core behavior.
There are usually:
Who is the user?
Where do users come from, that is, from what channel to come to this page?
Page content positioning, what to provide and what not to provide.
Page function
For example:
When we design the new homepage of purchasing direct selling market, we interactively analyze users' familiarity with the service and determine the core target users of the homepage as new buyers. The positioning of page content is to show the value point of the market, and the data generated by users let new buyers know that direct purchase forms a brand;
1.2. Understanding the atmosphere that the page needs to create can help us to judge which elements can help us achieve our goals. The atmosphere can be created by the content itself or by the design of visual elements, but it must be noted that the atmosphere cannot be stronger than the content itself that users pay attention to.
The atmosphere can be:
New year theme promotion
Low discount
The information is new.
Active users, etc.
The following is the official page of the big promotion activity. The picture on the left continues the carnival atmosphere in the warm-up period, but at the beginning of the activity, the atmosphere is no longer the focus, and users are more concerned about the goods and discounts themselves. The picture on the right is the combination of adjusted atmosphere creation and category pictures, which solves the relationship between atmosphere and content well.
1.3, priority of analysis information
1) First-class information attracts users: Assuming that users will only stay on this page for 3-5 seconds, what attracts users to continue browsing is the core selling point of the page, that is, first-class information. It must be few but fine, and it should be outstanding in design.
2) The secondary information helps to understand: under the attraction of the main information, users may stay for 3-5 minutes to further understand the content. At this time, showing the secondary information is the essence of refining the content and helping users to understand the information in the shortest time.
3) Detailed understanding of three-level information: The first two types of information can basically help users get enough information. If users continue to stay longer to learn more, this kind of information will be more, the visual level will be lower in design, or the entrance jump will be displayed and provided in an interactive way.
1.4, User Core Behavior Analysis
Different types of users will produce behaviors at different stages. What is the ultimate orientation of these behaviors?
For example, in the product details page, some users will check the user's comments, historical transactions and other contents before deciding to buy, but these viewing behaviors are ultimately to help users judge whether to buy the product, so the core behavior is the final-oriented purchase.
With these analyses, the information priority and user behavior priority of large modules will be given in the interactive output document, as shown in the following figure.
Before designing vision in detail, it is necessary to analyze the priority of specific content in each module and make the following schematic diagram, and confirm it with the interaction and business parties. These are important outputs to help the visual design process not deviate from the direction.
Second, establish the visualization method of information hierarchy
Visual expression mainly includes the following elements. In order to make the effect more important in actual design, various methods can be used at the same time to achieve better results:
location
size
distance
Content form
colour
2. 1, location
Location is a factor to be considered at the beginning of design. People always follow certain rules when they look at things. Following these rules in design can help users to see or understand things in front of them more easily and quickly. There are two laws related to location design elements:
1) When the eyes deviate from the visual center, when the deviation distance is the same, the left upper corner is the best, the right upper corner is the second, and the left lower corner and the right lower corner are the worst. Therefore, the left upper part and the middle upper part are called "perfect angle". For example, important information such as website logo, trade name and theme are usually placed in perfect angle. Of course, this division is also influenced by cultural factors. For example, Arabic characters are written from right to left, and the best view is the top right. The following picture is taken from the Art Course of Web Interface Design by Zhang Fan and Luo Qidong Gong. After dividing the screen, users pay different attention to different positions:
2) The second rule is that the eye moves faster in the horizontal direction than in the vertical direction, and it is not easy to get tired. Generally, objects in the horizontal direction are seen first, and then objects in the vertical direction are seen. As shown in the figure below, the difference between left and right attention is smaller than the difference between upper and lower attention. If we want to reflect the parallel relationship, it will be more appropriate to arrange it left and right; However, if we want to widen the gap, we can only achieve it by location, and it is easier to achieve the goal by arranging it up and down.
For example, as shown on the homepage of Time Weekly website, the big picture on the left is the focus news of the day, which is the first-class information at the information level. In terms of visual performance, it is not only large in area, but also in an advantageous area. Maybe 98% of users will pay attention to this area first.
If the position of the design draft is adjusted as follows, if the focus news picture is the first priority information, although it is in the form of a big picture and occupies a large area, it will be distracted by "LatestHeadlines" because its position is not in the best view, and only 60% of users may see the right side first; If information has priority, it is necessary to widen the gap in visual performance, rather than approaching equality.
3) Users give priority to the upper part, and web design has the concept of the first screen. The information of the first screen is higher than that of the second and third screens that appear by the user dragging the scroll bar.
Because users use different screen resolutions, the height of above the fold will be different. According to the data of our website, the current resolution height is 768, so the design will be based on the height of 768, and the actual display to users is 600px on average. This data will be adjusted according to the resolution changes of future target users. We can use this value as the reference line of above the fold when designing.
2.2. Size
After determining the location of the module, we will consider how much site to give this module, and the size will intuitively reflect the importance of the information.
There is a case of sports poster design, involving football, golf, baseball and basketball. Basketball and football will be more important if they are designed according to actual size. In order to reflect the equality of sports, the size of the ball was adjusted in the design.
The conclusion in GilesColborne's "simplicity first" can guide us to open the gap according to size:
1) The important element is large, even if the proportion is out of balance, it can be considered.
2) Find ways to show the gap; If the importance of an element is 2, then its size is 4.
Or take the front page of Time Weekly as an example. At present, the focus news picture on the left side and the middle news picture occupy different areas, which is convenient for users to pay attention to the first-level information first and is not easy to be disturbed by the surroundings.
Comparing the areas of two news pictures, we can see that the gap is about 4 times;
If the interface is adjusted as follows: after the focus news map is reduced by two times, it can be seen that the distinction between visual levels is not obvious.
In addition to the area occupied by the element itself will affect the visual level, the degree of detail amplification of the element will also play a role. After the details are enlarged, the human eye will feel that the elements are clearer and closer to the eyes, and it is easy to notice them first. Of course, the premise is to ensure that the information can be understood. If the local details are enlarged but users can't understand what the information is, it won't attract users.
The picture below shows the website of a model company. Photos of models appear randomly on the homepage, including photos of face and bust. Photos with enlarged facial features ensure that users can understand the image of the model, so users will give priority to photos with enlarged details.
2.3. Distance
As mentioned above, if you enlarge the details of the element, your eyes will feel closer to it and get priority attention. Although the medium of information display is flat, it can reflect the three-dimensional effect through visual means. In addition to size, there are other visual means as follows:
1) Reduce the three-dimensional distance.
To achieve the effect of being pulled away, the following methods are to make the information unclear and the eyes seem unable to focus on the information, including:
Fuzzy elements, the graphics in the background below are blurred, so that they are not on the same plane as the two action points and icons on the right, and are farther away from the eyes. Users will not be disturbed by the fuzzy background when identifying action points and people.
_ When some background images are blurred, it is difficult to be perceived as a whole. Choosing to reduce transparency can also lengthen the distance.
The problem of _ Shadows and Shadows, when there are many colors or elements in the interface, just reducing the transparency may not necessarily open the distance. As shown below, I hope that when buying TV, the other four modules have not obviously widened the gap because of their rich colors after reducing the transparency. After adding a gray translucent layer, modules other than TV purchase naturally fall behind the line of sight.
2) Close the three-dimensional distance
Adding projection is the most commonly used visual technique to make elements look different from other contents. Usually, pop-up boxes and floating layers will appear when the mouse moves over other information, so adding projection can help users focus on the module with projection without being disturbed by the information behind.
3) Besides 3D, 2D distance also affects the visual level. According to the proximity law of gestalt psychology, parts with short distance or close to each other are easy to form a whole; The human eye is more likely to notice the information at a close distance first. In the use of visual techniques, the elements are close to the previous focus, and the visual level is high. As shown below, the first-level news focus map is close to the small picture on the right, and the line of sight is easy to move to the upper right corner;
After adjusting the distance, although the small picture in the middle is more attractive than the text itself, the line of sight tends to move down first because the title below the focus picture is closer and forms a whole.
2.4, content form
After determining the relationship between the position, size and distance of the module, we will continue to consider the form of content including video, pictures, text and so on. Here we mainly talk about the graphics and words we often use; Compared with words, pictures play an important role in catching users' eyes, and also enable users to form an image memory in a short time. From the visual level, human eyes usually pay attention to pictures first, and then to words. But that's not enough. Grasping the user's eye through pictures and guiding the line of sight to the next point of concern are more considerations in the design, which can be summarized as follows:
1) direction guidance
Some images in the picture have obvious directionality, such as the direction of human eyes, the direction of gestures, the direction of object movement, the direction of illumination and so on. These features will guide the human eyes to move in the set direction, thus reaching the visual level.
The picture below assumes that the person in the middle attracts people's attention first, which is the first level of information. Because the gaze direction of human eyes is to the right, the next target that users pay attention to will turn to the "encoder" text, which is the second level of information.
The position of "WHATWEDO" in the upper left corner is easy to be noticed first, and the characters on the right occupy a lot of space, which will also grab the line of sight. However, because there is no other information about the moving direction of the characters, the pictures do not fully play a guiding role, and users will not browse smoothly.
After the adjustment, although the position of "WHATWEDO" is not in the dominant area, it is natural to let people's eyes fall on the text information through the guidance of the picture direction.
2) Symbol guidance
In addition to pictures, some symbols are sequential and directional, which can also effectively guide the line of sight to browse according to symbols, including Arabic numerals, alphabetical order, chronological order, arrows and so on.
In the first three places in the picture below, although users are more accustomed to reading from left to right, their sight will also be affected due to the guidance of numbers, according to1>; 2>3. If you want to make this order more obvious, you can enlarge the picture size of 1 to widen the gap and combine various visual methods to achieve the effect.
Timeline is also widely used in the interface, and human eyes will be affected by the time sequence, even breaking the conventional left-to-right browsing habit. As shown in the figure below, although the position of 2 is easier to guide users to browse first, the time axis has more obvious influence on the information. The average user will look at module 1 first, and then pay attention to module 2 from right to left according to time.
2.5, color
Color is an important factor that affects users' first impression of the interface, and the application of color can also produce immediate effects on the visual level. To sum up, the differences in human attention to color are mainly the following two points:
1) Warm color first and then cool color.
At present, there is no absolute order of stimulation and reflection of different shades of colors on human eyes, but there are obvious hierarchical differences between cool colors and warm colors. As shown in the figure below, the human eye usually sees the picture on the left first, which has a certain relationship with the reflection of different wavelengths by our human eyes;
Physiologically, the adjustment of human lens is very precise and sensitive to the change of distance. We can judge the distance of an object from us, but there is a certain limit, and we can't adjust it correctly for the slight difference of wavelength. When the eyes observe colors with different wavelengths at the same distance, warm colors with longer wavelengths, such as red and orange, form internal images on the retina; Cool colors with shorter wavelengths, such as blue and purple, form profile images on the retina. So the warm color seems to be moving forward, and the cool color seems to be retreating.
Hubspot, an American digital marketing company, once made an A/BTest to test the difference of click conversion caused by different colors. In the picture, the contents of the left and right test pages are exactly the same, and the only difference is the color of the button. In the sample test of more than 2000 people, the click-through rate of the red scheme finally exceeds that of the green scheme 2 1%. Before the test, most researchers speculated that the green scheme would get a higher number of hits, because intuitively, green stands for pass and permission, while red is more inclined to warn and stop.
This test reflects the influence of warm colors on users' attention and mobility to some extent. Of course, it doesn't mean to use warm colors in order to improve the click-through rate. The specific color style should be designed according to the product positioning.
2) Comparison of Gao Fancha's first low and then high.
In addition to the different stimulation of cold color and warm color on eyes, color contrast is the most likely factor to cause attention difference. In order to survive in nature, the protective colors used by animals are related to contrast. For example, the owl in the picture is related to its living environment, and its coat color has evolved into a similar color, which plays a role in hiding and protecting; On the contrary, the color contrast is particularly easy to attract attention, such as the unique red in the yellow tulip below.
The size and distance mentioned above are all visual means to reflect contrast, and the contrast in color can be achieved mainly by the following methods:
Hue contrast, in the following figure, the main color is blue, the blue action point is consistent with the overall color, and the layering is relatively weak, while the contrast between the green action point and the blue hue makes the layering higher.
But there are many colors. How to determine the contrast? We can look through the color ring, as shown in the figure below. The intensity of hue contrast depends on the distance on the color circle. The greater the distance, the stronger the contrast, and vice versa.
Saturation contrast and lightness contrast are well understood, and both have controllable values. The greater the difference in saturation or brightness values between two colors, the greater the contrast, and vice versa. Look at specific examples: For example, in the navigation chart below, the current character icon has higher brightness, and the black background with lower brightness is easy to be seen first.
The pie chart below shows that the percentage saturation is high, which is in contrast to the overall low saturation. Comparing the same hue through saturation can not only widen the gap to form a visual level, but also have an overall visual effect.
Summarize the visual expression techniques mentioned above and form a table for everyone to remember as follows:
Third, look at the visual flow of the page.
After the information hierarchy of visual expression is established, designers need to constantly check whether the browsing order of users is really as expected at 1 to 2-3 levels, including browsing in large modules and modules of the page, which will form a visual flow on the page;
Looking at the visual flow of the page can help us to judge whether the user browses the page smoothly and whether the browsing order is regular. If our design can't effectively guide users' sight and users' browsing tends to be random, it will be difficult to convey the information they want to express quickly.
The following contents mainly introduce the typical visual process and the characteristics of each type, including:
Linear visual flow
Guided visual flow
Beating visual flow
Radioactive visual flow
1) linear visual flow
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
For example, the home page, the whole page and a single module are typical horizontal visual streams. After the user browses to the boundary from left to right, his eyes sweep back to the next line and continue reading from left to right. The best area for horizontal browsing will have a numerical value. For example, digg selects a page with a width of about 1000px and displays three items per line. After the user's screen resolution becomes larger, should these two values continue to increase, and to what extent is the human eye's efficiency in obtaining information the highest? I haven't found the corresponding theoretical or experimental support for this problem, so I'll check the information later.
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
The following picture shows that the layout of the digg homepage of the original horizontal visual stream has been adjusted to become a vertical visual stream. In addition to the big picture, users will choose one of the three columns to browse vertically until they find a certain target information, and then browse the details horizontally.
The vertical height limit of the web interface is smaller than that in the horizontal direction, because users are used to scrolling up and down to browse more information. When users are still determining the target information, vertical visual flow can help users get more information without scanning back. In the facebook calendar interface shown below, when the timeline is arranged horizontally, due to the limited width, it is necessary to switch horizontally or scroll bar to view more dates:
Adjust the direction of the time axis to be vertical, so that users can view all the dates of the current month more efficiently by scrolling up and down.
_ Biling swimming, birds are singing and flowers are fragrant, but because of the inclination of the angle, the text cognition is somewhat difficult. A large number of text information arrangements are not suitable for this visual flow, and they are often used as embellishments in design or as interfaces with less information, such as the health club poster below;
There is also a small diagonal visual flow on the web interface to reflect the sense of movement.
_ When swimming, the user's line of sight will form a personalized curve with a sense of rhythm and liveliness. This type of eye movement has a large range, which will cause visual fatigue for a long time and is not suitable for long paragraphs. Generally, it will be combined with graphics to make a curved visual flow, so that the user's line of sight stays in the image area for a period of time;
As shown below, add a picture to the curve visual stream, let your eyes stay at the picture node and browse the content of this node, and then continue to browse along the curve.
2) Guide the visual process
As shown in the following figure, the guided visual flow will design an inducing element to attract the user's attention, and then notice the target information through the inducing element; Common inducing elements can be divided into lines, images including people or things, arrow letters and other indicators. This kind of visual flow should grasp the primary and secondary relationship between the inducing elements and the target information, and the simple inducing elements should not be too strong, otherwise it will weaken the spread of the target information; If the inducing element can contain some target information, the effectiveness of information transmission can be increased.
As shown below, the red liquid in the tube is moving, attracting users to reach the target message along its moving direction.
The content form mentioned above, from pictures or symbols to the next visual focus, is also a guiding type from the perspective of visual flow. The following two examples are the use of guided visual flow in the local part of the page.
3) The beating visual flow
In the information with the same or similar nature, people are given the right to choose independently by choosing the information that is prominent or interesting, but in design, it can also be transmitted by adjusting the strength of elements without revealing traces.
For example, in the website interface of the model company mentioned above, the photos of the models are all information of the same nature, and the user's browsing is random to some extent, but it also conveys the priority by enlarging and reducing the portrait.
4) Radioactive visible flow
The line of sight starts from the middle of the page, which makes the elements in the middle have the strongest impact and the clearest information transmission, and then forms the visual movement that diverges from the middle.
For example, in many car websites, the main map in the middle can best reflect the core of information, and then spread to the navigation above or other service portals below through the main map.
The above four types of visual flow are typical, but they do not represent all. We can also design more creative visual streams. No matter which path, whether users browse smoothly and whether information is delivered in place according to priority is our goal.
Finally, to sum up:
1. In the early stage of the project, you need to know the atmosphere and content positioning created by the page; Analyze the priority of information and the core behavior of users by combining interaction; Pre-preparation can help the visual design process not deviate from the direction.
2. Establish information hierarchy through visual expressions such as location, size, distance, content form and color.
3. In the design process and at the end, we should constantly review the visual process of the page to see if the user's browsing is smooth.
We consciously analyze the information priority that users pay attention to and intuitively show it, which is a very important responsibility of the position of visual designer. I hope these methods can help us perform this duty better, and I am happy to encourage you!
My friend and I made a small program theory dock and built our own theory library. There are many terms, laws and theories about interaction, psychology and management. Wechat scans the small program code below to experience it quickly!
How can posters be designed to attract people's attention and attract more attention? Wherever we go, we can always see all kinds of posters. Most people have an aversion to advertising-related things, thinking that it is a lie, a conspiracy of merchants, and so are posters. A poorly made poster is a piece of waste paper in the eyes of others, but a properly designed poster will make people shine, enjoy aesthetic feeling and have artistic appeal, which will naturally make people pay attention to the content promoted by the poster. So, how can we make the poster more attractive?
Before designing posters, we should consider the design steps of publicity posters:
1. What is the purpose of making this poster, the strategy of the poster, who is the target audience of the poster design, the expressive force and creativity of the poster design, and how to combine your design with the product well.
2, poster design should pay attention to the elements are:
(1) First of all, copy should be supplemented, and pictures should be given priority. Secondly, we should refine the content of the poster and grasp the key points.
(2) The font of the theme should be very eye-catching and attractive;
(3) Full visual impact can be achieved through images and colors;
(4) Remember that the content should not be too much and complicated. The picture should have a strong visual center, be novel and concise, and have a unique artistic style and design characteristics.
The design of posters should first highlight the theme, background color, color and theme, coordinate font size, highlight the content of large ones, make the content moderate, and be simple and clear at a glance, so that people can see what they are talking about, attract attention, and see what they need, thus generating consultation and purchase.
Posters have three main elements.
I. Style
Slowly work out the overall style of the poster. Often the unique atmosphere is more eye-catching and attracts the audience to explore and ponder naturally.
Two. element
We need to determine the essential elements of a good poster. Title part, text part, picture part, additional text information, etc. Streamlining is streamlining, and less is more.
Three. set type
Typesetting is often a simple and extremely complicated link in poster design. It is necessary to distinguish between primary and secondary, highlight key points, and not destroy the overall style and aesthetic feeling.
abstract
When you are thinking about a poster, don't start in a hurry. You can visit more design websites such as Station Cool and Douban. First look at the typesetting ideas of senior experts, and then try to gradually integrate into your own ideas. Only by constantly imitating and learning can you learn that other mountains look short under the sky ... Don't be obsessed with building a car behind closed doors, which will only increase your draught and temper.
Excellent poster design can be divided into the following parts.
1. Refine the eye-catching theme
Study the design requirements and extract accurate words and short sentences as the main title design of the poster. Of course, it would be best if Party A had a copy.
For example, the theme of fitness posters reflects the figure and strength, so it is generally necessary to choose a concise font, so that the elements of each part fit the theme and convey the most accurate feelings to the audience.
2. Meitu atmosphere creation
Posters are a combination of short stories and pictures. Sometimes pictures account for a larger proportion in posters, so pictures are