# 等距信息图（isometric-infographic）

> 等距视角下的小世界：方块、管道、小人、数据塔，一层一层搭起来，把一件复杂的事讲清楚。
> 参照（只学语法）：等距插画、科技公司的架构插图、城市模拟游戏的视角。不照搬具体插画师作品。

## 本质 / 不是什么
- 本质：**固定的等距投影**（30° 轴线），没有透视变形；元素是干净的几何体，三个面用三个明度；信息靠「搭建」「流动」「点亮」来讲。
- 不是：随意的 3D 透视；也不是堆满元素的复杂插画。

## 辨识信号：每支片子挑 2–3 个
| 信号 | 长什么样 | 适合的主题 |
|---|---|---|
| 搭建 | 方块从上方落下，一层层搭成系统 | 从零到一、架构 |
| 管道和数据流 | 数据点沿管道匀速流过 | 流程、因果、传输 |
| 点亮 | 模块按顺序亮起强调色 | 激活、上线 |
| 剖开的方块 | 一个方块拆开露出内部结构 | 原理、内部机制 |
| 小人和小车 | 小世界里的居民沿路径走动 | 用户、场景 |
| 数据塔 | 柱子从地面升起表示数量 | 规模、增长 |
| 地块和道路 | 等距地面上划出区块和街道 | 城市、生态 |
| 浮空图标 | 模块上方悬浮的图标和标签 | 功能说明 |
| 连线网络 | 模块之间亮起的连线 | 集成、网络 |
| 昼夜变化 | 同一个小世界的光照从白天变到夜晚 | 时间、运行 |

规则：
- 每支挑 2–3 个，至少一个不在下面「最俗的版本」里。
- 信号从主题里选，不按顺序全上。
- 等距投影本身是这种风格的约束，全片只用一种投影；信号挑的是讲什么、怎么讲。

## 这个风格最俗的版本
- 画面：浅灰底上一块地面，蓝色方块和橙色数据流，服务器、云、手机三个图标连成一条线，结尾拉远出全景。
- 声音：轻快的 marimba 加柔和的电子拍子。
- brief 的 style 一栏写明这支片子翻掉了哪几条，或者为什么刻意保留（比如用户要的就是经典版）。保留时，把力气花在构图、镜头、节奏或一个意外的记忆点上。

## 适配
- 用途：产品宣传（讲架构、流程、生态）、讲解型短片、数据可视化。
- 内容：SaaS 架构、物流、能源、城市、供应链、开发流程。

## 技术路线
Canvas 2D 或 SVG，自己写等距投影函数 `iso(x, y, z) → [sx, sy]`（sx = (x − y)·cos30°，sy = (x + y)·sin30° − z）。也可以用 Three.js 的正交相机，但 2D 更可控、渲染更快。画的顺序按深度排序（x + y + z 从小到大）。

## 材质与渲染
- 每个方块三个面：顶面最亮、左面中间、右面最暗（同一色相的三个明度）。
- 细描边可选（同色更深一档）；地面网格非常淡。
- 小人和图标用最简几何（圆柱 + 球），不要画五官。
- 数据流：沿管道移动的点或短线段，按时间偏移（`(t * speed + i * gap) % length`）。

## 配色
下面的色值是示例，看思路，不要原样照抄。
- 底 `#F3F1EC` / 方块 `#FFFFFF`·`#E4E1DA`·`#CFCAC0` / 强调 `#2F6BFF` / 数据流 `#FF7A1A`
- 底 `#0F1626` / 方块 `#26324D`·`#1C2640`·`#141C30` / 强调 `#3EE6B0`
- 规则：结构用中性色，只有「正在发生的事」（流动、点亮、新增）用强调色。
- 推导：结构用三个明度的中性色（浅底或深底都可以），强调色只给正在发生的事，数据流可以用第二个颜色。强调色从品牌来；蓝加橙是最常见的组合。

## 字体
标签用干净的无衬线体（Manrope、DM Sans），字也可以贴在等距平面上（用等距变换矩阵 `ctx.setTransform` 斜切）。

## 运动
- 搭建：方块从上方落下，弹簧 `{2.4, 0.7}` 落定，带一点挤压；按依赖关系错峰。
- 点亮：面颜色渐变到强调色，加一次脉冲。
- 流动：持续匀速的数据点（匀速在这里是对的，它表达的是「持续运行」）。

## 画面怎么活
- 管道和连线里的数据点匀速流动；小机器、小屋的指示灯按拍闪；小人或小车沿路径来回走，像这个小世界里的居民。
- 活的东西都要跟信息有关：流动的方向就是数据的方向。

## 镜头语法
| 镜头运动 | 表达什么 | 适合哪类内容 |
|---|---|---|
| 正交相机平移 | 沿流程走 | 步骤、数据流 |
| 缓慢放大到一个模块 | 聚焦一个环节 | 功能细节 |
| 拉远看全景 | 生态全貌 | 总结、结尾 |
| 绕 z 轴 90° 旋转（重新排序深度） | 换个视角 | 对比、转折 |

## 声音调色板
清脆的 pluck、木质感的 click（`rim`、`mallet({ material: 'wood' })`，或短 `tom` + 高通）、方块落地的轻 `boom`、流动时的轻柔铺底。第 1 档合成即可。

律动与和声（举例，不止这些）：直拍或轻 swing，十六分音符的机械感；大调、Lydian；`mallet({ material: 'wood' | 'marimba' })` 就是木质积木的声音。累加曲线（城市一块块长出来，声部一个个进来）很合适。

## 原生手法
- 一块地面上逐步长出整座城市（或整套系统）：适合「从零到一」。
- 数据点沿管道流过、点亮下一个模块：适合流程和因果。
- 一个方块拆开露出内部结构：适合讲原理。

## 变化空间
- 结构：一个请求的旅程；一天之内一座小城的变化；三个模块逐一点亮再连成一体。
- 开场：一个方块从空中落下；一条数据流从画外流进来。
- 结尾：拉远露出全景，系统整体脉动一次；所有模块合并成一个 logo 方块。

## 坑
- 深度排序错了，前后遮挡穿帮：严格按 x + y + z 排序，跨格的大物体要拆开画。
- 等距和透视混用：全片只用一种投影。
- 元素太多、太小：在手机上看不清，宁可少而大。