发布于 更新于 约 3 分钟读完 · 1,219 字

本文目录 13 节
  1. 一句话
  2. 视觉范式三层结构
  3. 第 1 层:左上双标牌(伪频道角标)
  4. 第 2 层:主新闻条(横贯全宽 + 左红块)
  5. 第 3 层:滚动新闻条(白底黑字 + 比主条窄)
  6. 配色铁律
  7. 位置铁律(手机端竖屏 9:16)
  8. 字体选择
  9. LLM 易踩偏差:凭”语义印象”做设计
  10. 应对策略
  11. 适用边界
  12. 关联文档
  13. 文档版本

伪央视字幕条视觉范式

沉淀:2026-05-14 触发:异界气象台 minitest 字幕渲染 v1 → v4 迭代(共 7 版才命中) 关联:入场票框架_v1 · 大地之上_复用清单


一句话

伪央视字幕条的核心是”白底黑字 + 红蓝色块”四色对比,不是”半透明深色 + 白字”。

7 版迭代里前 6 版全错在凭”语义印象”做设计——“央视 = 蓝色 + 深沉 + 半透明文艺感”,但真央视新闻直播间字幕条实际是报纸级的不透明白底黑字。


视觉范式三层结构

第 1 层:左上双标牌(伪频道角标)

参考真央视”新闻直播间 / 09:14”:

┌─────────────┐
│ 新闻直播间   │ ← 上:亮蓝底白字(圆角矩形)
├─────────────┤
│ 09:14       │ ← 下:白底红字(圆角矩形,仿时间块)
└─────────────┘

关键参数:

  • 亮蓝色:RGB(40, 110, 195) —— 接近 CCTV 真实品牌蓝
  • 红色字:RGB(210, 30, 30) —— 央视红
  • 圆角半径:4-6px(不要过大像气泡)
  • 两层共享同一宽度对齐

第 2 层:主新闻条(横贯全宽 + 左红块)

┌──┬──────────────────────────────────────┐
│██│ 深海第七断层 · 持续低压云团 · 鲸群...  │ ← 白底黑字
└──┴──────────────────────────────────────┘
 ↑
 红色正方形色块(与主条等高)

关键参数:

  • 主条底色:RGB(245, 245, 240) 接近纯白略暖(避免刺眼)
  • 字色:RGB(10, 10, 10) 接近纯黑
  • 左侧红色色块:正方形 + 与主条等高 + 紧贴左边缘
  • 整条横贯全宽(不是居中胶囊)
  • alpha 220-245(不透明感)

第 3 层:滚动新闻条(白底黑字 + 比主条窄)

┌──────────────────────────────────────────┐
│ ← 明日,海族避免上浮至阳光带,反向龙骨群...  │
└──────────────────────────────────────────┘

关键参数:

  • 同样白底黑字
  • 比主条窄(字号小 + padding 小)
  • 紧贴主条下方(间距 0-2%)

配色铁律

四色对比:白 + 黑 + 亮蓝 + 鲜红

用途RGB角色
主底(245,245,240)主新闻条底色
主字(10,10,10)主新闻条字色
央视蓝(40,110,195)频道标牌底色
央视红(210,30,30)时间块字色 / 播报方块

禁忌:

  • ❌ 半透明深色 + 白字(这是”现代视频字幕”风,不是央视新闻)
  • ❌ 深蓝 navy 大色块(这是 90 年代电视台演播室背景,不是字幕条本身)
  • ❌ 渐变高光金属质感(这是台标本身的属性,不是字幕条)
  • ❌ 风化做旧效果(这是杂志/纪录片封面风,不是新闻播报)

位置铁律(手机端竖屏 9:16)

元素y 位置理由
左上双标牌y 4-12%避开右上角内容(如气象图子图)
主新闻条y 65% 中线避开抖音/快手 UI 65-92% 遮挡区
滚动新闻条y 74% 中线紧贴主条下方

为什么不能放底部 85-95%:

  • 抖音点赞、评论、用户名、底部 nav 占 65-92% 区域
  • 真央视字幕在电视屏幕底部 80-95% 是因为电视屏幕没有 UI 遮挡
  • 手机端必须把字幕整体上移到 65-75%,牺牲一点”底部沉淀感”换可见性

字体选择

  • ✅ 思源黑体 Bold(SourceHanSansSC-Bold.otf)—— 央视黑体最佳代理
  • ✅ 微软雅黑 Bold(msyhbd.ttc)—— Windows 自带兜底
  • ⚠️ 思源宋体 Heavy(SourceHanSerifSC-Heavy.otf)—— 杂志/纪录片封面用,不适合新闻条
  • ❌ 任何风化效果 + 字符
  • ❌ 字间距 > 0.05(央视新闻字幕几乎是 0 字间距)

LLM 易踩偏差:凭”语义印象”做设计

这是核心教训。LLM 在被要求”做央视风格”时,会调用训练数据里最高频的”央视语义关联”——典型联想:

  • “央视” → 蓝色、深色、神秘、官方、严肃
  • “央视气象图” → navy + 卫星图 + 白色字幕
  • “央视新闻字幕” → 深底白字(错!)

实际真央视新闻主条是白底黑字——这是 LLM 没见过真实图像时无法推理出的。

应对策略

做”伪 X 视觉风格”项目时:

  1. 第一步必须找真实截图(不依赖文字描述)
  2. 观察具体细节:底色 RGB / 字色 / 形状 / 配色比例 / 位置占比
  3. 不凭”我以为的 X 风格”做设计——LLM 的”我以为”和”真实”差距巨大
  4. 如果做了几版用户反馈不像,立刻索要真实参考图,不要继续凭印象迭代

异界气象台 minitest 7 版迭代浪费了 4 版(v1-v3.3 都是凭印象),直到 v4 用户给出参考图才命中。早索图早收口。


适用边界

本范式适用于:

  • ✅ 模仿央视新闻 / 央视气象播报 / 央视体育新闻
  • ✅ 模仿其他国家国家电视台新闻条(BBC News / NHK / CNN—— 它们也是白底深字范式)
  • ✅ “伪权威播报”调性的 AIGC 短片

不适用于:

  • ❌ 现代抖音 / TikTok 风格短视频字幕(那是另一套范式)
  • ❌ 综艺花字 / 弹幕风格
  • ❌ 纪录片旁白字幕(思源宋体 + 风化才是这个方向)

关联文档

  • 字幕渲染代码母本:20_异界气象台_minitest/04_代码/字幕渲染_异界气象台.py(v4 版本)
  • v4 测试帧参照:20_异界气象台_minitest/04_代码/测试_v4_*.png
  • 大地之上对照(杂志风范式):大地之上_复用清单
  • 对照(影视双语字幕:无框、硬切、按语音定时):影视级双语字幕_中上英下与libass逐镜头烧录_v1

文档版本

  • v1 - 2026-05-14 - Cowork Claude 沉淀(异界气象台 minitest 制作期)
类型/风格审美