Super practical! Layout design principles in mobile interfaces

In fact, design itself is a rational subject. Aesthetics vary from person to person. Only reasonable designs can convince others. When designers get the prototype of a product and start designing, if they simply follow the prototype without considering any rules, then in many cases some inconsistent results will be produced. After the design is completed, the product is not satisfactory, and the designer is not satisfied either.

There are actually a lot of layout design principles in UI design. If both the product and the design have a certain understanding of layout design, then when the designer gets the prototype and reviews the design output, everyone can better understand each other's design. Below I have summarized several common layout design principles, which are the prerequisites for creating good visual effects in work.

1. Arrangement of information

When arranging any information, the first thing you must master is alignment/repetition/intimacy/contrast, the four principles that run through design.

In addition to creating a clear and sophisticated appearance, alignment also facilitates development implementation. Based on the reading habit from top left to bottom right, the layout of content in mobile interfaces usually uses left alignment and center alignment, and the input items of form filling use right alignment.

Design, like doing other things, should also distinguish between the important and the urgent. Don't let users find the key points/places that need attention. Let users smoothly receive the important information we want to convey. Repetition and contrast are a combination of punches. Repeating the visual elements in the design throughout the design can not only increase the orderliness but also strengthen the unity, and reduce the difficulty of user cognition. Then when it is necessary to highlight the key points, you can use contrast techniques, such as different sizes of pictures or different colors to express emphasis, so that users can intuitively feel the most important information.

When laying out complex information, the readability of the text will decrease if it is not laid out in a regular pattern. Organizing information can be done by grouping related information together in close proximity. If multiple items are in close proximity to each other, they become a visual unit rather than multiple isolated elements. This helps reduce clutter and provides a clear structure for the reader.

When designing expressions, you must consider the readability of the content. Appropriate use of graphics can increase readability and design sense, and graphics are more efficient to understand than text. Those descriptions that seem lengthy when expressed in text will become concise and clear once they are replaced with visual expressions. Visual graphics can present relatively rigid content such as descriptions/titles/values ​​in a softer way.

2. Use of images

After the page structure and text of the App are determined, it is time to start arranging icons/buttons/pictures. At this time, the page is adjusted from a "reading" structure of pure text to a "viewing" structure, which will have a huge impact on the readability of the page and the overall effect of the page. The ratio of pictures in the page is called the image rate. Usually, lowering the image rate will give people a sense of tranquility, elegance, and high-end. Increasing the image rate will be full of vitality and make the picture have an infectious effect.

In practice, it is also related to the elements/colors/emotions expressed in the selected pictures. The right pictures can also exude the temperament of the entire application and directly convey different feelings such as "high-end", "popular", and "friendly".

If the content is relatively small but you want to increase the layout rate, you can use some color blocks, or abstractly simulate the effects of real objects, such as movie tickets, book papers, coupons, notes, etc., to make the interface more friendly and reduce the sense of emptiness. This method can also change the visual experience presented by the page, but this method can only change the color/texture of the page, and cannot change the proportion of "reading" content. This is something that needs to be noted.

3. Use of Color

It should be common sense that different colors can bring different feelings to users. In the mobile interface, it is usually necessary to select the main color, standard color, and highlight color. The mobile terminal is slightly different from the web terminal. Although the main color determines the style of the picture, it is often not used in a large area. It usually appears in places such as navigation bars/partial buttons/icons/special pages, which will have the effect of highlighting and setting the tone. A unified main color can also allow users to find a sense of belonging to the brand, such as NetEase Red/Tencent Blue/JD Red/Ali Orange, etc. Standard color refers to the color specifications of the entire mobile interface, which determines the color of text/line segments/icons/backgrounds, etc. The highlight color is usually used in places such as title text/buttons/icons, usually to emphasize and guide reading.

There may be more than one main color to choose from, and the finishing color is usually composed of two or three colors. The standard color is a set of standard groups from strong to weak. So there are different methods for choosing between the finishing color and the main color, and between the main colors. The first is the adjacent color matching (adjacent colors on the color wheel). This method is more commonly used because the hue transition is soft and very natural.

The second type is the same color scheme (same hue, different saturation), where the main color and the accent color are both in the same hue, giving users a consistent feeling.

The third type is bright color matching. The main color uses a relatively calm color, and the highlight color uses a bright color to drive the atmosphere of the page and emphasize the key points.

The fourth is neutral color matching, using some neutral colors as the base tone to weaken interference. This method is the most common method on mobile terminals.

There are also some other methods such as gradient, light and dark contrast, and multi-color matching that are not explained here one by one, you can feel it for yourself.

4. The art of leaving blank space

Not only text and pictures need to be designed, white space is also an essential factor in page layout. All white space is "purposeful white space" with a clear purpose to control the spatial composition of the page.

There are several common techniques. The first is to reduce the burden of the page on users by leaving blank space.

The first screen is very important for an app, so some more complex apps have a lot of entrances. If you add too much content without restraint, it will give people a feeling of narrowness and give users a strong sense of oppression. So too many elements are sometimes not a good thing. White space can make the page feel more spacious and the sight more open. White space can reduce the sense of oppression of the page and put users into a relaxed atmosphere.

Secondly, leave blank space to distinguish the existence of elements and weaken the barriers between elements.

Elements that are related but need to be distinguished, such as form items, buttons, and paragraphs, can be easily visually identified by leaving blank space, while also giving users a clean and tidy feeling.

Third, leave blank space to highlight the key points of expression. “Design involves the control of differences.

Repeating the same work over and over again taught me that it is important to limit the differences and keep only the most critical ones. "This sentence comes from Takuya Hara's book "White". Limiting the differences in the page by leaving white space is the simplest and most natural way of expression to make the content stand out. Reducing the elements and cluttered colors on the page allows users to quickly focus on the product itself. This method is widely used in e-commerce applications.

Fourth, the blank space gives different changes to the page composition. There should be a sense of rhythm in the layout design, which is what I have always emphasized.

Traditional magazines give different visual experiences on each page. I think the sections in apps can also highlight their individuality or characteristics. White space can give the page a sense of importance and create a different visual atmosphere. By changing the layout with white space and combining the four principles, different effects can be produced.

It is worth noting that leaving blank space does not necessarily mean filling the interface with white, but rather creating a sense of space and distance, a natural and comfortable state.

5. Flexible application of visual psychology

When looking at things, we often have some different visual psychology. For example, if two squares and a circle of equal width are placed together, you will definitely feel that the square is wider. In the layout design, these scientific visual methods are also widely used to guide users visually, and designers can also quickly find some layout methods.

(via Layout Design Principles)

First of all, the most common method is to flexibly use the golden ratio. The interval between text and line segments, the aspect ratio of pictures, etc. can all be quickly set through the golden ratio. For example, the height of the full column can be set.

In interface layout, rounded corners and circles are often easier to accept and more friendly than right angles.

Right angles are usually used in places where a more comprehensive display is needed, such as user photos, record covers, artwork, product displays, etc. Rounded corners will have a better effect in personal feeds or avatars, section styles, etc.

In the layout of the global page, we should also avoid monotony and add a sense of rhythm.

I also mentioned above that the layout should be prioritized so that users will not feel lengthy or boring during the viewing process.

Pictures also have different tones, which can be controlled through masking.

Choosing brighter tones can reduce the sense of oppression on users, while choosing darker tones can make the entire picture more stable and the content displayed more clearly.

6. Design without design

The last paragraph is not about the principle of layout design, but more like a design state of mind.

When ancient people wrote poems, they used a technique called plain drawing. Takuya Hara also emphasized that "the most beautiful design is nothingness". In interface design, he also pursued a state of "making users feel no design". Every line/every line of text/every button has its reason for existence. It does not add meaningless decoration, does not need to be accompanied by the village and set off, so that users can pay more attention to the main body of the content and weaken the visual cognition. Even when users see a button or a line of text while sliding, they feel that this is a matter of course. "There is no Bodhi tree, and a mirror is not a stand." Designing is like being a person. All things are like dreams and bubbles. Don't pay attention to form to see your heart and nature.

The examples in the picture are not so natural in some places, but I think the above examples are moving towards the direction of "making users unaware of the design". There is no perfect design, only striving to make it better. Finally, it takes time to do a good design, and it takes time to understand design. I hope you are good at discovering beauty and understanding beauty.