1 the values

  1. natural
  2. determine

The principle of 2

  1. intimacy
    1. Standard spacing – Intimacy is defined by spacing and spacing can be divided into small spacing, medium spacing, and large spacing
    2. Nonstandard spacing – increase or decrease by basic spacing (8px)
    3. Grid system
  2. alignment
    1. Small text alignment – Title and content alignment
    2. Form alignment – Colon alignment
    3. Number alignment – Decimal point alignment
  3. contrast
    1. Comparison of primary and secondary relationships – strengthen key items/weaken secondary items
    2. Total score Comparison – Displays total score using typography to determine font size
    3. State relation comparison – Static/dynamic comparison
  4. repeat
    1. Repetition of the same elements throughout the interface not only reduces learning costs, but also helps users identify the relationships between these elements.
    2. Repeating elements can be a thick line, a wireframe, a certain same color, design elements, design style, a certain format, spatial relations, etc.
    3. Essentially speaking, it is to maintain the uniformity of design style
  5. directly
    1. Users should be able to interact directly with the elements they see (no new pages or pop-ups)
    2. If legibility is predominant, the edit button should not be too far away
  6. Never leave home
    1. Users should have fewer switching scenarios
    2. Complete the input with the pop-up box
  7. Simplified operation
    1. Real-time visibility tool
    2. Hover now tool
    3. Switch display tool
    4. Increases the click range of the button instead of the visible size of the button
  8. Invitation-user prompt

    1. Static prompt

      Text Invitation – Whiteboard Invitation – Incomplete invitation

    2. Dynamic prompt

      Hover – Extrapolate – more

  9. In a timely manner to reflect
    1. Regularly update
    2. Loading schedule
    3. Feedback mode
    4. Done automatically

3 visual

  1. Color – (System level – Product level)
    1. Brand color
    2. Function of color
    3. Neutral colors
  2. Layout – The beauty of order
    1. Unified Artboard (useless)
    2. Fit (flexible)
    3. grid
  3. The font

    1. font-family: “Chinese Quote”, -apple-system, BlinkMacSystemFont, “Segoe UI”, “PingFang SC”, “Hiragino Sans GB”, “Microsoft YaHei”, “Helvetica Neue”, Helvetica, Arial, sans-serif, “Apple Color Emoji”, “Segoe UI Emoji”, “Segoe UI Symbol”;

    2. Main font and height

      font-size 12px 14px 16px
      line-height 20px 22px 24px

      line-height = font-size+8px

    3. The word weight is usually 400, 500, 600

copy

1. Indicate foothold 2. Simplify statements without prompting the user to know the content 3. Statement consistency 4. Important category tolerance contrast 5. Punctuation - strong contextCopy the code

supplement

Some principles of Zhang Xinxu Da Shen No width principle 20px height principle