Whitespace First
When you need to separate two blocks, first try pulling them apart. Only when distance isn't enough should you reach for a line.
What you'll run into
- 页面上框套着框，线比内容还多
- 每加一个模块就给它加个卡片，最后满屏都是卡片
- AI 生成的界面每两行之间都有一条分割线
Dividers and borders are "drawn separation"; spacing is "given separation." Both achieve the same effect, but the former adds visual elements and the latter doesn't. If grouping can be expressed either way, why draw a pile of extra lines?
More importantly, lines lose power when overused. Once every module on the page has a border, the border no longer signals "this is a group"—it's just background noise.
When you still need lines
| 情况 | 为什么这时候要线 |
|---|---|
| 表格的行与行 | 需要横向对照，线帮眼睛保持在同一行上 |
| 空间不够拉开距离 | 移动端一屏内容多，没有足够空间做间距 |
| 需要明确的可点边界 | 输入框、按钮，用户要知道点哪儿 |
| 内容浮在别的内容上 | 弹窗、抽屉、下拉菜单，需要跟底下的内容分开 |
| 并列的多个卡片 | 数量多且要区分彼此时，边框比间距更省地方 |
How to separate with whitespace
- 8 within a group, 24 between groups. A 3x ratio is a safe starting point. Elements in the same group sit tight; different groups get pulled apart (see One Spacing Scale).
- A heading sits close to its own body text and far from the group above. Get this wrong and the grouping gets read in reverse.
- Delete first, then add. When a screen is done, try removing every border and divider and see if you can still read the structure. Where you can't, add them back — usually you'll find you only need about thirty percent.
- Give large sections enough room. On desktop, 40 to 64px isn't excessive. A page feels cramped usually not because there's too much content, but because there isn't enough whitespace.
Whitespace isn't empty space doing nothing—it expresses relationships. A block of blank tells the user "this ends here, what follows is a new section." That message is itself content.