---
title: "别再用卡片装一切"
description: "卡片是个好东西，但它有明确的使用条件。当每一块内容都变成同样圆角同样阴影的卡片时，页面就失去了层级，读者也失去了方向。"
canonical_url: "https://www.kemiaosw.top/posts/stop-using-cards"
---

> Index of every page on this site: [llms.txt](https://www.kemiaosw.top/llms.txt)

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

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

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

## 卡片传递的错误信息

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

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

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

具体到博客：

<table>
<thead>
  <tr>
    <th>
      内容
    </th>
    
    <th>
      是卡片吗
    </th>
    
    <th>
      为什么
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      文章列表项
    </td>
    
    <td>
      不该是
    </td>
    
    <td>
      它们是一串同类项，不是独立单元
    </td>
  </tr>
  
  <tr>
    <td>
      友链
    </td>
    
    <td>
      可以是
    </td>
    
    <td>
      每个友链确实是独立实体
    </td>
  </tr>
  
  <tr>
    <td>
      技能标签
    </td>
    
    <td>
      不该是
    </td>
    
    <td>
      它们属于同一组
    </td>
  </tr>
  
  <tr>
    <td>
      文章正文的代码块
    </td>
    
    <td>
      不该是
    </td>
    
    <td>
      它是正文的一部分
    </td>
  </tr>
  
  <tr>
    <td>
      弹窗
    </td>
    
    <td>
      是
    </td>
    
    <td>
      它确实浮在页面之上
    </td>
  </tr>
</tbody>
</table>

## 我用什么代替

### 列表：横线 + 间距

```css
.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` 便宜得多——阴影会触发重绘，边框不会。

### 分组：留白

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

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

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

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

### 强调：字重和颜色

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

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

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

## 那卡片什么时候用

三个条件同时满足才用：

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

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

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

## 一个具体的对比

同一个博客，两种列表：

**卡片式：**

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

**行式：**

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

行式版本：

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

## 最后

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

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

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

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

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

## Sitemap

See the full [sitemap](https://www.kemiaosw.top/sitemap.md) for all pages.