卡片Card
点课程卡片是在阅读，还是在收藏？
卡片把一个相对独立对象的标题、摘要、媒体与相关操作放在可辨识的区域里，适合浏览和进入详情。卡片是一种组合模式，不是只要加圆角、阴影就自动成立的独立功能。
一张卡先让人知道讲什么，再告诉人能往哪里走、能做什么。整块都能点时，更要避免多个动作挤在同一点击范围。
展会产品介绍单正面放主要特点，另有索取资料入口；翻看介绍和填写联系方式不是同一个动作。
类比到这里为止：网页卡片还要处理键盘焦点和链接语义。纸张上的视觉分区不能直接证明网页操作没有冲突。
产品卡呈现型号、适用场景和关键限制；详情链接与加入比较按钮分开，不让加入比较顺便打开页面。
卡片里先安排哪三件事
- 识别
- 标题与少量关键属性回答“这是什么”。
- 判断
- 摘要回答“是否值得打开”，避免截断重要限定条件。
- 行动
- 阅读、收藏、比较使用能区分的入口。
切换视图不改变业务对象
同一批询盘可以用列表或卡片呈现，筛选结果和对象 ID 应一致。卡片换行变高，不应导致下方条目的按钮错位到另一对象上。
手机可以让卡片沿页面向下排列，保留足够字号。信息较长不是强行压缩到一屏的理由。
点课程卡片是在阅读，还是在收藏？
可以操作，也可以重试。数据为虚构示例，不连接真实业务系统。
正在准备当前演示，正文可以继续阅读。
继续看项目应用与交付检查
卡片 在项目中负责什么
- 什么时候用
- 内容以独立条目浏览，图片与摘要能帮助用户判断下一步时。
- 它解决什么
- 用一致的局部结构让多种内容容易扫描，并把更多信息留给详情。
- 它不负责什么
- 需要精确比较很多字段时，表格通常更直接。卡片不应把关键条件藏进只在悬停出现的层。
- 放进真实项目
- 用产品卡展示图片、核心参数、认证与询盘入口。
卡片适合展示相对独立、可被快速判断的一项内容
产品目录中每张卡片要帮助采购商判断品类、用途和是否值得点开；课程卡片则要说明学习目标、时长和进度。
- 01
每张卡只承载一个主要对象。
- 02
让重复卡片使用一致的信息顺序。
- 03
卡片整体可点时仍保留清楚焦点和操作语义。
一张卡对应一个对象，入口与动作各自清楚。
容易混淆的地方
卡片是内容容器，不是按钮；如果包含链接和按钮，要分别处理名称、焦点与点击，不嵌套交互元素。
课程卡片既能进入教程，又有独立的收藏动作。怎样安排点击区域更稳妥？
你可以这样告诉 AI Agent
我在处理这件事：用产品卡展示图片、核心参数、认证与询盘入口。请以“卡片”为主线，先说明它在这里负责什么、不负责什么；再列出必要输入、建议动作和可验证结果。用外贸独立站的业务语言回答，不确定的信息标为待确认。
内容依据与延伸
本站用原创中文解释把专业概念映射到外贸独立站；定义和机制继续以官方资料为准，业务例子再回到 外贸独立站询盘优化实战 验证。
本站整理说明：原创整理：Web 开发、产品设计、AI 协作与外贸独立站实践