一屏塞几十张卡片、样式全都一样，用户扫过去什么都记不住，重点信息被淹没。
没有统一的间距体系，卡片之间忽近忽远，视觉重量失衡，显得很业余。
整张卡片可点击但没有 hover 反馈，用户点了没反应，不知道是否真的可交互。
图片 + 标题 + 摘要，内容站与电商列表最常见，信息密度与吸引力兼顾。
图标 + 标题 + 描述，产品能力与特性展示，营销页与官网首页的标配。
头像 + 姓名 + 介绍/评价，团队展示、客户证言、社区成员列表通用。
套餐名 + 价格 + 特性清单，定价页与套餐对比的标准形态。
标题 + 时间 + 摘要 + 操作，消息中心与动态列表使用。
指标 + 数值 + 趋势，数据看板与后台首页的核心信息单元。
栅格列数决定信息密度与呼吸感，按内容类型选合适的布局。
| 内容类型 | 桌面 | 平板 | 手机 | 适用场景 |
|---|---|---|---|---|
| 图文卡片 | 3-4 列 | 2-3 列 | 2 列 | 内容/电商列表 |
| 功能卡片 | 3 列 | 2 列 | 1 列 | 官网特性展示 |
| 价格卡片 | 3-4 列 | 2 列 | 1 列 | 套餐对比 |
| 统计卡片 | 4 列 | 2 列 | 2 列 | 数据看板 |
| 用户/证言卡片 | 3 列 | 2 列 | 1 列 | 团队与评价 |
| 详情类大卡片 | 2 列 | 1 列 | 1 列 | 案例/专题展示 |
一张卡片只表达一个主题，信息完整但克制；超过两个主题就拆成多张卡片。
卡片内间距与卡片间距用统一的栅格倍数（如 8px 体系），视觉整齐有节奏。
重要卡片可加大留白、加阴影或加色块突出，其余保持统一，制造"扫读焦点"。
可点击卡片要有 hover/按下反馈（阴影、位移、边框色），明确告知"可操作"。
卡片栅格随屏幕列数变化（桌面 3 列、平板 2 列、手机 1 列），内容不被裁切。
产品能力、服务项目、客户案例用卡片呈现，扫读友好、信息清晰。
商品卡片承载图、名、价、加购，是电商转化链路的绝对主力。
统计卡片、模块卡片让运营数据一屏可扫，决策效率更高。
图文卡片瀑布流、专题卡片墙，把海量内容组织成清爽的浏览体验。
