术语图鉴/UI/UX 设计/卡片式设计
←→切换Esc返回

卡片式设计 Card Design

你可能会说

把这几条信息做成卡片样式,每张卡片独立可点击。

把一组相关信息装进一个带边界的「卡片」里,像一张张便签。

把一组相关信息装进一个带边界的「卡片」里,像一张张便签。每张卡片独立、可点击、可排列,是现代界面最常用的形式。

也常被叫作Card Design

生活类比

像便利贴墙——每张便签记一件事,排列整齐,随时可以单独拿下来看。

🎮 动手试试

卡片标题
卡片内容描述文字
选择题选择一个你认为最合适的答案

关于「卡片式设计」,以下哪个描述最准确?

你可以这样告诉 AI

帮我把文章列表改成卡片布局:每张卡片放封面、标题、摘要、日期,圆角 12px 加柔和阴影,hover 上浮。

容易混淆?这样区分

卡片式设计 Card Design≠
卡片 Card

卡片式设计是一种信息组织策略(用卡片分组展示内容),卡片是实现该策略的具体 UI 容器组件。

什么时候用

组织同类型信息块

当有一组独立但格式相似的信息(文章列表、商品展示、用户资料),用卡片分组让每块信息有自己的边界和操作入口。

和 AI 协作时

想让 AI 做卡片布局时,说「文章列表用卡片展示:标题、摘要、日期、按钮,圆角 12px 加阴影」,AI 会生成卡片组件。

什么时候不用

数据密集型表格页

财务明细、数据对比等需要逐行精确对齐的场景,表格比卡片更高效——卡片的信息密度低,不适合逐项比对。

与纯文本长文页面无关

文章详情页、文档页等以连续阅读为主的场景,卡片的分割会打断阅读流,纯文本排版更合适。

组成结构 · Anatomy

1
核心概念Core

把一组相关信息装进一个带边界的「卡片」里,像一张张便签。每张卡片独立、可点击、可排列,是现代界面最常

2
实际表现In Practice

像便利贴墙——每张便签记一件事,排列整齐,随时可以单独拿下来看。

3
与 AI 的关联AI Context

和 AI 沟通时提到「把列表做成卡片形式」,就是每个条目一个带边框的小块。

典型使用场景

列表改卡片
告诉 AI「文章列表别用纯文字行,改成卡片:16:9 封面图、标题最多两行、摘要三行截断、底部日期」
想弄懂概念时
告诉 AI「用大白话给我解释什么是卡片式设计,举个生活中的例子」

延伸阅读