界面图鉴
卡片Card
你可能会问
卡片到底是什么？为什么现在的网页到处都是一块一块的小方框？
简单来说
把一条内容装进带边界的小方块，成组排列，方便扫视和点击。
01 · 拆开看看
这一块由什么组成
卡片借的是实体卡片的隐喻：信息装进一个有边界的容器，看得出哪里开始、哪里结束，整张都能点。它通常由这几部分组成：
封面Cover
图片或图标，第一眼的识别物。
标题Title
这条内容叫什么，一行说完。
摘要Description
一两行补充，勾起点进去的兴趣。
元信息Meta
日期、标签、作者这类小字。
02 · 常见变体
同一个零件，几种摆法
上图下文，博客和商品网格的标配。
图左文右，列表里的紧凑形态。
没有图，靠边界和留白立住体面。
03 · 火眼金睛
这个页面里，哪一块是卡片？
注意下面有两种列内容的方式，长得像，但不是一回事。
点一块试试，看看它叫什么
导航栏Navbar
不是它。这是顶部导航，跟内容展示没关系。
Hero 区Hero
不是它。Hero 是整页的开场白，不是内容单元。
卡片Card
就是它！每条内容一个独立容器：有边界、有封面、整块可点。
列表行List Row
不是它。列表行只用分割线隔开，没有独立容器——这正是它和卡片的本质区别。
04 · 用与不用
什么时候该上它
适合
- 内容各自独立、可以单独点开时
- 有封面图这类视觉元素时
- 数量不定、需要自动换行的网格
先别用
- 需要逐行对比数据——用表格
- 高密度信息查找——用列表
- 内容之间有严格顺序或层级的时候
05 · 想一想
一道题，检查眼力
30 篇文章要展示成一页。卡片和列表，怎么选？
对。卡片适合「逛」，列表适合「查」——按用户的目的选，不按好不好看选。
卡片的代价是密度：一屏放不了几条。为了好看牺牲效率，用户不会领情。
有封面图的内容排成纯列表会很干，「逛」的场景需要视觉入口。
06 · 说给 AI 听
让 AI 改它时，这样说
整张卡片都应该能点，别只让标题可点——这是最常见的体验坑之一。
把文章列表改成三列卡片，带封面图
卡片 hover 时轻微上浮，加一点阴影
卡片的元信息只留日期，去掉作者
手机上卡片改成单列排布
最容易踩的坑
卡片的代价是密度：一屏放不下几条。当用户要的是快速扫一大堆条目时，朴素的列表反而更好用。