别再用卡片装一切

打开最近看到的十个个人网站，八个长这样：

• 白色背景
• 每块内容一个圆角 16px 的卡片
• 卡片下面一层 0 4px 6px rgba(0,0,0,.1) 的阴影
• 卡片之间 24px 间距
• 所有卡片长得一模一样

这个布局不算丑，但它有一个致命问题：读者不知道先看哪里。

卡片传递的错误信息

在视觉语言里，一个边界明确的容器在说：「这是一组相关的东西，和外面无关。」

这是有用的信息——但前提是并非所有东西都是卡片。

如果 10 块内容全都是卡片，那这个信号就失效了。就像一篇文章里每个词都加粗，等于没加粗。

具体到博客：

我用什么代替

列表：横线 + 间距

.post-list {
  display: flex;
  flex-direction: column;
}

.post-item {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-block: 0.875rem;
  border-bottom: 1px solid var(--border);
}

.post-item:last-child {
  border-bottom: none;
}

一行一条线。视线沿着线往下走，不会被框住。

而且 border 比 box-shadow 便宜得多——阴影会触发重绘，边框不会。

分组：留白

不需要任何视觉元素，间距本身就是分组。

.section {
  margin-block-start: 3rem;
}

.section + .section {
  margin-block-start: 4rem;
}

大间距说「这是新的部分」，小间距说「这些是一起的」。这是人类视觉系统最古老的规则之一，不需要额外的框。

强调：字重和颜色

想突出某一块内容，不要给它加边框，改它的字重。

.post-item:hover .post-item__title {
  font-weight: 700;
}

从 400 到 700 的变化，比任何阴影都醒目，而且不占空间、不增加视觉噪音。

那卡片什么时候用

三个条件同时满足才用：

1. 内容确实是独立的、可以单独存在的单元
2. 它需要和周围的内容明确区分开
3. 数量不多（少于 10 个）

友链页的每个友链符合这三条——它们确实彼此无关，确实需要区分，数量也不多。

文章列表不符合第一条：10 篇文章是一个连续的序列，不是 10 个独立单元。

一个具体的对比

同一个博客，两种列表：

卡片式：

┌─────────────────────────┐
│ ┌─────────────────────┐ │
│ │ 排版比配色更决定气质 │ │
│ │ 2025-10-28          │ │
│ └─────────────────────┘ │
│ ┌─────────────────────┐ │
│ │ 我删掉了站点的 90%   │ │
│ │ 2025-10-12          │ │
│ └─────────────────────┘ │
└─────────────────────────┘

行式：

2025-10-28   排版比配色更决定气质
──────────────────────────────────
2025-10-12   我删掉了站点的 90% 功能
──────────────────────────────────

行式版本：

• 纵向高度减少约 50%，一屏能看更多文章
• 日期对齐成一列，可以扫读
• 视线路径是单一的从上到下
• 没有任何装饰性的视觉重量

最后

卡片不是设计元素，是信息结构的可视化。

当你不知道该怎么组织内容时，把东西装进卡片是最省事的选择——但也是最偷懒的选择。

真正该问的问题是：这些内容之间是什么关系？

是序列？用列表。 是并列的独立实体？用网格或卡片。 是从属关系？用缩进。 没有关系？用留白隔开。

想清楚关系，视觉自然就对了。