Basic Layout

In order to reduce the cost of communication and understanding as much as possible, it is necessary to unify the size of the design board. The size of the design board is 375px in width (1 :1 picture).

When laying out the interface information, we should leave at least a 16px space between the left and right for the content area, and limit the width of the content for best readability.

1.png

Spacing

Follow the principle of using 4px as the minimum unit, and the spacing between elements and the height of the elements are guaranteed to be multiples of 4.
Several commonly used spacing combinations are listed below, and the information levels are divided by the four specifications of “W1”, “W2”, “W3” and “W4”. (Ps: In the case where these specifications are not applicable, the information level can be expanded by adding or subtracting multiples of the “basic spacing”, or adding elements.)

image.png