留白优先 | 设计界面 | 做产品
留白优先
需要把两块内容分开时，先试着拉开距离。距离不够用了，再考虑加线。
你会遇到的现象
-
页面上框套着框，线比内容还多
-
每加一个模块就给它加个卡片，最后满屏都是卡片
-
AI 生成的界面每两行之间都有一条分割线
分割线和边框是「画出来的分隔」，间距是「让出来的分隔」。两者效果一样，但前者增加视觉元素，后者不增加。同样能表达分组，为什么要多画一堆线。
更重要的是，线用多了会失效。当页面上每个模块都有边框，边框就不再传递「这是一组」的信息，只是背景噪音。
什么时候还是要线
情况为什么这时候要线 表格的行与行需要横向对照，线帮眼睛保持在同一行上 空间不够拉开距离移动端一屏内容多，没有足够空间做间距 需要明确的可点边界输入框、按钮，用户要知道点哪儿 内容浮在别的内容上弹窗、抽屉、下拉菜单，需要跟底下的内容分开 并列的多个卡片数量多且要区分彼此时，边框比间距更省地方
用线的时候把它做得尽量淡。分割线用接近背景的浅灰就够，它的作用是提示边界，不是自己变成一个视觉元素。
同样是把三组内容分开，两种做法
画出来的分隔
框套着框，线比内容还多
让出来的分隔
↕ 8 ↕ 24 ↕ 8 分组一样清楚，一根线都没画
先删再加：把所有边框和分割线删掉，看还能不能分清结构。分不清的地方再加回来——通常只要加回三成。
线用多了会失效。**当页面上每个模块都有边框，边框就不再传递「这是一组」的信息，只是背景噪音。**真要用线的时候，把它做得尽量淡——它的作用是提示边界，不是自己变成一个视觉元素。
怎么用留白分区
-
**组内 8，组间 24。**差三倍是个安全的起点。同一组内的元素靠得紧，不同组之间拉开（见一套间距）。
-
**标题跟自己的正文离得近，跟上一组离得远。**这一条错了，分组关系会被读反。
-
**先删再加。**做完一个界面，试着把所有边框和分割线删掉，看还能不能分清结构。分不清的地方再加回来，通常会发现只要加回三成。
-
**大区块之间给足空间。**桌面端 40 到 64px 不算多。页面显得挤，通常不是内容多，是留白不够。
留白不是空着不用，它在表达关系。一块空白告诉用户「这里结束了，下面是新的一段」——这个信息本身就是内容。
接着看
一套间距 删掉线之后用多大的空间替代，取决于这组固定数值。组内 8、组间 24 就是从那儿来的。
视觉层级从哪来 留白是四种手段里最被低估的一种，也是最不增加视觉噪音的一种。
排版基础 行距、段距、页边距都是留白。中文的行距要比英文更松一些。