The application of layout in mobile interface

I. Preface

With the development of information and technology, mobile screen more and more, the interface began to load more and more information, complicated interface decoration details, so that the interface appears more and more bloated, people began to pay more attention to the interface content and function, the information framework shows a flat trend, in the design style, designers are no longer pursuing 3d, The design of materialization, but more and more advocating flat, simple design concept.

The composition of the layout is the bridge of information dissemination, play the layout elements of their respective characteristics and functions, will make the entire layout from the visual to the content of the perfect and beautiful, thus faster and more accurate transmission of information, so the layout design has been widely used in advertising, posters, magazines and other graphic design. Although in the mobile application is based on the user's operation and the use experience primarily, but with the flattening trend, we no longer through the delicate texture and lighting to enhance the quality of the interface, open the level of the interface, that we rely on what to attract our users, for users to create a good reading and use experience?

　　Second, the application of layout design in Mobile interface

Layout design of the common layout of 13 kinds: Bone type, full version, upper and lower split type, left-right split, middle axis, curve, tilt, symmetry, center of gravity type, triangular, and set type, free type, Four Corners type. These layouts are widely used in graphic design, and the most important difference between mobile interface design and graphic design lies in its functionality, maneuverability and interactivity, and the choice of layout is based on the features of product, target users and usage scenes.

The mobile interface can be divided into two categories according to its product function: The information display type interface and the function operation type interface.

1. Information Display Type interface

Our common interface for reading and delivering information is: news, weather, reading, shopping, music, recipes, health, some of the app's interfaces, and the Novice boot page is also the more common message-driven page. And these apps are based on their different features, the interface plate also has its own characteristics.

1) Guided by the main navigation

Browse-oriented interface in the layout will have a clear main line, and in the common layout of the upper and lower split type, left-right split, central axis, curve-type layout in the text of the typesetting on the user will have a potential guide, so the application is more extensive.

The following two pictures, although they are different scenes and functions, but are used in the axis-type layout, that is, pictures and text in the vertical direction, guide users from the top down, the structure of a very clear level.

2) to the main brand transfer

For the brand-oriented interface, more suitable for the use of full version, center of gravity, free type, such as layout style.

Full version of the picture is filled with the entire layout, visual effects intuitive and strong. The following two interface is a full version of the layout, using Full-screen picture and concise copy of the product to convey the temperament and ideas, while giving a generous, stretching feeling.

3) To improve the browsing efficiency of the main

For the focus on improving browsing efficiency of the main interface, usually the interface contains a large amount of information, how to quickly and accurately convey the message to the user, to avoid the use of irritability and trouble?

This kind of application is more typical of news, information and library and other app interface, we can draw on the design of bone-shaped plate, bone type is a normative, rational segmentation method, in the magazine typesetting our common skeleton: Vertical banner, two columns, three columns, four columns and so on. Through the mixed arrangement of pictures and texts presents a rational and rigorous feeling, in the transmission of information more quickly and clearly.

The left image below is a news app that uses a vertical column layout, and the modular structure makes the information display neat and rigorous. The right image is a picture display app, it uses the layout of three columns, the picture in the form of this waterfall to show the user, user-friendly quick browsing. But because of the lateral information, it is difficult to distinguish between primary and secondary, and the sight of people is difficult to focus at the same time on two or more than two things, so through the wrong way to arrange the picture, making the screen more lively.

4) Information display as the main

Information display-oriented interface, more common with records, weather classes and other apps, this kind of app interface more emphasis on the intuitive nature of information. In this type of app application of more layout has full version, up and down segmentation, left and right split, central axis, symmetrical type, free type and so on.

The following two illustrations are based on the presentation of information, but because of the information of the interface and the influence of the function of the app, the information of the moving record interface of the left graph is compared with the middle axis layout, while the weather app information of the right graph is relatively large, and the full version layout is adopted. A reasonable layout choice plays an important role in the presentation of information.

2. Function-operated interface

The main interface of functional operation is to guide user operation, so the common layout mainly has upper and lower split type, right and left split type, middle axis type and so on.

The left image below is a registration page that uses a btn composition and clearly shows the action items and the registration process. The right figure uses the upper and lower sections of the layout, the above for the picture display, the following section for options and operations, the structure is very clear.

Third, the conclusion

In the flat trend, many products also borrowed from the magazine typesetting some of the ways to bring users a good reading and use experience. In the above example, I just listed some of the more typical and interesting layout, but for the different functions of the app, choose the appropriate format composition type, bold combination of plate design some of the classic form, perhaps for our design to expand new ideas.