亮色界面的三种灰

笔记 · 2026 年 9 月

浅底界面至少要三种灰，它们做的事情不一样，共用一个值就会互相抢。

1. 背景灰

它负责让白色卡片浮起来。这个灰要偏冷一点点，纯度压到几乎察觉不到，页面才不会发黄发旧。它面积最大，所以任何偏差在这里都会被放大。

缩略图占位、次级标签这类灰，要比背景更深一档，但比正文浅很多。它出现的面积小，可以稍微大胆一点——这里用蓝灰（带一点蓝）比中性灰更像"内容"，不像"没加载出来"。

最容易被忽略的一种。分隔线是界面里唯一还值得用描边的东西：卡片的边界靠底色和阴影就够了，加上线反而让每一块都变成表格。而分隔灰要够浅，浅到"看过去才知道有"，不然它会和正文抢注意力。

判断分隔灰用得对不对，有个简单办法：眯眼看，如果线比文字更显眼，就太深了。

还有一条同样属于分隔的细节：线的长度要和它两侧内容的宽度一致，跟着容器的内边距往里收，而不是整块铺满。铺满的线会把视线推到容器边缘，那段空白并不属于内容。