Card Grid 卡片网格

卡片网格像书架或商品货架。它让用户快速扫过多个同类选项,看清每个选项的标题、说明、状态和入口。关键不是把页面切成很多小盒子,而是让同类对象用同一种字段出现,用户才能比较。

关键结构图

重排

桌面端四张卡一排,平板端两张一排,手机端单列,每张卡保留同样字段。

Card Grid 是把一组同类对象摆成可扫读、可比较、可点击的货架。

Card Grid 卡片网格是用一组重复卡片按栅格排列,让用户浏览、比较或选择多个同类对象的方法。它常用于功能入口、文章、模板、案例、课程模块和方案对比。它的边界是“对象同类、字段稳定、扫描路径一致”;如果内容类型差异很大,强行做成卡片会制造噪音。

StructureCard Grid = 同类对象 + 稳定字段 + 响应式排列

当页面需要展示多个同类入口,并且用户需要比较、选择或扫读时,可以使用卡片网格。

先确定卡片对象是否同类,再统一字段:标题、摘要、状态、动作、媒体规则。最后用栅格和断点控制列数,保证移动端仍然可读。

模板库用卡片网格展示不同模板。每张卡都有名称、用途、标签和预览,用户可以快速比较。

功能页用卡片网格展示六个核心能力。如果每张卡都用不同结构和不同按钮文案,用户就很难判断它们是否同级。

类型:设计系统实践 / 布局方法

事实线:Material Design 将 cards 用于承载某个主题的内容和行动;栅格系统和响应式布局决定卡片组如何在不同屏幕上排列。

依据:Material Design cards、Material responsive layout grid、Carbon 2x Grid。

边界:适合组织同类可比较对象;不适合把不相关内容硬切成卡片,也不适合让每张卡都抢主视觉。

常见误读:不要把卡片网格理解成“越多越丰富”。卡太多、字段不一致或层级混乱,会让页面变碎。