UI Design Tutorial-Interface Design composition

Nine Gongge composition, center point radial composition, triangular composition, SF-shaped composition.

1. Nine Lattice grid composition

This layout is mainly used in the classification of the first level of the page, play the role of functional classification.

Usually in the interface design, we will use the grid in the interface layout, according to the horizontal and vertical direction of the formation of the auxiliary line, the design will be very smooth. In the interface design, nine Gongge This kind of composition is more normative and commonly used, the user is very convenient in the use process, the application function will appear exceptionally clear and prominent.

Nine Gongge to users at a glance, the ease of operation is the most important advantage of this composition method.

Nine Gongge seemingly simple and casual, with good can also show a wonderful effect.

Flexible use of the nine Gongge Auxiliary line separated by the block. in a regular design method to find a breakthrough, do design must pay attention to this point!

When allocating nine blocks, do not need a lattice corresponding to a content, can be a pair of two, one-to-many, break the average division of the box, add white, adjust the rhythm of the page, or highlight the function points or ads. The different forms of each block, the effect of the page will also produce countless changes.

We can see that this layout, the same can make the interface very flexible, simple content, information clear.

2. Center Point Radial composition

Life, the most common is the round, the eyes are round, the sun is round, the bowl is round, the sky is round. In the interface design, the use of the circle is the finishing touch of the pen.

Circle is a center, in the interface, often through the construction of a large circle to play a focus, highlighting the role.

The composition of the radial has the effect of highlighting the middle content or function point. When emphasizing the core function point, you can try to arrange the function in a circular pattern to the middle, centering on the current main function point, and arranging the other buttons or content.

We set the main function in the layout of the position, you can guide the user's line of sight to focus on the function points to be highlighted, even if the line of sight is not in the middle position, but also to guide users back to the center of the gathering place.

In the interface design, the use of the circle can make the interface appear particularly vivid, most operable buttons or interactive animation can see the shape of the circle.

Because the circle is smart, active, interesting, cute, changeable characteristics . In the interface design is good at the round design and animation combination, can make the whole software live up.

And the animation that revolves around it will make the whole software live. The circle in the interface can focus the user's sight, guide the click Operation, highlight the main function point or data, and show the product core.

The center point radial design, will make the software feel more intelligent, inclusive Vientiane.

If the function point to be reflected is very simple, only a few function buttons, you can try this large-circle display design, highlight the most important functions, and then list and discharge other functional points. This is a very practical way to draw the most important data, just like the focus of the drawing. Good at using large circle composition, can prop up the whole picture, let the interface mellow and full.

3. Triangular composition

This type of composition is mainly used in the layout of text and icons, so that the interface to maintain a balanced and stable. The triangular composition from top to bottom can make the information hierarchy more structured and clear.

In the interface, most of the triangular composition is pictured on the top, the words in the next, reading more comfortable, there is a description of the focus.

Gogobot landing page in the design of the logo as a graphic part, the input box is the core description of the product.

Personal Information page Compare common triangle composition. Avatar clear the content of this page, and the following fans, like data is a description of me and introduction.

In the design of child defender Baby Information Settings page when the use of triangular composition and the combination of circular composition. The weight scale can be made into sliding operation, and the cartoon image to highlight the set of objects and the function of this page.

4. The law of composition in the interface of sight (SF-shaped composition)

In the design practice, how to guide the reader's sight is important to enhance the user experience. Good composition of the line of sight rule, can get a very comfortable reading experience. and disorganized composition, often let the user tired.

In the interface design, the user's visual movement of the direction of the preset is very important. By adding a smoother composition design to the interface to guide the user's eye-moving elements, the user will be able to see more of the product's core and product selling points.

The trajectory of the line of sight flow is from the top to the bottom from left to right, if not around such a line of sight of the layout, the user will become very difficult to read, can not find the focus, so that users become disgusted. Therefore, in the interface design especially need to pay attention to this place. Now the interface is generally sliding up and down, good line of sight guidance, can greatly reduce the burden of users and reading fatigue.

The most basic of the interface is the S-shaped line of sight composition

How to use the S-shaped line of sight composition in the interface?

S-shaped line of sight we all understand, the key is how to use a good s-shaped line of sight to seize the user's eyeballs.

First of all, we look at the trajectory of the line of sight, the visual trajectory at the corner of the most dense, browsing more focused on the place of the switch, the point of view to stay the longest time. So we should put the important products or features to be put in this piece, so it is easier for users to remember the selling point of the product.

Apple's official website has adopted the S-shaped line of sight composition, guide reading, we can get a good experience from the Apple official website. The graphics of each module are interspersed and can help to retrace the line of sight. Product map more let the user to memory, design guide consumption!

In addition, in order to help the direction of sight movement, the image processing is also very fastidious.

In the introduction of ipod Touch, the first image unfolded with a triangular composition, enhancing the indication of the guided line of sight. At the same time, a number of pictures with the mobile phone alignment direction to the line of sight trajectory, a good implementation of the picture-text-image between the switch, the user into the entire product screen.

The first screen mobile phone deployment direction and line of sight consistent

In order to enable users to read more advanced, in the picture level and space, we also need to pay attention to the user's line of sight effect, the focus of adjustment to a reasonable point of view, the product of the positive direction of the source points of sight. These adjustments can not only make reading smooth, but also enhance the balance of the interface.

Compared to the left and right composition, the S-shape composition in the top and bottom scrolling page advantage is very obvious. Left and right composition is easy to give people fatigue, and the S-shape will be the picture and text perfect combination, with a large number of white, as the mountain streams, give people a brisk and smooth feeling.

Interface, the designer is very good use of the S line of sight-shaped composition, enhance the sense of insertion and agility. The character's information is interspersed with the layout, and the avatar becomes the turning point of the line of sight, making the typesetting of this double-row mode more rhythmic. and specific to each part, Avatar and content using a triangular composition, the content of the paragraph used to describe the text center, the picture is stable, harmonious.

The S-shaped composition is also often applied to the guide page. Graphics and text interspersed layout, such a sense of composition level, dynamic full!

By the layout of graphic layout, we can also evolve the F-shaped composition, this type of composition is mostly used in graphics and text around the picture and banner, using F-shaped composition can make graphics and text with more tension, more atmosphere, product information is more simple and clear.

In the law of F-shape composition, the main diagram is the backbone of F, the right two lines (or two parts) of the text as a supplement, to pay attention to the reasonable distribution of pictures and the proportion of text.

The F-shaped composition is used in the banner to make the title more prominent and the theme more attractive.

It is important to take advantage of the directivity of the main picture. For example, the main figure is a character, you can put the text in its eyes, direction, gestures and other corresponding directions, strengthen the line of sight guidance. If it is a product diagram, it can be guided by the direction of the product. In doing so, users can focus on the text information as quickly as possible, enhancing their awareness and purchasing degree.

Summary: This lesson has no actual combat skills, more is to guide everyone to learn to appreciate, learn to use basic design principles to describe their work, rather than simply throw down a "people design really good" on the end, to understand the truth, and strive for their own use.

UI Design Tutorial-Interface Design composition