# 《AI在他们手里》栏目视觉规范

> 原创栏目企划 / 尚未拍摄 / 已完成策划及视觉预演。当前图像为内置生图生成的概念预演，网页字标、身份条、字幕规则与信息组件为本项目设计，不代表真实采访、实际测试或既有传播成绩。封面中的“程序员”“他”指首期拟邀人物方向，受访者身份尚待确定。参考项目只用于风格研究，原创设计与外部案例分别标注。

## 1. 设计任务与选择

设计要帮助观众同时看懂两件事：这是一个具体的人；他面对的是一个具体的工作任务。真实生活用自然光、工作物件、停顿和环境声建立；数字部分只做解释、核查和提示。任何包装都应能回答“它帮助观众看懂了什么”。

| 比较项 | A「现场批注 FIELD NOTES」· 主方案 | B「生活双栏 EVERYDAY SPLIT」· 比较方案 |
|---|---|---|
| 核心概念 | 摄影机像一本现场笔记；纸白底、细框、蓝色批注跟随真实物体，记录任务、判断与未决问题 | 生活与数字并排；人物一侧保留生活质感，另一侧用暖白卡片解释步骤，形成温和的双栏对照 |
| 气质 | 克制、具体、有观察感，接近年轻科技媒体与人物微纪录的交集 | 更亲近生活方式媒体，明亮、柔和，适合办公与个体经营场景 |
| 主要识别 | 炭黑字标 + 一道钴蓝下划线 + 期数/现场批注角标 | 靛紫字标 + 两个错位矩形 + 暖珊瑚小标签 |
| 优势 | 采访、手部、录屏和测试分支都能共用一个系统；与现有作品集暖灰档案式语言相接 | 人物与工具的区别直观，适合非技术观众；亲和力较强 |
| 执行成本与风险 | 拍摄成本低，批注可以在剪辑模板复用；需控制标签密度，避免像教程截图 | 双栏在手机上容易让屏幕变小，录屏必须局部放大；连续分屏可能削弱人物情绪 |
| 选择 | **采用**。在一分钟内能兼顾纪实可信度、信息清晰度与系列识别 | 保留为后续生活向篇目的替代方向；首期不混搭两套字体、色彩与转场 |

主方案不依赖霓虹、科技网格或机器人形象。科技感来自屏幕与真实物件的对位、数字信息的精确组织；人物的工作环境始终是主体。

## 2. A 现场批注：色彩与对比

| 色名 | HEX | 用途 | 使用约束 |
|---|---|---|---|
| 纸白 | `#F2F0E9` | 页面、任务卡、身份条底色 | 占包装底色约 65–75%，保持呼吸感 |
| 炭黑 | `#202522` | 标题、字幕底、正文 | 正文与字幕主色；黑底用纸白字 |
| 钴蓝 | `#315BFB` | 观察框、关键动词、页码与批注 | 建议每画面只突出一处；小字号避免蓝底黑字 |
| 赭橙 | `#D47546` | 暂停、风险、待核实的提示 | 不以单独色块代表结论；与明确文字并用 |
| 灰绿 | `#84958A` | 空间、衣物、辅助图层 | 不作为白底小字颜色，主要作大面积填色 |
| 辅助灰 | `#687269` | 文档说明、次级说明 | 视频关键字幕仍用炭黑/纸白组合 |
| 分隔线 | `#CACCC2` | 网格、细线、卡片边框 | 用于结构，不能承担关键信息 |

小字优先用炭黑与纸白。纸白/炭黑对比约 13.7:1；纸白/钴蓝约 4.6:1（按 sRGB 计算，四舍五入）。灰绿与赭橙不承担低字号正文。用“待验证”“需修改”“无帮助”等文字表达状态，不只靠红绿区分。

建议画面中的真实影像不统一染成绿色。拍摄后只做自然白平衡、肤色与曝光校正，包装色与生活物件自然相邻。

## 3. A 字体与排版

- 中文：优先使用系统「微软雅黑 / Microsoft YaHei」「苹方 / PingFang SC」；已有字体条件允许时用「思源黑体 / Noto Sans CJK SC」。粗体用于标题，正文用常规字重，不使用伪斜体。字体分发与嵌入前核实授权；本次 SVG 不打包收费字体。
- 英文：网站可沿用已有 `Montserrat SemiBold`；英文字号小于中文标题，作结构导航。没有该字体时使用系统 sans-serif，页面必须能脱网阅读。
- 代码、时间码：沿用网站已有 `JetBrains Mono`；不要将大段代码缩成手机不可读的小字，录屏只显示本镜头需要的局部。
- 1080×1920 视频标题：主标题 80–112 px；单屏 2–3 行；行距 1.06–1.15；每行尽量 6–10 个汉字，按画面调整。
- 关键字幕：56–64 px，最多两行，行距 1.18–1.28；每行约 10–14 个汉字，尽量按语义断行。字数更多时删减或拆镜，不靠缩字解决。字幕上屏长度依据语速、停顿和手机实看确定。
- 任务提示卡：标题 38–46 px，辅助信息 30–36 px。画面中的任务卡和软件界面是被摄物，不等于字幕；最终剪辑对关键信息另作大字放大。
- 作品集页面：长文中文正文 16–18 CSS px；案例摘要正文 14–16 CSS px，手机不低于 14 px；辅助标签 10–12 px。正文行高 1.65–1.85；桌面内容宽度不超过约 1200 px，长段落每行约 28–40 字。手机单栏、24 px 左右边距，标签不承载关键信息。
- 本版为生图8镜联系板，网页以CSS分成8个9:16镜位，并单独显示导演备注。图内道具、屏幕与文字不作为真实任务证据。正式成片保留关键字幕与必要身份条即可。

## 4. A 字标与系列识别

主字标为「AI 在他们手里」，使用中文黑体粗字重。`AI` 与汉字基线一致，不做金属渐变。手写式钴蓝短线置于标题下，表示观察与标记；线条控制在标题宽度的 50–70%，不穿过笔画。英译 `AI IN THEIR HANDS` 只用于求职展示与封面微标，不增加观看负担。

期数统一为 `FIELD NOTES / 001`，正式发布可用中文「第 01 回」。不要把“已拍摄”“实测完成”写进标识。未来每期允许更换主场景，但保留相同字标、期数位置和信息层级。

## 5. A 摄影构图与 9:16 安全区

视频母版 1080×1920，建议采集 4K 竖屏或足够分辨率的可裁切画面。项目预设重要信息区为 **x=72–900、y=180–1530**，用于避让常见右侧交互区与底部文案；这是项目工作预设，不是抖音官方统一规范。发布前必须用当时实际抖音界面预览，再按设备裁切调整。

1. 采访中近景：眼睛约在画面上 1/3，视线略离镜头，不把人物压在最右；给看向的方向留余量。把键盘、窗、衣物与工作物件留一点，避免只有胸像和虚化背景。
2. 工作流中景：同时看见人物、手和任务对象。先记录完整动作，再补近景，避免为漂亮镜头让人重演反应。原工作有中断时允许等待和暂停。
3. 肩后：看得见人如何面对屏幕，屏幕不能成为难以辨认的小矩形。若要解释细节，切获授权录屏或局部放大，禁止单纯拍屏替代一切。
4. 细节：手、鼠标、纸条、核查动作及返工，比软件启动动画更有叙事信息。记录犹豫、撤销、查文档、选择不用 AI 的动作，不能把它们后配成不同事实。
5. 用窗光或一个柔光源补光，保留轻微空间层次；避免 RGB 灯管和过度磨皮。录音先于镜头复杂度。

## 6. A 包装组件

**人物身份条。** 靠左，x≈72、y≈1150–1280，最大宽 680 px；纸白实底、蓝色 6 px 竖线；姓名 42 px/粗，职业 32 px/常规。首个完整人物镜头出现约 2 秒；与字幕错位，视必要缩短或移位。姓名、职业、任职机构与署名方式逐一核实；未确定时只写「姓名待确认 / 程序员（拟邀方向）」。

**字幕。** 默认纸白字+炭黑实底（或在复杂实拍上用足够不透明底），四周留 20–28 px 内边距；不压眼睛、手部操作和测试结果。一个语义单位最多突出一处，用蓝色块或下划线。人物口述按原意精简，合并断句不能改变条件、程度和结论；拟定旁白不得伪装为实话。

**信息图形。** 每屏一个检查问题；流程使用“任务→输入→输出→验证→决定”五步。矩形代表任务/输出，蓝框代表当前关注点，虚线代表待验证。分支节点统一写“可用？/需修改？/无帮助？”；现场结束前都带问号，最终结论附具体条件与检查证据。用词优先“这次任务中”，避免泛化为职业结论。

**录屏。** 一个镜头只显示需要的窗口区域。浏览器标签、账号、路径、API 密钥、聊天与客户数据提前检查；必要时用不含敏感数据的等价演示，并明确标注“脱敏演示”。画面包装不能遮挡足以改变理解的报错或提示。代码区域显示是示意时必须写“界面结构示意 / 待替换”。

**身份与事实标签。** 作品集统一保留“视觉预演 · 非实拍”；真实节目正式上线时应移除预演标签，但仍在脱敏、补拍、重现等对应画面标注实际性质。

## 7. A 动态语言

- 主要切换是动作切点、视线切点和环境声延续。拿起杯子、点击鼠标、手离键盘可作为转场动机；不额外制造成功音效。
- 批注出现以 140–240 ms 的描边/轻滑入完成，位移不超过约 24 px，ease-out，不弹跳；每次只入一层。
- 录屏局部放大 1.25–1.6×，在 220–360 ms 内完成，放大前后保留对应边缘。超出可读像素就补采高分辨率录屏。
- 典型四帧：0 ms 真实窗框；60 ms 蓝框沿窗框出现；140 ms 蓝框移动对齐显示器；220 ms 切入同尺寸录屏局部。见情绪板底排。实际剪辑以动作和旁白停顿调整，毫秒为模板预设。
- 身份条约 180 ms 淡入，末尾 120 ms 淡出；片尾字标 0.6–1.0 秒内完成，不让片头占掉前三秒。
- 声音以键盘、鼠标、房间底噪、人物原声为主；音乐低于对话，保持自然。报错、返工与“决定不用”不加嘲笑性音效；判断也不加赢得比赛的音效。
- 网页中的动效遵循减少动态偏好；情绪板本次交付为静态关键帧，没有声称交付已完成视频。

## 8. B 生活双栏：完整替代规则

**概念。** 用两个相邻的区域表达“生活现场 / 数字工作”，边界可以随人物动作从 60:40 变成 30:70。片子仍以人物完整画面进入，只有需要比较输入或输出时才分栏。

**色彩。** 暖白 `#FAF6F0`（主底）、深褐黑 `#282638`（标题/字幕）、靛紫 `#6553A6`（步骤与界面）、珊瑚 `#DC8065`（人物焦点）、砂色 `#D8C7B2`（线与空间）、浅紫 `#E8E1F2`（数字卡片）。黑字用在暖白上；小白字优先用深褐黑底，珊瑚不作为小字号文字底色。

**字体。** 中文系统苹方/微软雅黑，中等字重标题，正文常规字重；英文使用 Montserrat Medium，数字仍可用 JetBrains Mono。中文主标题 84–104 px，稍松行距 1.18，倾向左齐、不大面积全粗体；正文/字幕 56–64 px。长文正文 16–18 px，案例摘要 14–16 px。与 A 的区别是更松的留白、更柔和的圆角和较少的线性批注。

**字标。**「AI 在他们手里」左齐，左上角两块错位矩形：珊瑚表示人、紫色表示数字。两块只相邻不重叠成人脸或机器人，保留清晰小尺寸识别。主字标不可使用未经授权字体的轮廓。

**构图。** 主体在左约 55–60%，右侧卡片解释；切入双栏时可以把人物放上 60%、屏幕下 40%，手机优先上下分栏而非左右各半。眼睛仍在上部，卡片不遮手与动作。无数据时显示任务、原话或步骤，不能为了排版补造对比数值。

**字幕与身份条。** 身份条为暖白圆角 12–18 px 卡片，珊瑚短线标人物，姓名 42 px/职业 32 px。字幕用深褐黑实底与暖白字，关键词用浅紫底深褐黑字。字幕与解释卡不得同时占满两个区域。每段最多一个解释卡。

**信息图。** 两栏标题为“要完成的事 / 现场怎么做”，不写有/无 AI 的虚假对照。需要前后对比时应有同任务、同条件的记录，并列说明前提。步骤用 1/2/3 序号与 2 px 分隔线；未检验节点用问号而不是绿色勾。

**动态。** 用 180–280 ms 的卡片横向/纵向展开，圆角保持不变；两栏边界跟随手部或窗口移动。收束时回到全幅人物画面，最后出现双矩形字标。无甩镜、旋转或频繁挤压人物。色彩与动效不与 A 混用。

**未选为首期主方案的原因。** 程序员篇的代码、录屏和边界核查需要足够大面积；持续双栏容易把人物与信息同时压小。A 能随任务切换全幅生活、录屏和单点批注，更适合有限经费的一机位执行。

## 9. 两款封面与传播假设

| 封面 | 主问题 | 传播切入点 | 采用条件 | 需实测的假设 |
|---|---|---|---|---|
| A / `cover-a.svg` | AI接了哪一步？ | 具体职业 + 具体任务，降低普通观众理解门槛；建立系列第一印象 | 若正式采访能展示一个可公开的具体任务，优先采用 | 是否能让非程序员也点开；不能预言点击率 |
| B / `cover-b.svg` | 答案出来了，谁来检查？ | 人的检查与判断形成未闭合问题；把注意力从产品移回劳动 | 若拍摄确实包含生成后检查过程可采用；若没有代码生成则改“AI 给出答案之后” | 是否吸引有实际使用经验的观众；不能暗示已发现某项结论 |

两款均为 1080×1920，重要标题在上部偏左，主体在中段，底部留给平台文案。当前封面文字以方案口吻显示，明确“首期提案 / 视觉预演 · 非实拍”。实际发布前用真实获授权人物图替换示意，标题按现场事实修订；不得直接用匿名插画声称人物受访。

## 10. 当前生图版资产与旧稿保留

当前网页全部视觉画面使用内置生图（ImageGen），不是旧SVG栅格化。新资产目录为 `assets/generated-v2/`：

- `hero.png`：1672×941，匿名人物工作场景概念主视觉。
- `moodboard.png`：1672×941，生活场景、工作细节、字标、色彩及转场意图的情绪板。
- `directions.png`：1672×941，现场批注与生活双栏比较。
- `storyboard.png`：1330×1182，4列×2行，8个约9:16关键镜位；网页按镜位裁切显示。
- `cover-a.png`、`cover-b.png`：941×1672，约9:16封面预演。
- `prompts-v2.md`：完整提示词、生成方式及真假界限记录。

图片内的文字与手写批注属于概念表达；准确字号、色值、栏目用语和主副标题以本规范与HTML精排为准。没有用图像中的空表、计时道具或界面状态冒充真实测评数据。

人物为虚构匿名角色，图中工位和屏幕不是拍摄现场、受访者或实际工具输出。网页与图库均显著标记“AI生成概念预演 / 非实拍”。正式拍摄后以获授权的真人、原始录屏和真实结果替换。

旧 `assets/*.svg`、同名旧PNG和原提示源文件均保留作为V1归档，不再作为当前网页视觉。文档更新前版本保存于 `docs/history-v1/`。此前分镜时间与叙事机制保留，未重复改写原企划。