已进入详情
作品卡：点击范围、次级状态、缺图都长在物件上
亲手点收藏、切换点击热区、模拟缺图，观察卡片物件本身怎么变化——已收藏角标、整卡抬起、稳定占位都不只在底部说明里。
第 0 步：这是一张作品卡。点「收藏」看状态长在角标和底色；切换「整卡可点 / 仅操作区可点」看点击范围与视觉承诺是否一致；「模拟缺图」看结构会不会塌。
点击热区
封面
对照：未收藏、封面正常，整卡可点。原因：封面、标题、标签与下一步收在同一可扫描边界里，主入口只有一个。下一步：点「收藏」看状态长在卡片角标，或点卡片主体进入详情。
面板教会的知识点
把刚才操作里看到的现象命名为五条规则。
- 卡片是一个对象的摘要边界：封面、标题、元信息（标签/时长）和下一步动作收在一起，区别于「加圆角阴影」的装饰盒。
- 点击范围＝视觉承诺：整卡可点时主体悬停会抬起；仅操作区可点时主体无可点外观，只有按钮进入，两者不能混。
- 次级状态独立于主入口：收藏用 aria-pressed 表达，是独立按钮；整卡可点不会让收藏失效，二者不争夺点击。
- 状态长在卡片物件上：已收藏会显示角标和底色，已打开会标记入口，不只靠按钮文字或底部说明。
- 缺图缺数据不塌结构：图片用稳定占位替换，标题/标签/入口位置保持，不露裂图、不重排。
什么时候用卡片
从是否需要把一个对象的摘要独立呈现来判断。
用户先比较多个独立对象再决定进入哪一个——教程目录、作品集、商品列表、人物卡片。
只看单条详情（→ 描述列表）、字段差异大要横向对齐比较（→ 表格）、强时间序（→ 时间线）。
怎么用：从边界到窄屏的最短路径
一次到位的检查顺序。
- 定边界：一个对象一张卡，封面/标题/元信息/下一步收在一起，不在卡里塞无关对象。
- 定主入口：整卡可点 或 仅操作区可点，二选一，与视觉承诺一致；不要嵌套冲突链接。
- 定次级状态：收藏/选中独立于主入口，aria-pressed 表达，状态长在角标/底色/勾。
- 定降级：缺图用稳定占位、缺数据保留字段位置，不让结构塌或露裂图。
- 定列表节奏：同行卡片信息层级一致，用户能在进入前横向比较。
正反例：同一个「作品列表」需求
只改一个关键判断——点击范围是否与视觉承诺一致、状态是否长在物件上。
整卡一个主入口 + 收藏独立次级按钮，已收藏角标长在卡片上；缺图显示稳定占位，用户敢整卡点、一眼看出收藏了哪些。
卡里塞了标题、封面、「查看」三个冲突链接，收藏态只靠颜色，缺图露裂图——用户不知点哪、看不出收藏了哪些、布局还塌。
快速自测
作品卡的整张区域都是进入详情的主入口，但又想加「收藏」。收藏按钮该怎么放？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。