Manim 动画视觉设计规范：video-use 项目的 12 条核心原则、布局模板与配色字体指南

AI 技能/插件音视频视频处理人工智能【免费下载链接】video-useEdit videos with coding agents项目地址https://gitcode.com/GitHub_Trending/vid/video-use点击查看免费下载本文是 video-use 仓库中manim-video技能Skill的视觉设计参考文档skills/manim-video/references/visual-design.md的完整展开用于指导 3Blue1Brown 风格的数学与技术动画制作。它回答如何让每一个画面都清晰、克制、可读这一核心问题从 12 条设计原则、6 种布局模板、3 套官方配色方案到 monospace 字体选型与 Pango 渲染细节再到逐帧视觉层级自检。读完本文你可以照着规范写出具有一致视觉语言、可直接用于视频生产的 Manim 场景代码并在渲染前自查画面质量。一、为什么要有一份视觉设计规范在 video-use 的 manim-video 技能中Manim 负责把数学概念、算法、架构图变成每一帧都在教学的动画。技能文档开篇的 Creative Standard 明确指出先想叙事再写代码——每一个动画都要揭示结构纠正某个误解制造aha moment首次渲染就达到视觉清晰与美学统一——不允许看起来像 AI 生成的幻灯片的输出所有场景共享统一视觉语言——同一套配色、一致的字体规格、匹配的动画节奏。一份技术上正确但每帧都用随机颜色的视频在美学上依然是失败的。这正是visual-design.md存在的意义它把好看拆解成可执行、可检查的规则。规范共分四个部分12 条核心原则、布局模板、配色方案、字体选择外加一个视觉层级自检清单。下文逐一展开并结合仓库内的 SKILL.md、production-quality.md、mobjects.md等文档做源码级印证。二、12 条核心视觉设计原则原文档给出 12 条原则它们是所有场景代码的宪法。逐条展开先几何、后代数Geometry Before Algebra——先展示形状再展示方程。视觉记忆的编码速度远快于符号记忆当观众先看到几何模式再看到公式时公式会显得水到渠成SKILL.md 的 Creative Standard 同样强调这一点。透明度分层Opacity Layering——主元素PRIMARY1.0、上下文元素CONTEXT0.4、结构性元素坐标轴、网格GRID0.15。永远不要把所有东西都以全亮度展示。大脑按显著度分层处理视觉信息通过亮度即可引导注意力无需多余装饰。每场一个概念One New Idea Per Scene——每个 Scene 只引入一个概念。当需要表达多个点时拆成多个场景详见scene-planning.md的叙事弧结构。空间一致性Spatial Consistency——同一个概念在整个视频中始终占据屏幕同一区域。观众建立起这个位置 这个含义的潜意识映射后理解成本会大幅下降。颜色即含义Color Meaning——颜色赋给概念而不是对象。如果速度是蓝色那么它从头到尾都保持蓝色。一旦某种颜色被赋予含义它在后续所有场景中都不能被挪用给其他概念production-quality.md的Color meaning consistency一节对此有专门强调。渐进披露Progressive Disclosure——先展示最简单版本再逐步叠加复杂度。对应 SKILL.md 的创作方向也对应equations.md中分步推导的模式Write(step1)→wait→TransformMatchingTex(step1, step2)。变换而非替换Transform, Dont Replace——用Transform/ReplacementTransform表现元素之间的关联而不是把旧元素擦掉再写新的。这既符合认知观众看到的是演变而非跳跃也是animations.md中强调的规范动作。留出呼吸空间Breathing Room——展示新内容后至少self.wait(1.5)。SKILL.md 更具体地给出节奏表关键方程揭示后wait(2.0)aha moment 揭示后wait(3.0)。观众需要时间吸收刚出现的内容永远不要连续播放动画。视觉重量平衡Visual Weight Balance——不要把元素全部堆在一侧。与布局模板见下节配合使用全屏居中、左右分栏、上下分区让画面重心稳定。一致的动作词汇表Consistent Motion Vocabulary——选取一小撮动画类型如Write、FadeIn、Create、GrowFromCenter并反复复用形成风格辨识度但相邻场景不要使用完全相同的动画类型production-quality.md的Variety audit要求Scene 3 若全部用 WriteScene 4 就应换 FadeIn 或 Create。深色背景、浅色内容Dark Background, Light Content——#1C1C1C到#2D2B55的背景最大化对比度。注意在深色背景上白底上鲜艳的颜色会显得发闷应选用明亮饱和的颜色详见配色章节。有意图的留白Intentional Empty Space——每帧至少保留 15% 的空白区域。空不是浪费而是让主要内容成为唯一视觉焦点的手段。三、六种布局模板原文档定义了 6 种可复用布局每种都明确了适用场景和坐标习惯。这些模板与 SKILL.md 中每场使用不同布局、不要总是居中的 per-scene 变化要求直接配合。FULL_CENTER全屏居中一个主元素居中标题在上方注释在下方。适用于单一方程、单一示意图、标题卡。title Text(Fourier Series, font_size48, colorPRIMARY, weightBOLD, fontMONO) title.to_edge(UP, buff0.5) # 标题区y ∈ [2.5, 3.5] main Circle(radius1.5, colorPRIMARY).move_to(ORIGIN) note Text(Convergence at discontinuities, font_size18, colorDIM, fontMONO) note.to_edge(DOWN, buff0.5) # 注释区y ∈ [-3.5, -2.5]LEFT_RIGHT左右分栏两个元素并排分别位于x-3.5与x3.5。适用于方程可视化、前后对比、双方案比较。equation MathTex(r\nabla L \frac{\partial L}{\partial w}).move_to(LEFT * 3.5) diagram Circle(radius1.5, colorBLUE).move_to(RIGHT * 3.5)TOP_BOTTOM上下分区主元素位于y1.5支撑内容位于y-1.5。适用于概念示例、定理分情况讨论。GRID网格通过arrange_in_grid()排布多个元素。适用于对比矩阵、多步骤流程mobjects.md中Group/VGroup均支持arrange_in_grid()。items VGroup(*[Square(side_length1, colorcolor) for color in palette]) items.arrange_in_grid(rows2, cols3, buff0.5)PROGRESSIVE渐进展开元素逐个出现沿 DOWN 方向排列并对齐到 LEFT。适用于算法、证明、分步过程。配合animations.md的ShowIncreasingSubsets或LaggedStart实现逐条揭示。lines VGroup(*[Text(line, font_size24, fontMONO) for line in steps]) lines.arrange(DOWN, aligned_edgeLEFT, buff0.4) self.play(LaggedStart(*[Write(l) for l in lines], lag_ratio0.3, run_time3))ANNOTATED_DIAGRAM带标注的示意图中央放示意图周围是带箭头的浮动标签。适用于架构图、带标注的插图。箭头与标签的组合手法详见decorations.mdArrowGrowArrow入场、label.next_to()定位标注遵循出现 → 停留 → 消失的生命周期避免变成视觉噪音。四、配色方案原文档提供 3 套官方调色板SKILL.md 中另有一套Monochrome极简方案一并列出调色板背景 Background主色 Primary辅色 Secondary强调色 Accent适用场景Classic 3B1B#1C1C1CBLUE#58C4DDGREEN#83C167YELLOW#FFFF00通用数学/计算机科学Warm Academic#2D2B55#FF6B6B#FFD93D#6BCB77亲和、易接近的内容Neon Tech#0A0A0A#00F5FF#FF00FF#39FF14系统、架构类内容MonochromeSKILL.md#1A1A2E#EAEAEA#888888#FFFFFF极简风格# Classic 3B1B 完整定义来自 visual-design.md BG#1C1C1C; PRIMARYBLUE; SECONDARYGREEN; ACCENTYELLOW; HIGHLIGHTRED深色背景上的颜色表现production-quality.md对深色背景#0D1117、#1C1C1C给出了明确的选色警告在深色背景上表现良好的颜色明亮且饱和的#58C4DD、#83C167、#FFFF00、#FF6B6B在深色背景上不可用的颜色#666666几乎不可见、#2244AA太暗。同时它重申了透明度分层规范结构元素坐标轴、网格opacity0.15上下文元素0.3-0.4主元素1.0。场景内的颜色使用规范把颜色常量定义在文件顶部跨场景复用scene-planning.md的 Cross-Scene Consistency 模式每个场景从调色板中选取不同的主导色避免所有场景千篇一律一旦PRIMARY在 Scene 1 代表模型它在所有场景中都代表模型严禁中途改作他用。五、字体选择为什么必须用等宽字体这是原文档着墨最多、也最具实操价值的一节。结论非常明确所有文本一律使用等宽monospace字体。根本原因Pango 渲染器的字距缺陷Manim 的文本渲染走 Pango 管线对比例字体Helvetica、Inter、SF Pro、Arial在任何字号和分辨率下都会产生破损的字距broken kerning字符相互重叠、间距不一致。这是 Pango 的固有局限不是 Manim 的 bug。等宽字体字符宽度固定从设计上就杜绝了字距问题。推荐字体表用途首选字体回退字体所有文本默认MenloCourier New、DejaVu Sans Mono代码、标签JetBrains Mono、SF MonoMenlo数学公式用MathTex走 LaTeX 渲染不经过 Pango—字体可用性与默认选择macOSMenlo预装、SF MonoLinuxDejaVu Sans Mono预装、Liberation Mono跨平台JetBrains Mono需手动安装。Menlo是最安全的默认值——macOS 预装Linux 系统会自动回退到 DejaVu Sans Mono。SKILL.md 与production-quality.md都要求在文件顶部定义一次常量并在全项目复用MONO Menlo # 定义一次全文件复用 title Text(Fourier Series, font_size48, colorPRIMARY, weightBOLD, fontMONO) label Text(n1: (4/pi) sin(x), font_size20, colorBLUE, fontMONO) note Text(Convergence at discontinuities, font_size18, colorDIM, fontMONO) # 数学公式永远用 MathTex不用 Text equation MathTex(r\nabla L \frac{\partial L}{\partial w})何时可以破例使用比例字体只有一种例外大号标题文本font_size 48且字符串很短1-3 个单词。除此之外——标签、描述、多词文本、小字号——一律用等宽字体。精细文本控制MarkupTextText()不支持letter_spacing或字距参数。需要精细控制时改用MarkupText Pango 属性。注意 Pango 单位字距单位为 1/1024 磅point因此letter_spacing6000≈ 5.86pt# 字距控制Pango 单位1/1024 磅 MarkupText(span letter_spacing6000HERMES/span, font_size18, fontMenlo) # 加粗指定单词 MarkupText(This is bimportant/b, font_size24, fontMenlo) # 给指定单词上色 MarkupText(Red span foreground#FF6B6Bwarning/span, font_size24, fontMenlo)最小字号18font_size18是任何分辨率下可读文本的下限。低于 18字符在-ql480p下会模糊即使在-qh1080p下也勉强可读。SKILL.md 的 Typography Scale 给出了完整字号体系可对照使用角色字号用途Title48场景标题、开场文字Heading36场景内小节标题Body30说明文字Label24标注、坐标轴标签Caption20字幕、细注六、每帧视觉层级自检清单原文档以逐帧自检收尾5 个问题构成一套可执行的验收标准。对每一帧问一遍观众要看的唯一重点是什么最亮/最大的那个什么是上下文压暗到 0.3-0.4什么是结构性的压暗到 0.15是否保留了足够留白15%所有文本在手机尺寸下是否可读配套的硬性约束production-quality.md为这份清单提供了量化依据坐标预算默认 16:9 画幅约 14.2 宽 × 8.0 高扣除边距后可用区域为x ∈ [-6.5, 6.5]、y ∈ [-3.5, 3.5]顶部标题区y ∈ [2.5, 3.5]底部注释区y ∈ [-3.5, -2.5]主内容区x ∈ [-6.0, 6.0]、y ∈ [-2.5, 2.5]同屏元素硬上限6 个。需要更多时把旧元素压暗到 0.3、移除已完成使命的元素或拆成两个场景长文本防溢出对可能超长的文本设置最大宽度text.set_width(config.frame_width - 1.0)文本防重叠.to_edge()的buff 0.5同一位置出现新文本时用ReplacementTransform而非直接Write覆盖。文本在复杂背景上的可读性当标签叠加在图表、图形之上时两种方案mobjects.md# 方案一给文本加黑色背景描边3B1B 的做法 label.set_stroke(BLACK, width5, backgroundTrue) # 方案二半透明背景块 bg BackgroundRectangle(equation, fill_opacity0.7, buff0.2, colorBLACK)七、把规范落到代码里与流水线的衔接视觉规范不是孤立的审美条目它贯穿 SKILL.md 的完整流水线PLAN → CODE → RENDER → STITCH → AUDIO → REVIEW1. 规划阶段plan.md在写代码前就定好叙事弧、每场布局、调色板与含义分配PRIMARY 主概念等并参考scene-planning.md的规划模板。2. 编码阶段script.py文件顶部统一定义颜色、字号、字体与动画节奏常量scene-planning.md的 Cross-Scene ConsistencyBG #1C1C1C PRIMARY #58C4DD SECONDARY #83C167 ACCENT #FFFF00 TITLE_SIZE 48 BODY_SIZE 30 LABEL_SIZE 24 FAST 0.8; NORMAL 1.5; SLOW 2.5 MONO Menlo class Scene1_Introduction(Scene): def construct(self): self.camera.background_color BG title Text(Why Does This Work?, font_sizeTITLE_SIZE, colorPRIMARY, weightBOLD, fontMONO) self.play(Write(title), run_timeNORMAL) self.wait(1.0) self.play(FadeOut(title), run_time0.5)每个场景还需满足 per-scene variation主导色不同、布局不同、入场动画不同在 Write / FadeIn / GrowFromCenter / Create 间轮换、视觉密度有疏有密。3. 渲染与检查阶段rendering.md明确指出-ql480p15下文本字距与可读性明显变差——对文本密集场景应在-qm720p下输出预览静帧检查字距与重叠-ql只用于验证布局与节奏。渲染前按production-quality.md的 Pre-Render 清单逐项打勾所有场景设置背景色、每次重要动画带add_subcaption()、无小于 18 的文本、无比例字体、所有.to_edge()的buff 0.5、场景结尾干净 FadeOut、揭示后self.wait()、全程使用颜色常量、统一渲染质量标志。结语视觉设计规范的终极目标是让第一次渲染就接近成片。12 条原则回答如何引导注意力6 种布局模板回答内容往哪放31 套调色板回答用什么颜色、为什么等宽字体规则回答文本为何必须如此而逐帧自检清单把以上一切浓缩为 5 个可回答的问题。配合仓库中的 SKILL.md、animations.md、mobjects.md、production-quality.md等参考文档即可在编码、渲染、审查全流程中稳定产出视觉统一、信息清晰的 Manim 动画。赞分享AI 技能/插件音视频视频处理人工智能【免费下载链接】video-useEdit videos with coding agents项目地址https://gitcode.com/GitHub_Trending/vid/video-use点击查看免费下载相关推荐justfile 快速上手8 个小节写完你的第一个任务脚本justfile 快速上手8 个小节写完你的第一个任务脚本 just 是一款命令运行器把常用命令写进 justfile 变成食谱一句 just buildCLI开发工具任务调度速查表视觉设计Posit Cheatsheets中的配色与布局黄金法则速查表视觉设计Posit Cheatsheets中的配色与布局黄金法则 Posit速查表是R语言生态中不可或缺的视觉学习工具其精心设计的配色方案和布局原则让文档教程Bisq去中心化交易所揭秘无需信任第三方的终极交易方案Bisq去中心化交易所揭秘无需信任第三方的终极交易方案 在数字货币交易领域信任问题一直是用户面临的最大挑战。中心化交易所频繁发生的黑客攻击、资金冻结甚至跑路区块链DeFi金融科技创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考