Thumbnail vs Slide · 为什么封面不能像幻灯片
封面和幻灯片在视觉上看着都是 16:9,但服务的场景完全不同。把幻灯片那套搬过来做封面会失败 - 这份 reference 把两者的差别说清楚,后续写新模板时不要踩坑。
使用场景对比
| 封面 (Thumbnail) | 幻灯片 (Slide) | |
|---|---|---|
| 出现位置 | 订阅列表 / 推荐位 / 搜索结果 | 视频播放区域 / 全屏演示 |
| 观看距离 | 缩略图 160-320px 宽 | 1080p 全屏 |
| 观看时长 | 0.5-2 秒决定要不要点 | 30-60 秒一页 |
| 信息密度 | 极低 (1 个主标 + 1-2 个支撑元素) | 中等 (多 bullet / 数据 / 图表) |
| 目标 | 让人想点进来 | 让看进来的人理解某一点 |
设计规则
1. 3 秒原则
封面在缩到 160px 宽时,主标题必须 3 秒内能读出来。这意味着:
- 主标题字号 ≥ 200px (在 1920×1080 画布上)
- 主标题字数 ≤ 3 个英文词 或 ≤ 8 个中文字
- 字体粗细 ≥ 800 (Manrope Bold 或同等级)
幻灯片完全相反 - 字号 60-80px 是正常的,bullet 多行也行,因为观众在全屏看。
例外:编辑式多词标题(如
quiet-dark那种「The Harness / Is The Product」整句拆两行)字号天然比单词 hero 小一档(~130-170px),靠最高亮度对比 + 大留白而非纯字号取得可读性 - 这类风格里 200px 会折行撞版。短到 1-3 个词时再把字号推回 200px+。
2. 单焦点
封面应该有一个让眼睛停下来的元素。不是两个,不是四个 bento tile,是一个。
幻灯片可以有多焦点(标题 + 几条 bullet + 图表),因为观众会顺序读完。封面观众根本不读全,只扫一眼,所以多焦点 = 没有焦点 = 没人点。
错误示范:
[Logo] [Date]
[标题 1] [标题 2]
[副标 1] [副标 2]
[数据 1] [数据 2] [数据 3] [数据 4]这是 dashboard 或 slide,不是 thumbnail。
正确示范:
[BIG BOLD TITLE]
[supporting subtitle]
[small author info]3. 留白即信息
幻灯片留白可以填,封面留白要保持。原因:
- 缩略图小,任何角落塞东西都会变噪点
- 大留白让主标题更突出
- 留白本身是品牌一致性的一部分(系列内容看上去同一个频道出的)
具体比例:主标题区域占画面 40-60%,其余全部用作呼吸。
4. 颜色对比
封面在小尺寸下,弱对比的颜色会糊成一团。规则:
- 背景和主标题对比度 ≥ 7:1 (WCAG AAA)
- 强调色和背景对比度 ≥ 7:1
- 副标题颜色不要太接近背景
黑底 + lime 是高对比组合;深灰 + 暖白则是低对比,封面会显得"灰扑扑"。
对比是亮度对比,不只是配色 - 这决定了字清不清。 易读性取决于前景与背景的亮度差:白字压黑底 ≈ 21:1,是能做到的最锐利边缘。把一个饱和强调色用作大标题的填充(整段标题上 lime / 蓝),强调色处在中等亮度,字缘对比骤降;再叠任何 text-shadow / glow,字缘进一步被晕开 → 缩到 160px 就糊。所以一条铁律(见 SKILL.md Critical Rule 14「配色服务可读性」):
- 标题的「体量」留给最高对比的中性色(白压暗 / 墨压浅),不要给整段大标题上饱和色;主标题上别加发光。
- 强调色当「标点」用:kicker、一段短横杠、单个高亮词、图标、数字 - 小而实,短促出现,对比够就行。
- 绝不在同明度的半透明色块上压同色文字(例如 lime 文字压
rgba(lime,0.1)衬底)—— 这是「彩色字发虚」最常见的来源,要么文字用实色,要么衬底换成实底反白。
quiet-dark 风格就是这条规则的范本:纯白标题 + 蓝色只出现在 kicker 和横杠。
5. 不要小图标
幻灯片可以放 16-24px 的小图标说明 bullet 含义。封面不要,理由:
- 缩到 160px 后小图标变成 2-3px 像素,完全看不出是什么
- 反而吃掉本可以让主标题更大的空间
如果非要图标,至少 80px,且要么有色块衬底,要么作为装饰呼应主标题。
模板设计时的常见反模式
写新模板时这几个反模式要避开:
| 反模式 | 为什么不行 | 替代方案 |
|---|---|---|
| Bento 网格 (4 个 tile 平均分) | 多焦点,小尺寸下每个 tile 都糊 | 单 hero + 1-2 个装饰 |
| Hero card + 右侧 4 metric | 同上,而且 metric 数字小 | 主标题占大头,metric 删掉或合并成一句话 |
| 信息密集的 chip / tag 行 | 看不清,且让人觉得"信息量大要花时间读" | 最多 1-2 个,字号要够大 |
| 暗色渐变(深灰 → 深黑) | 缩略图下渐变消失,变纯灰 | 纯色背景 + 一个 radial glow 提亮中心 |
| 装饰性 fan-out 网络 (几十个节点) | 缩成一团黑点 | 5-7 个节点足够,大节点 + 粗连线 |
系列一致性
如果是系列视频(VerySmallWoods 每期一个发布解读),封面要保持:
- 背景色固定 (比如全系列都纯黑)
- 强调色固定 (比如全系列 lime
#7bff9f) - 字体固定 (Manrope + Noto Sans SC + JetBrains Mono)
- 品牌行位置固定 (顶部 brand-mark,底部 author)
变的只有:主标题、副标题、可能的强调元素(节点图 / 几何符号 / 数据)。
这样观众在订阅列表里一眼能认出是同一个频道,即使没看到频道名。
何时违反这些规则
教程类 / 配置类 / 步骤类视频的封面有时确实需要列几个要点(比如"3 个步骤"、"5 个工具")。这种情况下:
- 仍然保持一个主标题(比如"3 步搞定")作为最大字号
- 3 个要点字号小一档(主标题的 40-60%)
- 要点之间不要 bento 框,用 inline 或 stack 方式呈现
- 整体不超过 5 行文字
不要为了"信息丰富"把封面塞满 - 信息丰富在视频里讲,封面只负责让人点进来。
「目录 / 速读」类是另一种正当例外。 一期速读、日报周报、榜单 Top N、合集 - 内容本身就是一个列表,这时 editorial-index 风格(报头 + 编号目录)主动放弃单焦点是合理的:它把整期 lineup 一眼摆出,适合全幅 / 大图场景(文章 hero、Substack 题图、X Card、横屏视频封面)。代价:缩到 160px 列表会糊,所以需要小缩略图也读得出时(订阅列表 / 推荐位),改用单焦点风格(quiet-dark 大标题 / 大数字)。同一期可以两套并用 - 列表版做题图,单焦点版做缩略图。