留白优先
先试着删掉分割线和边框，用间距分区。
需要把两块内容分开时，先试着拉开距离。距离不够用了，再考虑加线。分割线和边框是「画出来的分隔」，间距是「让出来的分隔」——两者效果一样，但前者增加视觉元素，后者不增加。同样能表达分组，为什么要多画一堆线。ws-wiki
更重要的是，线用多了会失效。当页面上每个模块都有边框，边框就不再传递「这是一组」的信息，只是背景噪音。
间距能表达分组，背后是人的直觉：靠得近的东西会被看成一组，这跟有没有框、有没有线没有关系。反过来，框和线只是「加强分组」的辅助手段，而且它们的成本很高——每画一条线，就多一个要跟其他线保持一致的视觉元素。先删再加的顺序，本质上就是先相信间距，再把线当作补充。
你会遇到的现象：
- 页面上框套着框，线比内容还多
- 每加一个模块就给它加个卡片，最后满屏都是卡片
- AI 生成的界面每两行之间都有一条分割线
什么时候还是要线
留白优先不是不用线，是线要花在刀刃上。这五种情况仍然要线：
- **表格的行与行。**需要横向对照，线帮眼睛保持在同一行上。
- **空间不够拉开距离。**移动端一屏内容多，没有足够空间做间距。
- **需要明确的可点边界。**输入框、按钮，用户要知道点哪儿。
- **内容浮在别的内容上。**弹窗、抽屉、下拉菜单，需要跟底下的内容分开。
- **并列的多个卡片。**数量多且要区分彼此时，边框比间距更省地方。
用线的时候把它做得尽量淡。分割线用接近背景的浅灰就够，它的作用是提示边界，不是自己变成一个视觉元素。
决定「这条线该不该画」之前，先反问自己一句：如果我把这两块内容之间的线删掉，改成拉开距离，用户还会不会分不清它们属于两个组？如果答案是不会，就删掉线、拉开距离；如果答案是会，再考虑画线，而且优先考虑画得比现在更淡的线。
怎么用留白分区
- **组内 8，组间 24。**差三倍是个安全的起点。同一组内的元素靠得紧，不同组之间拉开（见一套间距）。
- **标题跟自己的正文离得近，跟上一组离得远。**这一条错了，分组关系会被读反——标题离上一段比离自己的正文还近，用户会把它归错组。
- **先删再加。**做完一个界面，试着把所有边框和分割线删掉，看还能不能分清结构。分不清的地方再加回来，通常会发现只要加回三成。
- **大区块之间给足空间。**桌面端 40 到 64px 不算多。页面显得挤，通常不是内容多，是留白不够。
留白不是空着不用，它在表达关系。一块空白告诉用户「这里结束了，下面是新的一段」——这个信息本身就是内容。ws-wiki
做完怎么验收：把界面缩小到 50% 看。缩小会抹掉文字和细线的细节，剩下的就是结构——如果这时候分组还看得清，说明间距承担了它该承担的；如果缩小后一切混在一起，问题多半不是线画少了，而是间距没拉开。留白是否够用，最终看的是「缩小后还能不能读」。