极简的难,在于没有东西可以藏
加法设计有一个天然优势:出问题的地方总能被新元素盖住。留白不够?加个分割线。层级不清?加个底色块。信息太空?加点装饰纹理。
减法设计把这些退路全部堵死了。当页面上只剩标题、正文和一条细线时,任何一处间距错了 4px,读者都能立刻感觉到「哪里不对劲」,却说不出是什么。
三个反复回炉的判断
一、这条分割线到底在解决什么问题
我曾在每个区块之间都放一条 1px 细线。看起来整齐,但问题是:它只是在掩盖间距不当。
后来我把所有分割线删掉,只靠 padding 建立节奏——相邻区块 48px,父子区块 24px。删完之后页面反而更清楚了。现在保留下来的分割线只有一个用途:标识语义上的断裂(比如正文结束、进入相关推荐)。
二、圆角 14px 还是 10px
这看起来是个无关紧要的选择。但当成百个卡片、按钮、输入框共享同一个半径时,它决定了整站的气质:
6px— 偏工具、偏文档,像一份报表14px— 温和,适合内容站18px+— 偏消费级产品,视觉上更「软」
我最后定在 14px,因为这套系统的正文阅读占比很高,太硬会让人紧张。
三、动效要不要做
我的结论是:默认不做,除非它承担信息。
上浮(translateY(-2px))能告诉用户「这个卡片可点」,这是信息。整页淡入只是让人多等 300ms,这是噪音。所以现在全站动效只保留了两类:hover 反馈、以及主题里站长显式开启的入场动画(且遵守 prefers-reduced-motion)。
一个可操作的检验方法
做完一版设计后,把页面缩到 30% 看。如果这时还能一眼看出主标题、正文块、操作按钮三者的层级,说明结构是成立的;如果糊成一团均匀的灰,说明你在用装饰代替结构。
极简的终点不是「看起来干净」,而是「每个像素都在工作」。
落地到这套系统
这也是为什么主题引擎里,所有视觉参数都做成了可回退的默认值:
- 默认主题下,背景不生成任何
background-image; - 毛玻璃关闭时,卡片连
data-theme-glass属性都不渲染,避免多余合成层; - 入场动效默认
none,零性能开销。
「不做」必须是默认状态,这样站长想加的时候,加上的每一样都是主动选择。