How to use the grid system to scientifically create an APP interface? Let’s take a look at the summary of NetEase experts!

NetEase UEDC – He Yuhua: This article will start with an introduction to the basic concepts of the grid system, and gradually explore the necessity of building a grid system, the practical application methods of the grid system, and the problems that may be encountered when using the grid system.

When a visual designer designs an APP, he or she must first develop a set of perfect and feasible design specifications, which will define in detail the elements such as color, text, icons, structure, layout, spacing, etc. However, many designers tend to overlook an important thing, that is, the construction of the grid system. The grid system can be said to be the skeleton of the entire page. It organizes all the design elements on the page efficiently and orderly, so that the design of the entire APP has a high degree of consistency and regularity, improves the work efficiency of designers, and avoids designing based on feelings.

1. What is a grid system?

1. Definition of Grid System

The grid system uses a series of vertical and horizontal reference lines to divide the page into several regular columns or grids, and then uses these grids as a benchmark to control the alignment and proportional relationship between page elements, thereby building a highly orderly page framework. For example: In Google's Material Design, the entire page is regarded as a grid, all page elements are aligned with the grid lines, and this rule is applied throughout the design of the entire product.

2. Origin of the Grid System

As early as the beginning of the 20th century, graphic designers in Germany, the Netherlands, Switzerland and other countries began to advocate the use of objective design principles to arrange text. After World War II, this concept was well developed in Switzerland. It was not until the late 1940s that the first printed works using grids for auxiliary design appeared. The book "Grid Systems in Graphic Design" written by Swiss design master Joseph Müller-Brockmann has been a bestseller since its publication in 1961 and has had a profound impact on the design world.

At present, the grid system has been widely used in magazines, graphic design, web design, and mobile interface design.

2. Why should we learn grid system?

1. Improve team collaboration design efficiency

When multiple designers work together to design an app, a well-thought-out grid system becomes particularly important. Each designer has his or her own design methods and habits. If there is no unified framework to constrain, different designers may give different design solutions when designing similar components or pages, which will make the pages in the entire app more confusing.

For example, in the picture below, designers A and B each follow a set of size specifications to build the page, but the design results give people completely different feelings.

Therefore, having a unified grid system can ensure that designers' output is highly consistent and regular, making collaboration more efficient.

2. Design more rationally

Different from artworks created purely by sensibility, UI design also needs to be rational, objective, and mathematically logical. Skillful use of the grid system can make your design more orderly and rhythmic, display page information more clearly, improve reading efficiency, and provide users with a comfortable experience.

3. Reduce decision-making time

As a group of people with high incidence of obsessive-compulsive disorder, many designers often repeatedly ponder for a better visual effect when dealing with page details, and even worry about whether an icon should be 20px or 24px, which greatly affects the design efficiency. Even if the designs of several pages have achieved satisfactory visual effects, it is very likely that the designs lack uniformity because of the use of different size rules.

Developing a complete grid system can make designers more clear, confident, and efficient in page layout and detail processing. All design behaviors are based on evidence, reducing unnecessary time costs caused by deliberating over details and refusing to design based on random ideas.

3. Basic Elements of Grid System

1. Cell

Earlier we introduced that the grid system is composed of horizontal and vertical lines that divide the page into small square grids. Then this square grid is the most basic element in the grid system, the "cell", which is the yellow area in the picture.

As young people who have received nine years of compulsory education, I believe that everyone has been exposed to the basic knowledge of chemistry in middle school. The smallest unit of matter is the atom, atoms form molecules, molecules form organic matter... We can regard this cell as an atom, then the icons and buttons are molecules, and the entire page is an organic matter composed of countless atoms.

2. Margins

In the APP page, all content will be displayed in the content area in the middle, so the space left between the content area and the left and right ends of the screen is called margin.

The larger the margin value, the looser the page appears, and the smaller the value, the more "full" it appears. Therefore, you need to determine the specific value according to your actual situation. For example, Airbnb's product tone is simple and elegant, and the overall layout is relatively loose, so the margin value is 48px. Another example: NetEase Cloud Music, the page is mainly composed of albums, playlists, etc., focusing on the visual impact of the pictures. Therefore, the proportion of the page content area will be relatively large, and the margin value is 12px.

3. Columns and sinks

The content area of ​​the page consists of N columns and (N-1) gutters. In web design, the value of N is usually 12, 16, or 24, but in mobile design, the number of columns should not be too many, because the width of the mobile phone screen is limited. The more columns there are, the more "fragmented" the page will be, and the more difficult it will be to control during page design.

The effect of the gutter width value on the page is similar to that of the margin, that is, the larger the value, the looser the page, and vice versa. For example, Airbnb chooses 24px, while NetEase Cloud Music chooses 6px.

4. Horizontal spacing

In magazine design and layout, the baseline system is often used, that is, there are reference lines with equal spacing in the horizontal direction to standardize the rhythm relationship between text and pictures in the horizontal direction. However, the size of graphic layout is relatively fixed, but the screen width and element component height of mobile terminals are uncertain, so this baseline system cannot be directly copied and needs to be used according to the situation.

In a text paragraph, the horizontal spacing can use the baseline system to standardize the rhythm of the text in the horizontal direction. This situation often occurs in the main text page of reading products. The baseline spacing value is determined according to the actual situation of the product. For example, in the figure below, the baseline spacing is set to 4px, and the font size and line spacing are both integer multiples of 4px, so each line of text will be accurately pressed on the baseline, ensuring the consistency of the visual rhythm.

The horizontal spacing between components is consistent with the vertical spacing, that is, a series of values ​​that are integer multiples of the minimum cell are used to regulate the rhythm of the components in the horizontal direction. For example, if the minimum cell in the figure below is set to 8px, then the horizontal spacing values ​​will be 8px, 16px, 24px, 32px, etc.

4. How to use the grid system in APP design?

Step 1: Define the smallest cell

For the value of the minimum cell, most apps will choose an even number in the range of 4-10. So which value is the most appropriate?

This needs to be considered from two aspects:

• On the one hand, whether the value can be divided by the width of most mobile phone screens, that is, wide applicability;
• On the other hand, whether it has a certain degree of flexibility in specific use.

In terms of applicability, the four values ​​4, 6, 8, and 10 are basically sufficient. In terms of flexibility, 4px performs best, but the page will be divided into very small pieces, which is difficult to control during design.

Therefore, we need to choose the appropriate value according to the actual situation of the APP. 4px or 6px cells are more suitable for products with more page content information and more complex layout, such as Taobao, Koala and other e-commerce apps; and 8px cells can meet general design scenarios very well, and are more suitable for most APP products, so they are more recommended.

Step 2: Determine the incremental relationship of component spacing

Now that the minimum cell value is determined, all the spacing (including gutters, margins, horizontal spacing, etc.) and component sizes on the page need to be integer multiples of the minimum unit to achieve a unified visual rhythm. For example, if the cell is selected as 8px, then all the spacing sizes used will be 8px, 16px, 24px, 32px, 40px...

Step 3: Determine the number of columns

When we design APP pages, the most commonly used layout method is equal division layout, that is, the page content area is divided into N equal parts, and the width of each part is adaptively adjusted according to the screen width. So from this perspective, think about how many columns the page grid should be set to in order to meet the needs of various equal division layouts to the greatest extent.

The following lists several typical cases (4 columns, 10 columns, 16 columns, etc., if you are interested, you can try them yourself, I won't list them one by one here), we found that 12 columns and 24 columns can meet all the conditions except 5 equal divisions, and 6 columns are slightly worse, that is, the result is: 12 columns = 24 columns > 6 columns > 8 columns. However, 24 columns obviously divide the limited mobile phone screen too much, so in actual use, 12 columns and 6 columns are still the main ones.

Step 4: Sketch layout setup

By using Sketch's layout setting function, you can quickly build a reference layout for the grid system. In the usual design process, you can often use the Ctrl+L shortcut key to switch the layout display to improve design efficiency.

There are a few other points to note:

• Total width = total screen width - margin x2;
• offset = margin;
• Uncheck "Binding line outside".

Step 5: Practical design application

Here we take the homepage of NetEase Comics APP as an example and use the 8px, 12-column grid system to perform a design practice.

In the early stage of homepage design, there was no complete grid system for standardization. The spacing between components was basically 10px, 20px, and 30px. There was no inherent positional relationship between the layout modules, the visual rhythm was not smooth, and the style was not unified.

In the two pages below, most of the elements do not fit the grid, the layout is irregular, and there is no objective reference.

Now we start to use the 8px, 12-column grid system to optimize the layout of the homepage. In the following three pictures, we can see that the top icon, entry icon, vertical cover and horizontal cover are all connected by the grid system as a whole. They are no longer messy and independent individuals, and are smoother to read. The horizontal spacing also starts to use integer multiples of 8px, giving users a more rhythmic browsing experience.

5. What issues should be paid attention to when using the grid system?

1. Don’t use a rigid grid system

Not every element has to be aligned to the grid. It depends on your actual needs. If you force it, the page will look weird. The three tab titles on the left page want to be aligned with the cover on the grid, but the distance between the titles is too large, which looks uncomfortable.

The spacing between the three tab titles here is a fixed value and does not need to be adapted according to the screen width. Therefore, the three tab titles should be considered as a whole, that is, a tab component, and the left end of the component should fit the grid.

2. What if the grid cannot be divided evenly?

Let's take this picture as an example. When people are making designs, the most commonly used canvas size may be 750*1334px for iPhone6/7/8. Some students will find that at this size, if 8px is used as the minimum cell, the canvas cannot be divided evenly - that is, after removing all margins and gutters at a width of 750px, the width of each red column is actually 42.5px.

Then everyone will have a question: In this case, does the grid system mean it can't be used?

In fact, this is normal, because no grid system can be divided evenly at any screen resolution. And the same 8px cell cannot be divided evenly on a 750px phone, but it is completely fine on a 720px phone.

For example, in the following image, the blue values ​​representing margins and gutters are fixed values ​​that we need to provide to developers, while the red values ​​are calculated based on the actual width of the screen. Therefore, we only need to ensure that the values ​​provided to developers follow the rules of the grid system. As for the values ​​calculated on the page, the 0.5px deviation is not noticeable to the naked eye.

Summarize

The grid system is a powerful auxiliary tool for visual designers. It can guide us to create APP interfaces in a more scientific way, so that the page layout is standardized and orderly, the rhythm is unified, and the designer's efficiency is doubled.

However, as mentioned in the article, there are many types of grid parameters, so you need to build a grid system that suits you and matches the product's tone based on your own situation.