Four principles of interface design

order

As a front-end developer , Although the pages in daily work are made of UI The staff drew it first , But I feel it is necessary to learn the knowledge of interface design . So I took a look 《 The non-designer's design book 》, I did some simple learning about page design .

Four basic design principles

stay 《 The non-designer's design book 》 in , The most important part should be the four basic principles

Namely ：

• contrast

• repeat

• alignment

• Intimacy

Here are four basic principles （ These principles can also be seen literally ）

contrast

In the page , If you want to enhance the visual effect , It can often increase the contrast between different elements , It is also the most effective way to establish an organized hierarchy between different elements .

repeat

The principle of repetition does not mean that all elements are single and unchanged , But some aspects are necessary repetition in the whole work , For example, the font of text , Thickness of line , Symbols of items, etc , These are basically recurring elements .

For example, the labels of websites are basically the same

alignment

A nice page , Often the structure is very neat , The arrangement of each element usually follows a certain law of alignment .

No element can be placed anywhere on the page , Each item should have some visual connection with some content on the page .  The principle of alignment is that you can't leave elements at random when there is just space on the page

throw

There? .

Align center

Center alignment is

beginner

The most common alignment , This alignment looks safe , It also feels very comfortable . Centering creates a more formal look , This appearance looks regular . 

But it's usually boring to align in the middle

.

full-justified

The alignment of both ends requires

Try to avoid

, Unless the line is long enough , Otherwise, there will be ugly gaps between words

Generally speaking, page design basically follows the left alignment and center alignment

The third line of text in the following picture is aligned , But it's not beautiful at all , Writing css You can use text-align Set it up

Alignment principle

Intimacy

In interface design , Some elements are relevant , They can relate to each other , At this time, the physical positions of these elements tend to be close to each other , Let them form a module , Related items become an integrated group .

Interfaces with good intimacy are often organized . Intimacy allows users to see the classification of the interface at a glance , Instead of searching one by one for a long time .

Example 1： Mother child intimacy

Example 2： Species intimacy

The principle of intimacy

In normal code development , You will also find that these principles apply equally