As a front-end developer, there are no closer partners than the UI and the back end. In order to make the boat of friendship not just turn over, I have summarized a few solutions. As a front-end developer, the goal is to make the product usable, easy to use, user-friendly, and visually stunning. To the essence of the design, faster understanding digestion, rapid development, reach a consensus. But what happens in general? This is not knowing why.

1. Basic design specifications

Comparing the two pictures, can you find anything better in Picture 2 than in picture 1? Here are four basic principles that designers follow

  • Contrast

  • Repetition

  • Alignment

  • Proximity

How do you understand that? I’m going to give you four pictures

‘Contrast can enhance the visual effect, avoid the comparison of similar colors, avoid the above font comparison in 2

Repetition enhances visuals and avoids too much repetition of one element

Alignment enhances visuals and avoids too much repetition of one element

Intimacy enables organization and avoids multiple isolated elements

2. Common design specifications

  • Font:

1. The font sizes are 10px, 12px, 14px, 16px, 18px… . Equal even value. Titles are usually 14px in Chinese and 12 in English. In Chinese, ‘Microsoft Yahei’ and ‘Huawenxihei’ are generally used; in English, ‘Tahoma’ and ‘Arial’ are commonly used, such as Millet: “Helvetica Neue”,Helvetica,Arial,”Microsoft Yahei”,”Hiragino Sans GB”,”Heiti SC”,”WenQuanYiMicro Hei”,sans-serif; Tahoma, Arial,’Hiragino Sans GB’,’ 5b8B4F53 ‘, Sans-Serif;

  • High line:



    Font Size (PX) * 0.2 + Font size (PX) = appropriate line spacing (PX)Copy the code

  • The color

1, color matching requirements: main color + emphasis color + auxiliary color 2, unified color: yellow for safety color, blue for high-tech, green for environmental protection. 3, color contrast: light background use dark text, dark background use light text. 4, unified page, not easy to use 3 above the color 5, interactive button, use three states

  • Picture naming

1, the first part is the logical classification of the picture 2, the second part is the performance of the picture 3, the third part is the type of the content of the picture (some pictures will also have the fourth part, indicating the state of the picture performance). 4. Tabbar_home_icon, [email protected], tabbar_categories_icon

3. Improve user experience

  • Use animation wisely

1. Loading can make users less bored. 2. Use transitions to make it clear what happens between the beginning and the end of the user. 3, animation can enhance the sense of direct control 4, the use of animation feedback to highlight the error reference segmentfault.com/a/11…

Know these rules, can quickly know the meaning of designers want to express, and hope to help you, follow these rules, the boat of friendship is bound to ride the wind and waves, straight to the sea.

Welcome to communicate with github account