How to fix the composition of interface design (turn)

It's a good design! "But where is the good, but can not say it." This is a big obstacle to your being a good designer. Design is our bank, do not use the design language to deconstruct the picture, is not justified.

With the development of mobile internet design, many traditional design laws can be followed and new challenges are presented. Because the handheld device screen is small, how to present or guide the effective information in the limited page, does not appear messy and bloated, test the designer's ability.

Why is there a theme or app interface that is so comfortable, so fresh, then have feelings? It contains some of the most basic layout design concepts, let us comb a comb, for the first into the UI design of the students to make a reference.

Want to become a qualified UI designer, the light will draw icons can not, today 360 @micu design small brother to help you fill in the layout of this lesson, share his interface composition kick, in addition, you can learn how to use the design language to deconstruct the screen, this is the necessary professional ability of the designer!

Today, we'll talk about composition.

Composition Layout Kick

Question one: Why do you want to speak layout design? Is it necessary?

Just as I have just entered the UI design failure experience as a guide, at that time, a need to start the design immediately, no matter what layout, the result is always very awkward design scheme, appear particularly disorderly, often buckle on the "style is not unified" " User Experience poor" hat. At first I was also unable to persuade myself that others did not understand their work. Now think about the problems that really existed. UI design is bound to be inseparable from the designer's imagination, but it is to face the mass market, so that only the world can understand the orphan of what is the meaning of the UI in the " user Experience" also reflected in where? This design, in turn, hinders your design career, and long-term failure design can easily lead to frustration and numbness.

Especially as a first-line UI designer, it is necessary to learn some layout design ideas. The so-called innovation, still need to understand the existing good design based on the foundation, this is not to let you mechanically, is to let you stand on the shoulders of the predecessors to see farther.

Question two: Why do we need to compose the composition at the beginning?

Design and painting, the needs and content of the analysis, the use of appropriate composition can be simplified, improve design efficiency. After trying to compare multiple compositions, the designer's ideas will be clearer. The time spent in the lowest cost, can be repeatedly adjusted until the most appropriate composition to find the way down to refine, add elements, enrich the picture.

A project gives designers a limited amount of time, and our core focus is on figuring out the core features and selling points of the product, highlighting them and ultimately making the user feel more comfortable. And the clutter piled up will be very bad, even sometimes, users can not find what they want to lose immediately, leaving a very bad impression. Through the early composition, you can save time and make the design more organized.

Question three: Does composition limit the creativity of design?

Not at all.

The pain of design is "no thought" and "rambling", both of which are due to insufficient demand analysis, but also with the prior not to do a good job of composition. The composition provides a clear direction for the design, even through different composition can produce interactive effects, to achieve unexpected results. the problem of limiting creativity don't worry because the composition is just a frame, and the same type of composition can make a different style entirely. Although the design composition structure is the same, but the design of the expression and elements are different, can still shape a different design bright. The flexibility to use composition and layout allows you to focus your design on elements and product features.

Needless to say, below I will introduce you to the following several commonly used in the interface composition method:

1. Nine the composition of the lattice

2. Center Point Radial composition

3. Triangular composition

4. SF-Shaped composition

One or 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.

Second, the 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.

Three or three angle shape 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.

The law of composition of sight in the interface (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. The composition of the first point here, of course, the layout is not only refers to the composition, there are many things to say, there is time for me to organize to everyone.

Do design to develop professional sensitivity, used to deconstruct the design language to see the picture.

Thank you for your reading, the resources of this article belong to the original author, only for study of HA.

How to fix the composition of interface design (turn)