热点卡片是监控工具面向用户的首要触点。一张卡只讲清一件事：这个热点是什么、有多热、从哪来、大模型给出了什么判断。信息密度过高会逼用户做阅读理解，过低又浪费屏幕。AI 热点监控工具的前端把采集到的标题、热度、平台、时间与大模型分析结论压缩进一张卡，靠视觉层次和完整状态机撑起可读性。下文拆解卡片该展示的内容与交互取舍。
一、卡片该展示哪些信息
热点卡片不是详情页，它是通往细节的入口。每张卡只承载一个核心主题，把核心信息点前置，其余收进展开区。
| 信息块 | 是否常驻卡面 | 处理建议 |
|---|---|---|
| 标题 | 是 | 加粗，超长截断为两行 |
| 热度值 / 趋势 | 是 | 数字突出，配迷你趋势 |
| 来源平台 | 是 | 角标区分 Twitter / B站 |
| 采集时间 | 是 | 次级灰度，相对时间 |
| 大模型标签 | 是 | 按语义配色，弱化背景 |
| 摘要正文 | 折叠 | 默认两行，展开看全 |
| 分析结论 | 折叠 | 点击卡片展开 AI 研判 |
标题与热度是「主」，平台与时间当「次」，标签做点缀。一套卡片保持相同圆角、相同内边距、相同灰度阶梯，用户扫一眼就能定位重点，不必重新适应版式。
二、用字号与灰度拉出视觉层次
同一张卡里，主信息用高对比，辅助信息主动退后。标题 16–18px 加粗，热度数字 20px 用强调色，平台与时间降到 12px 次级灰度。这样视线自然落在「标题 + 热度」上，符合 F 型浏览习惯——把核心动作（如「查看分析」）放在视线终点附近，别丢到右下角反人类位置。
.card-title { font-size: 17px; font-weight: 600; color: var(--text-primary); }
.card-heat { font-size: 20px; color: var(--accent); }
.card-meta { font-size: 12px; color: var(--text-tertiary); }留白多 30% 会让人觉得更「高级」。卡片内边距不低于 16px，卡片间距取 16/24，文字离边缘留足安全距离，避免压迫感。
三、完整状态机是卡片的底线
一个成熟的卡片样式必须含五态：Default（默认）、Hover（悬停）、Active（点击）、Disabled（禁用）、Loading（加载）。缺了交互反馈，卡片就是「死」的，用户无法建立信任。
.hot-card { transition: transform .2s ease, box-shadow .2s ease; }
.hot-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.28); }
.hot-card:active { transform: translateY(0); }
.hot-card.loading { opacity: .6; pointer-events: none; }悬停轻微上浮 2px 加阴影，模拟物理世界的「触碰感」；点击 0.3s 内完成态切换，别做夸张旋转。加载态用骨架屏而非转圈圈——骨架能暗示内容结构，转圈只告诉用户「在等」，前者友好得多。
四、热点卡片的交互设计考虑
监控场景里卡片要兼顾「快速浏览」与「深度下钻」两种诉求，交互上做这几件事：
- 整卡可点，点击展开大模型的完整研判结论，保持上下文不跳走；
- 悬停时右侧浮出操作（收藏、分享、忽略），用微交互提升可发现性；
- 平台角标用 SVG 标识，不堆 emoji，线宽统一；
- 长摘要用省略号截断，配「展开」箭头，避免卡片被文字撑长；
- 空状态放引导插画与一句人话提示，别甩「Error」天书。
展开动画要跟上下文关联：从卡片原位平滑放大到详情层，让用户感觉仍在同一框架内操作，而不是被丢到新页面。
五、可访问性不能省
卡片再好看，读屏软件读不出结构就废了。用语义化标签包裹，配 ARIA 角色与有意义的 alt 文本，保证键盘可聚焦、对比度达标。
<article class="hot-card" role="article" tabindex="0" aria-label="热点：某话题热度激增">
<h3 class="card-title">某话题热度激增</h3>
<span class="card-heat" aria-label="热度 9200">9200</span>
</article>文本与背景对比度至少 4.5:1；所有交互元素给明确焦点态；平台图标提供文字等价描述。色彩只是辅助，不能让色盲用户丢失信息。
六、卡片布局的几种模式
监控面板常用网格排布，整齐且易扫读；若标题长短差异大，可换瀑布流让高度自然错落。需要把多张历史卡叠出层级感时，用堆叠卡片暗示时间先后。带操作菜单的卡片通过三点图标呼出更多动作，保持卡面整洁。
选哪种看内容：同质化列表走网格，社媒流走瀑布，时间线走堆叠。别为了炫而混用，一致性比花样重要。
常见问题（FAQ）
Q1：卡片里放多少信息合适？
只放标题、热度、平台、时间，其余折叠进展开区。
Q2：加载态用骨架屏还是转圈？
优先骨架屏，能暗示结构，比转圈更友好。
Q3：卡片要不要整卡可点？
要，整卡点击展开分析，悬停再浮出次级操作。
