babyGao 手绘暖调科技叙事风格 · 设计说明
取样自 13 帧故事板缩略图（GPT 讲解课）。本文用文字完整说明这套视觉风格的构成，并重点拆解每一种手绘元素的画法，可作为插画 / 动画落地的执行规范。
一、一句话定调
把冷冰冰的科技，画成一张有人情味的手绘讲义。
这套风格服务于「AI / 科技」叙事。它刻意回避矢量的精确与商业插画的光鲜，转而用松弛的马克笔线条 + 扁平纯色块 + 大量留白，把抽象的「思考、搜索、生成、协作」翻译成温暖、可亲近、像有人在旁边给你边画边讲的画面。
核心气质关键词：手绘 · 温暖 · 极简 · 叙事 · 纸感。
二、色彩系统
整套画面只靠四种颜色支撑，没有渐变、没有第二强调色。
| 角色 | 名称 | 取值 | 用途 | 画面占比 |
|---|---|---|---|---|
| 主背景 | 沙米色 Sand | #E5DBCA |
铺满绝大多数镜头的底色，温暖、低饱和、略带米黄 | ≈ 72% |
| 唯一强调 | 陶土橙 Terracotta | #D2703F |
标记焦点、状态、情绪与「人」的痕迹 | ≈ 8% |
| 暗场 / 线条 | 墨黑 Ink | #16140F |
暗场景背景 + 所有手绘描边（偏暖的近黑，不是纯黑 #000） |
≈ 11% |
| 面板 / 气泡 | 纸白 Paper | #F4EFE6 |
气泡、卡片、界面面板的填充，是带暖调的米白而非纯白 | ≈ 9% |
用色铁律
- 先铺沙米色，再决定橙落在哪一个点。 背景永远是沙米色或墨黑，橙永远是后置的「点睛」。
- 陶土橙永远是少数派。 一旦它的面积超过画面一成，温暖感就会塌成廉价的「警示色」。克制是这套风格的灵魂。满幅橙只用于极少数高潮 / 转场帧。
- 没有渐变、没有高光、没有第二强调色。 体积与层次只靠「橙 / 黑 / 白」三种硬色块的并置切出来。
- 黑是暖黑。 描边与暗场用
#16140F这类带一点褐的近黑，配在沙米色上比纯黑更柔和、更像墨水而非数码黑。
三、插画总原则：手的痕迹，故意留着
这套画风的全部「质感」都来自对不完美的刻意保留。落地时反复回到四条原则：
- 线（Line）—— 松弛的马克笔线条。 描边粗细不均、收笔带勾，刻意不闭合、带轻微抖动。拒绝矢量的精确。
- 面（Fill）—— 扁平纯色填充。 没有渐变与高光，色块边缘允许微微溢出或留白，像手涂的马克笔。
- 形（Shape）—— 有机的剪纸轮廓。 主体是圆润的 blob，边角柔软、略微歪斜，像手撕出来的纸片，没有正圆和直角。
- 空（Space）—— 留白即是构图。 一帧一个主体，主体居中，四周大量空背景，让信息有呼吸的节奏。
四、手绘元素怎么画（核心）
下面逐一拆解每种元素的构造方法与参数取向。所有元素共享同一支「笔」：一支带轻微纹理、压感不均的马克笔 / 蜡笔质感的黑色画笔。
0. 通用笔触规范（所有元素共用）
- 笔刷：模拟马克笔 / 油性蜡笔，笔尖略钝，边缘带极轻微的颗粒纹理（不是光滑矢量描边）。
- 线宽：同一根线里粗细要变化（压感笔），主轮廓线大致是细节线的 1.5–2 倍粗。整体偏粗、敦实，不要纤细。
- 收笔：圆头收尾（round cap），转角处常带一个小钩 / 出头，线条端点不必精确对齐，允许交叉出头 2–4px。
- 闭合：轮廓故意不完全闭合，留出小缺口；矩形四角不闭口、略微出头，是「手画感」的关键。
- 抖动：每条直线都带 1–3px 的微抖，绝不用纯几何直线 / 正圆 / 标准圆角。
- 填色：纯色平涂，色块边缘可略微不与描边对齐（溢出或退让 1–2px），强化手涂感。无描边的纯色块（如 blob）也可以单独成立。
1. 思考 / 对话气泡（img, img_1）
- 形状：圆润的云朵状 blob，轮廓由几段外凸的弧线拼成，不是规整椭圆，每个气泡的胖瘦都略不同。
- 拖尾：气泡一角朝主体方向，跟 2–3 个由大到小的小圆点作为「思考」尾巴（对话气泡则是一条小三角尾）。
- 内容：气泡里不写真字，用手绘波浪线 / 涂鸦笔迹代替（见第七节「占位涂鸦」），表示「这里有内容 / 正在思考」。
- 状态表达：默认是纸白填充 + 黑描边；当它被「选中 / 激活 / 命中」时，整只气泡填充翻成陶土橙（描边可保留或转白）。这是全片的核心动效逻辑——用填色变化表达状态，而不是移动或加新颜色。
2. 剪纸的手（img_11, img_12）
- 造型：陶土橙的手掌 + 手指，剪纸 / 扁平处理，没有指甲、关节、阴影等细节，靠轮廓剪影识别动作。
- 画法：先用黑线勾一个简化的手势剪影（握笔、伸食指点击、张开鼓掌、比划），再整体平涂橙色；手腕处常断开 / 出画，暗示画外有人。
- 角色：手是这套风格里**「人」唯一的在场方式**——不画完整人物、不画脸。需要表现「使用、创造、协作、鼓掌」时，就让一只或几只手入画。
- 组合：多只手时呈向心 / 对话式排布（如三只手围着中心的橙色点会合），传达「协作 / 连接」。
3. 界面拟物（浏览器 / 文档 / 卡片）（img_3, img_4, img_5, img_6）
- 外框：用黑色手绘矩形表示一块「屏幕 / 窗口」，四角不闭合、略微出头、边线带抖。
- 内容块：窗口里用实心色块代替真实 UI——标题栏、图片位、文本行分别用橙色块、纸白块、黑色短线（代表文字行）摆出来，不画任何真实文字与图标细节。
- 配色：界面通常是「纸白底 + 黑描边 + 橙色重点块」；放在暗场（墨黑）里时，窗口本身可整块翻成橙色以跳出来。
- 层叠：多个窗口 / 卡片时轻微错位叠放，制造「一堆素材」的随手感。
4. 联网搜索条（img_6）
- 造型：一条大圆角的胶囊输入框（圆角是这套风格里唯一接近规整的形状，但仍带手感），黑色细描边、纸白填充。
- 元素：框内左侧一个地球 / 放大镜小图标（同样手绘简化），后面跟一行表示「输入文字」的真实小字或波浪占位。
- 语义：是「检索 / 联网 / 搜索网页」动作的固定符号。
5. 手绘数据可视化（img_8, img_9）
- 统一手法：饼图、柱状图、折线图全部手绘，给冰冷的「分析 / 数据」补上体温。
- 折线图：黑色手绘坐标轴（L 形，线带抖、不接死角），橙色折线连接几个手点的圆点数据点，线条松弛、转折不规整。
- 柱状 / 饼图：橙色实心块表示数据，扇形 / 柱子边缘手绘、不用精确角度。
- 承载：图表通常画在一张纸白卡片上，卡片本身也是手绘矩形。
6. 工具箱卡片（img_7）
- 结构：一个大的纸白 / 米色 blob（圆角多边形）里，并排放几张小卡，每张卡一个手绘小图标——代码
</>、饼图、文档。 - 语义：象征「一组能力 / 工具面板」。图标都是极简剪影，黑 / 橙双色，无细节。
7. 暗场星点（img_3, img_4）
- 用法：只在墨黑暗场景里出现——背景散布大小不一的白色小圆点（少量、随机分布，不成阵列）。
- 作用：制造空间感、夜空感与转场时的「呼吸」；亮场（沙米色）里不用。
8. 动势短线（img_2）
- 用法：在 blob / 主体旁边画几道短促的黑色小划线 / 弧线（类似漫画的动作线）。
- 作用：表示动作、声音、强调或「弹出」，让静止的扁平画面立刻有了动静与方向感。
五、构图：用色块摆镜头
在 16:9 画框里，节奏主要靠「色场」来调度：
- 单主体居中：默认构图。沙米色铺底，一帧只讲一件事，主体居中、四周全空。宁空勿满。
- 对角分割：把墨黑与沙米沿对角线切开，一半藏一半亮，瞬间制造戏剧张力与「虚 / 实」对比，常用于「展示成果、强调对比」的镜头。
- 满幅色场：整屏铺成陶土橙，留给强调 / 高潮 / 转场帧——情绪一次拉满，也给沙米色场景一个反差喘息。极少用。
- 状态对照（before / after）：同一构图、连续两帧，用「纸白 → 陶土橙」的填色变化表达变化与进展。动效不靠移动，靠填色。
六、字体与文案
画面里几乎没有正经排版，文字分两类：
- 占位涂鸦（不需要被读）：思考内容、文档正文等用手绘波浪线代替真实文字，只表示「这里有字」，不增加阅读负担。波浪线一般 2–4 行、长短错落，可混入一行橙色。
- 界面文案（需要被读）：真正要读的微文案（如
Look、Check this one、Searching the web…、I created an interactive Artifact）用中性无衬线（Grotesque），小写、简短、口语化，字重不抢戏，像产品截图里的 UI 标签。
字体取向：原片为中性无衬线。若需在文档 / 衍生物料中还原，推荐 Space Grotesk（拉丁 / 数字）+ Noto Sans SC（中文）保持利落感，手写注解用 Caveat。
七、复刻清单（Do / Don't）
该做
- ✓ 先满铺沙米色，再决定陶土橙落在哪一个点上
- ✓ 所有线条手绘，保留抖动、开口、出头与不均的笔压
- ✓ 用填色变化（白 → 橙）表达状态，而非引入新颜色或位移
- ✓ 只有暗场景才上墨黑，并撒几颗白色星点
- ✓ 一帧一个主体，宁空勿满
- ✓ 形状用圆润 blob 与剪纸轮廓，避免正圆 / 直角
别做
- ✕ 别用渐变、投影体积或第二个强调色
- ✕ 别让陶土橙的面积超过画面一成
- ✕ 别把线条拉成完美闭合的矢量
- ✕ 别在同一帧里塞进两件事
- ✕ 别加 emoji、卡通高光或花哨贴纸
- ✕ 别画人脸 / 完整人物——需要「人」时只用手