The law of formal beauty is a summary of the formal laws of beauty in the form and process of human creation. The beauty of all things in the world can be summarized by the law of formal beauty. There are also formal rules of beauty in flat composition: unity and change, symmetry and balance, rhythm and rhythm, contrast and harmony. I have shared with you the use of contrast and blank space in the webpage. Today we continue to share how so many elements in the webpage are unified.
Visual unity can be reflected in: pictures, colors; blocks; layout; fonts, visual elements. In addition, there is a unity of interaction.
1.Unification of pictures
The unity of pictures is reflected in the unity of the size of the picture, the unity of the color system and the unity of the picture style.
Regardless of whether it is Jingdong or Tmall Taobao, the image processing on the websites of these malls uses such a unified principle. The requirements for pictures are different in different scenarios. For example, the homepage of Jingdong Mall, each block plays a certain navigational role. In such a scenario, the required pictures are relatively simple rather than complicated background. Below I made a wrong example to show you:
The picture on the left is the picture of the official website, and the picture on the right is an error demonstration. Obviously, the left picture is more display and readable, and the visual effect is better. The reason why the image on the right looks bad is because the image sizes are inconsistent, and the background colors of the images are also inconsistent, so it looks particularly uncoordinated.
Well, now someone should want to ask, is n’t the product picture on the page that Jingdong or Tmall Taobao searched after searching through colorful, and it does n’t look out of place.
The uniformity of these interfaces is reflected in the size and overall style of the product blocks. Except for the product map, other layout styles and block sizes are the same. This is exactly the opposite of the home page. Each block of the home page The sizes are inconsistent, so the images are used to coordinate, while the inner pages are consistent in block style, and the images are inconsistent. But no matter which coordination method is used, the interface is well coordinated.
The unity in picture style is mainly reflected in the choice of pictures in web pages. In realistic-style web pages, it is not suitable for cartoon pictures. In the refreshing interface, it is not suitable for cool pictures.
Color uniformity refers to the uniformity of the color system in the web page. Such uniformity can be reflected in the overall color system in the web page, the color of all block titles in the web page, and even the buttons in the entire web interface. Color match. In general, if you do n’t know what color is set for the webpage, the comments and suggestions given by Xiaobian are to follow your logo color.
The main color of the Obrigado Coconut Water Beverage website is a combination of green and white, interspersed with some orange and yellow to play an active role. Green is the main color of the logo, and orange is an auxiliary color of the logo. You can see the whole The website is concise and refreshing. Yellow and green do not appear on the web page in equal proportions. Just like the logo, yellow accounts for less. You can visit and see that some interactive applications are doing better.
It is known that the font display in the interface is particularly important, so the font must not be confused by the viewer, and it must be unified.
Fonts can be unified in changes. Whether it is fonts, font sizes, or colors, don't make too many effects in order to highlight the font, but weaken the readability of the text.
In a website, when handling fonts uniformly, it is best to uniformly set them when setting the interface. You can use some website building systems to set it, or you can determine the font size of the interface by writing css styles. The font size of the title and text should be uniform. It is necessary to avoid the homepage text being 14px. The font size will change when entering the subpage. At 16px, it is easy for viewers to feel uncomfortable.
In addition, the choice of fonts must be uniform. There are many fonts on the font now, so when choosing a font, it is best to choose a font that matches the overall style of the web page.
4.Unification of blocks
The unity of blocks is mainly reflected in the height and size of each block, the color of the border, the title style, or the overall style of the block. Of course, not all of them are good. It is necessary to analyze the situation. It is still the Tmall product interface above. So many blocks and style borders have been unified, looking neat and orderly. The figure below shows a wrong demonstration. The borders of the blocks are treated with different colors. Such blocks will appear messy when they appear in the interface together.
Although the block height of the waterfall stream is not uniform in height like the product block, a certain uniform effect is made in the layout and gap of the block, so that the interface is not messy.
The unification of the layout mainly means that some layout settings in the webpage should be unified. Do not use this sidebar for navigation to the left and the next navigation for the sidebar on the right. New interface layout.
Are the top navigation and logo positions consistent? Are line spacing, text, and image spacing consistent? These all reflect the details of a website. It may be difficult for us to find out how good some webpages are in the design, but if some details are not done well, it is easy to make people feel uncomfortable to use. Therefore, it is recommended to be uniform in the layout, and the designer can uniformly set it when writing the style layout. The same type of operation should have similar result feedback, and the same functional interface should have similar layout styles.
6.Unification of visual elements
The visual elements here include the size, size, and color of the various elements in the web page. These elements can be buttons, icons, animations, etc. In the design of the website, the consistency between different pages must also be considered. Although the functions are different, the visual style of the different pages must be consistent (which can be slightly modified).
The food website of MINGO has coordinated from the title color, button size color, and text size of the interface. Although there are many interface elements, they are not messy, but the unified treatment of some details makes the interface more lively.
7, unified interaction
Unity in interaction is also important. In addition to what you can see in visual appearance, you also need to work on "interaction" and "behavior". Interactivity among the pages is also important, and it's best to keep them roughly the same to avoid too much clutter. It ’s like the design of some buttons on the market. Some buttons on the market are turned on when pressed, and some buttons are turned off. The interaction design is different. It's not easy. This is true in life, and the unity of interaction cannot be ignored in web design. If the same element of the same interface is triggered by the user, this element will give the user two different display effects, which will only allow the user to This site creates a sense of distance. The following counter example
Let me give you a simple example. This is a common web label block. Normal mouse movement will display the main color-orange. On the right, I made a wrong example. If this mouse button is moved over, the orange and The button zooms in, the other button moves the mouse to show blue or green, and the button is zoomed out. This kind of interactive experience will be a bit bad. The inconsistency in visual and interaction will make the viewer more uncomfortable and difficult to use Accept, so while we all unify the visual elements, the interaction also needs to be handled uniformly.
Be consistent in vision, interaction, and results. Reducing the user's cost of use can also make users feel intimate and appreciate the rigor of product design. Unified coordination is actually more important in web pages. It can make a strong or abrupt interface more comfortable and softer, reduce the uncomfortable feeling of users, and reduce the distance and intimacy between users.