Those layouts in the interface design-chart

This article mainly talk about the layout and graphics use, for the master may be a little cliché, but the mobile end of the interface design may be a little reference value, take a few minutes to see it.

The beauty of the interface, in addition to composition, another important means is how to deal with white, can also understand the version rate. Leaving White is to highlight the level, highlighting the content.

A small handheld device screen determines that the information display is limited. Users ' effective acceptance of information is not directly proportional to the amount of content provided in the interface, and sometimes the more they provide, the less the user actually accepts. It is impossible to covet full screen information. Users are more and more tired of full screen information.

It is critical that users accept the valid information that they receive.

In the design of the interface, because the content and the page are more, in order to ensure the unity of the page and the page, the first need to set the page content four weeks of white leave. After setting the spacing of the page, the corresponding content icon, the picture and so on the arrangement is decided. In this way, you can make the adjusted pages more organized.

Part of the red color is the content. There is usually navigation in the page, so the layout of the content area is computed from the bottom of the navigation.

The interface adds four weeks to the left white. Such an interface is very easy to focus on the user's view to a small number of content up, highlighting the focus, the overall gives an elegant high-level feeling.

Conversely, reduce or leave white, the page will appear richer and more vibrant. And the display space of the picture will increase, the impact feeling enhances, let the interface appear richer more has the tension.

Depending on the content of the page and function points, the appropriate adjustment of the interface around the white is very important. The general picture itself relatively has the artistic conception, may use "the haemorrhage" the way directly, does not leave white or less to leave white.

Here are some of the layout of the small rules, tips.

1. Take its essence, a color can also set the world!

Extract the main information, by adjusting the color of the entire page, so as to improve the layout usage rate. One or more function points as the main information, mentioned in the home page design, from achieving the desired visual effects. In this way, the interface design can not only appear the atmospheric tension, but also show the high degree of information polymerization.

In the absence of image material, how to make the interface appear to have the tension, the overall sense of strong, presented a high layout rate.

Monochrome background white, highlighting the main information. requirements icon or text, relatively concise, can be very good with the background color integration. And then through the lines and rules of the graphic to separate the white area to increase the level of sense.

The prerequisite for doing this is for the designer to be clear about the main information and the relationship between them.

Combined with the product features clever use of large color blocks, the change of information by color. Allows users to perceive the most intuitive changes in information.

2. Multi-color block flexible segmentation, enhance content utilization rate

The picture material is few, but also may use the polychromatic piece to divide, lets the interface appear not so monotonous.

Enhance content usage You can organize page layouts by extending the color block (adjacent or complementary) or by repeating the image. Unified layout of pictures and color blocks, the overall tone can make the page rich. The picture and the same size of the color block can maintain the uniformity and simplicity of the interface, tonal uniformity and continuity of consistency so that the page more overall, so that the page looks like a picture of the same tension. And this way allows the user to feel the click of the area will also increase, so that the operation has become convenient.

3. Composition eclectic, find the most suitable content version rate.

Horizontal and vertical segmentation, so that the interface appears neat, stable, and oblique segmentation makes the interface impact strong sense.

Using different composition methods, interspersed with a small number of pictures in the shape of the composition, can make the interface become active and active. This way of expression can also be the product of the temperament into, incisively and vividly show. A rhythmic design reinforces the typography rate more easily. In the interface design, the graphics and text interspersed can guide the user's view, lets originally simple content become interesting. At the level, can also distinguish between the primary and secondary nature of the content, so that reading more relaxed.

4. Simplify the desktop or the homepage, let the interface closer and more beautiful

Common methods: Icon, increase the size of the copy, serial number, number, etc. to enhance the use of the layout rate to enhance the visibility of the rich.

Icon expression

More and more people agree with the flat, on the one hand because the flat icon looks fresh and concise, users understand fast. On the other hand, with the icon to match the background more simple, or white, or dazzle Jane, as much as possible to reduce the visual interference to users. A good flattened icon is not simply to cut the details, but to highlight the effective information.

Icon is the most direct expression, simple and clear graphics, can let the user through the understanding of the icon quickly find the desired function and demand point. The combination of the icon and the copy effectively reduces the sense of fatigue during reading. Thus the rhythm of the interface content is strengthened. The use of the logo design clear, functional.

The information icon can add color to the product. Interesting icon design can not only be very good to distinguish function points, but also good software features and brand display.

The integration of graphics into the interface, can make the content richer, more distinct levels.

5. Highlight the key copy, adjust the layout rate, so that the information more clearly.

Adjust the text size will adjust the usage rate of the layout, so that the original empty interface content display more full, users read stand more direct. Using a larger font size to enhance page usage can make the page look more informative. Highlight important guide Copy, strengthen the software scene sense and bring into the sense. Quickly guide the user to the function of understanding, so that accurate use.

In the page we can emphasize the focus data or function words to distinguish the level of the interface. Let the user's eyes more focused.

6. Series pictures, let them tell stories, view layout.

This design method is more to show the text in graphics or illustrations. is most common in data pages and boot pages.

A copy of the text of the Guide page more features, giving users a stronger sense of feelings. This design method is also the most easy to embody product characteristics and attract attention. The readability of the pattern is high and can be communicated quickly to the user in a very short time. Using images to tell stories is the most fundamental method of expression in design, and it is also the most popular way to express.

The application of graphs in the interface

Three ways: Pull, boundary relations, incomplete

1. Cut and pull to make the pure color to leave white!

When processing the picture material, often can encounter the picture background clutter, the product not outstanding question. Before designing, we can deal with the material first, and pull out the product directly. In this way, the shape of the product can be found, the clearer the shape reflects the user's perception of the product. The unique performance of the product is quickly and clearly expressed to the user, from the subconscious's first judgment to the product type and usage characteristics.

Here is a cookie site that hooks up the main cookie and makes a hierarchical distinction. In the product introduction of the use of the side of the physical pull map, showing the most authentic cookie thickness. Use the broken down biscuit block to open up the level of the product. The dark background contrasts strongly with the cookie, highlighting the shape of the object directly. Let the user at a glance, a big increase in appetite. thereby increasing the user's desire to buy.

In many electric business app also often use pull a map, remove redundant information, use the shape of products directly reflect the characteristics of different commodities. Such interface users are easy to read and happy.

2. Establish the border, break the boundary, breaking the siege

If you need to display more information, using the method of segmentation, you can make the interface appear neat and clean. And when the information is less, designers can boldly choose "local bleeding" way, establish boundaries, and then break it, increase the level of sense and impact, to highlight the theme.

Be sure to remember that the content is set to make the page look holistic, not just the placement and the puzzle.

In the web design sometimes see this way, in fact, in mobile phones, tablets and other UI design we can completely apply.

Use the picture interspersed to distinguish the background and the product or the image level sense, the processing interface is more vigorous. Amplification needs to highlight the main image, as the first focus on the user's eyes, a strong "face-to-face" feeling.

In the app, the picture will be highlighted, the level of information can be opened, will need to highlight the picture information for the first time to display to the user. On the one hand can facilitate and guide users to click, on the other hand, in the long cascade up and down stream, properly break the balance, you can enrich the rhythm of the page.

In the design of icon We also use the method of breaking the graph. In a uniform rounded rectangle, the graphic that expresses the meaning is partially exceeded, making the icon more space-sense and flexible.

The use of this way to design the icon space feeling strong, a strong sense of level, can make the product image appears more prominent.

In the font is often used in the method of breaking the graph, so that the font more vivid. In the process of breaking words can also lead to different creative points.

Tai Mei Qinghai font Design I broke the number 9 out of the box. In the design of excellent car fonts, I found the car's association through the broken image of the product character, so that the whole font design more appropriate smart.

3. Flush out the picture, only keep the part, let the product be a little bigger!

Sometimes, we get the material, after processing found that the picture is more common, the user at a glance to know what is. This time, you can consider retaining the local way to create incomplete beauty, increase the sense of fashion. Do not underestimate the ability of the user's brain, of course, this program or the customer or Product manager to communicate in a timely manner, incomplete beauty is not all the kinetic energy to accept.

We enlarge the picture to find out the characteristics of the product. Choose to be able to prop up the entire page composition position, remove unnecessary graphics, let the picture out of the picture! After this processing, the page appears to be very full of tension, stimulating users want to see the whole image of the product desire to play a product preheating effect.

In Watch's warm up official website, the designer will enlarge the picture, the spot which has the characteristic to show, has guided the user to watch the product the overall image, has stimulated the user more to understand the product characteristic.

From the layout point of view, the partial amplification cut picture, increased white, increased the layout rate, so that the entire page appears full, macro effect so that users and products more appropriate.

This article mainly straighten out the layout and graphic use of knowledge, not comprehensive, we still take the main appreciation. After reading can have a white, broken picture of the impression is not white look.

Design general direction of things finally ramble about, I know in fact we all know, is not know where to start, the next one to a small direction of practical things, welcome to leave a message.