ux-cards

卡片技能

此技能的工作方式（请先阅读）

这是一项生成式技能。默认的失败模式包括：卡片塞满内容（多个主题、长篇文字、把所有细节都塞进一张卡片）、阴影乱炖（卡片、图片和按钮上都加阴影），以及万物皆卡片（用户需要按排名查看或比较结果时，却使用卡片网格）。卡片是在一个容器中呈现一个易于理解的主题，并邀请用户进一步探索——卡片布局适合浏览，不适合搜索。此技能会引导你：

1. 明确要用卡片呈现什么，以及用户如何使用这些内容——浏览还是搜索，决定了卡片是否合适。
2. 应用始终适用的核心原则——每张卡片一个主题、明确的内部层级、渐进式披露、克制设计。
3. 明确容器样式和交互方式（悬浮／描边／扁平、整张卡片可点击、媒体内容）及其权衡。

随后，交由 ux-heuristics-audit、ux-accessibility-audit、ux-aesthetics-audit 和 ux-microcopy-audit 进行验证。

---

步骤 0 — 设计前先明确背景

如果信息未知，请先询问；如果在没有答案的情况下继续，请说明假设：

• 浏览还是搜索？ 卡片没有排序——每张卡片的优先级都相同。这非常适合探索式浏览（信息流、图库、仪表板），却不适合排序搜索结果或逐项规格对比（请使用列表／表格）。如果用户要寻找特定项目，请重新考虑是否要使用卡片。
• 每个项目包含什么内容——纯文本（指标、备注）→ 文本卡片；媒体 + 摘要 + 操作 → 富媒体卡片；人物 → 用户卡片（头像、姓名、状态、一个 CTA）。内容各异、细节不一的项目最适合使用卡片。
• 一个操作还是多个操作？ 只有一个操作时，可考虑让整张卡片都可点击；多个操作则需要明确的内部按钮层级。
• 平台／信息密度——移动设备上的内容截断更明显，需要更大的触控区域，响应式卡片网格也会重新排列。

---

始终适用的核心原则（几乎适用于所有情况）

一张卡片 = 一个主题

• 将不同主题拆分到不同卡片中。 容器的全部作用，就是传达“里面的内容彼此相关；外面的内容则无关”。主题混杂的卡片会让用户分辨哪些内容属于一组。
• 卡片是预告，不是正文——渐进式披露。 辅助文本应简短，并在适当处以省略号截断，引导用户打开卡片。不要试图在卡片正面回答所有问题。
  • ❌ 一张卡片中包含完整描述、规格、三个链接和两个按钮 ✅ 图片、标题、两行预览文字……、一个明确的操作

卡片内部的层级

• **确定用户应该先看到什么，**并通过字号、字重、颜色和位置来体现——标题优先于预览内容，主要操作优先于次要操作。
• **颜色层级：**如果所有内容都突出，就等于没有突出内容。突出一个元素（“了解详情”）即可——辅助操作（保存、收藏）应保持低调。
• 明确区分主要操作和次要操作；在用户熟悉的位置（右上角）放置溢出菜单（三点 ⋮）。

克制就是风格

• **简洁优先：**优先使用字体排印和留白，而非水平分隔线——分隔线在卡片内部很少有帮助。
• 每张卡片最多一个阴影。 已有悬浮效果的卡片内部，媒体、按钮或图标都不要加阴影。阴影应在四条边上都清晰可见（柔和的环境阴影，而非只有一道锐利的主光）。
• 保持内边距和外边距一致——元素应有呼吸感，相关内容应聚在一起，内容绝不能紧贴边缘。
• **标签简洁：**不要使用冗余词语或标点；微文案应力求简练。
• 只使用高质量媒体内容——模糊或有颗粒感的图片会损害信任；图片上的文字应保持 ≥4.5:1 的对比度（使用半透明深色蒙层）。

---

取决于上下文的决策（仅供参考，不要自动应用）

决策	适用情况	避免／调整的情况	默认建议
凸起（带阴影）卡片	需要明确可点击性的卡片；模拟实体卡片；悬停时加深阴影	密集仪表盘中，几十道阴影会造成视觉干扰	交互式卡片默认采用此样式，但遵循单阴影规则
描边卡片	无需层次感的分组；表面更简洁、低调	交互需要更强的提示时	用于非交互式或强调程度较低的分组
扁平卡片	追求简约美感，并通过独特的背景色将其区分开	没有任何视觉提示时（用户会完全注意不到）	仅在背景形成对比且有悬停微交互时使用
整卡可点击	只有一个主要操作；点击目标更大，认知负担更低	卡片内有多个相互竞争的操作时（嵌套点击陷阱）	只有一个操作时，让整张卡片可点击，并添加悬停提示
富媒体卡片	视觉内容本身就是内容的浏览体验（产品、文章、视频）	媒体只是装饰，反而挤占信息空间时	媒体应当物有所值，否则就删掉
用户卡片	社交／人物场景：头像 + 姓名 + 状态 + 一个 CTA	将完整个人资料都塞进卡片时	展示身份 + 一个操作；其余信息放到个人资料页
卡片网格还是列表／表格	内容类型多样、偏视觉、适合浏览	排名结果、规格对比、查找已知项目	用卡片来发现内容；用列表／表格来查找内容（→ 数据请参阅 ux-tables）

---

验证结果（编排）

移交时，使用各审查视角对应的可安装技能 name。仅当该技能已安装时才调用；如果未安装，这项技能本身已包含这些规则，因此无需等待，直接继续即可。

生成或修改结果后，将其交由审查视角检查，而不是直接宣布完成。这些都是候选审查视角——具体执行方式由 docs/orchestration-policy.md 规定，也可以将整个任务交由 ux-design-review 处理。此处，heuristics 和 microcopy 属于 A 级（自动运行）；accessibility、aesthetics 和 mobile-responsiveness 属于 B 级（可选择）——在现有设计系统下，aesthetics 将被抑制，accessibility 将缩小到使用方面；mobile-responsiveness 仅适用于移动设备。如果用户调用此技能是为了处理某一具体事项，请遵守该范围。

• ux-heuristics-audit （A 级） — 识别（卡片是否看起来是一个整体？）、卡片组内的一致性、可点击性的提示。
• ux-accessibility-audit （B 级 — 可选；在设计系统下缩小范围） — 文字叠加在图片上的对比度（≥4.5:1）、卡片内操作的触控目标、可点击卡片的焦点状态。
• ux-aesthetics-audit （B 级 — 可选；在设计系统下抑制） — 检查阴影过多和界面杂乱：层次结构、内边距节奏、单一强调规则。
• ux-microcopy-audit （A 级） — 标题和标签是否简洁、引导文字的质量。
• ux-mobile-responsiveness-audit （B 级 — 可选；仅适用于移动设备） — 在移动场景下：网格重排、文本截断、触控区域。

如果审查发现冲突（例如营销团队希望卡片上展示更多内容，但这会影响快速浏览），应以主要任务为准进行解决：卡片的作用是让人一眼看懂并引导点击，而不是成为信息的最终目的地。

---

常见的该做与不该做

❌ 不该做	✅ 该做
一个容器里放三个主题	每张卡片只呈现一个主题；按逻辑分组
在卡片正面放完整文章	使用内容预览并截断……，逐步展示更多内容
卡片、图片和按钮都加阴影	每张卡片只加一层阴影；内部元素不单独加阴影
用水平分隔线切割卡片	用留白和字体排版来区分内容
每个元素都加粗并使用鲜艳色彩	突出一个元素；建立颜色层级
扁平卡片与页面无法区分	使用不同的背景并添加悬停提示，或采用描边／凸起样式
卡片只有一个操作，但只有很小的链接可点击	让整张卡片都可点击，并添加指针光标和悬停效果
直接在繁杂的图片上叠加白色文字	添加深色半透明遮罩，确保对比度 ≥4.5:1
用卡片网格展示排名搜索结果	查找内容用列表／表格；浏览内容用卡片
把三点菜单放在不寻常的角落	放在右上角，也就是用户预期的位置
未经检查就发布	按照启发式原则、无障碍要求、视觉美感和微文案进行检查后再交付

---

来源课程（Uxcel）

• UI 卡片类型及其适用场景
• UI 卡片设计最佳实践