# 网站配图：一张能在别人页面上起作用的画

标题旁边的首屏大图、一张功能卡片、一排图标、一张链接预览。画不再独占它的画布：页面的文字、颜色和品牌排在前面，画是为了与它们共处而画的。套件：`engine/src/canvas-core/assetKit.ts`。完整示例：`siteHero.ts`（浅色页面）和 `siteHeroDark.ts`（深色页面），两者由同一份代码画出。

## 1. 从页面出发，而不是从画出发

在选主题之前，先写下页面已经定好的东西：

1. **位置：** 哪个区块，什么东西在画的旁边或上方，画显示出来的尺寸。
2. **页面的颜色，** 要精确，以及网站是否还有深色主题。
3. **品牌色，** 一个十六进制值，以及品牌以之闻名的任何材质（胡桃木、黄铜、哑光黑）。
4. **画必须支撑的那句话：** 通常是它旁边的标题。
5. **画风：** 32 种里任何一种都行。页面约束的是摆放和颜色，绝不约束媒介。

## 2. 挑一个做着产品所做之事的物件

读第 1 步里的那句话，问这个产品**做**什么，用一个动词来说：分拣、连接、保护、重复、测量。然后找一个能让人看得见地执行这个动词的人造物件，把它当作一台机械来造（[machines.md](machines.md)），让它的运转不靠说明文字就能传达信息。给用户提两三个候选，每个一句话，说出你偏好哪一个以及理由，除非他们挑了别的，否则就按它做下去。用户已经点名了物件时，直接跳到造它这一步。

| 页面承诺的 | 能把它展示出来的人造物件 |
|---|---|
| 让一切都找得到 | 一个邮局分拣架，每封信都在自己的格子里，有一封正被放进去 |
| 几分钟就能装好 | 一把组装到一半的平板包装椅子，最后一根木销正在插进去 |
| 把一个团队连接起来 | 一台电话交换机，一根线插到一半，一盏灯亮着 |
| 让东西保持私密 | 一个带密码转盘的信箱，翻盖关着 |
| 让一连串步骤自动完成 | 一条弹珠轨道：一颗弹珠在轨道上，下一颗在闸口等着 |
| 把数据变成洞见 | 一座气象站：风速计在转，气压计的指针，一本记录簿 |
| 翻译 | 一台有两个字篮的打字机，一个键正击打到一半 |
| 让储蓄增长 | 一台按大小分管的硬币分拣机，一枚硬币正沿着斜槽滚下 |
| 教学 | 一个装在黄铜子午圈上的桌面地球仪，一根图钉插在一座城市上 |
| 做音乐 | 一个滚筒八音盒，滚筒在转，调速器转成一团模糊 |

把物件的轮廓放到它要填的空间上比一比。在文字旁边的画适合宽阔的形状，在文字下面的画适合低矮、拉长的形状，图标则要一个紧凑的单一物件。

## 3. 视线只落在一处

选出那个显示动词正在发生的部件（信正在进格子、木销正在插进去），给它强调材质（`accent: true`）。`strongPoint(p)` 给出放它的好位置：从边上往里三分之一处，偏向文字，或者文字在上方时居中。

## 4. 摆放

`PLACEMENTS` 为每一种位置保存一块画布、一个画区，有文字的地方还有一个标题区：heroSide、heroSideLeft、heroStack、art、card、icon、strip、social、slide。用 `Cam.fit(A, E, points, fitBox(p))` 把物件放进它的区域。把每一个可能伸出去的点都交给它，包括升起的或爆炸拆开的部件，否则拟合会把它裁掉。转动方位角，直到发生运转的那一侧朝向文字。标题区里什么都不画，连投影或柔和的高光也算在内。在渲染出来的静帧上检查：`node tools/placement.mjs still.png --W <meta.W> --safe x,y,w,h`。

## 5. 页面的颜色，浅色与深色

`setPalette(pagePalette({ paper, accent, colours, tint }))` 把每一种材质迁移到页面上，让机械属于这个页面。在浅色页面上，每一种中性色按页面比套件的奶油色亮多少或暗多少来整体平移，`tint`（0 到 1）决定灰色还要染上多少页面的色相。在深色页面上，部件只比页面略微亮出一点：受光的顶面是最亮的东西，线条画得比它们勾勒的面更亮。背景只用 `paper` 涂，别的都不行；差一点点就会在每个部件周围画出一圈浅色的边。有浅色和深色两种主题的网站，通过 `heroOn(title, paper, accent)` 用同一份代码得到两张画。

## 6. 品牌的颜色

`accent: "#hex"` 给第 3 步里的那个部件上色。`colours: { wood: "#7a5536" }` 按名称给任何一种材质重新上色，品牌的标志性材质也是这样做出来的。两种模式：

- **solid**（实色，默认）：整个部件都用品牌色。它的五个色阶都保持这个色相，亮度被限制在一个范围内，使每个色阶仍能和下一个区分开，而且没有一个在深色背景上亮得刺眼；
- **lines**（线条）：各个面保留中性的灰色，颜色只进入笔画和圆点，适合指针、仪表的指针或刻出来的记号。

把品牌色放在第 3 步的部件上，最多再在别处小小地出现一次。一个同时铺满底座和大面板的品牌色，就再也不能告诉眼睛该往哪里看了。

## 7. 让它按它的工作方式动起来

把机械的一个完整周期做成循环，让它无缝地重复。只让真实的东西会动的部件动，别的一概不动。转得太快、看不清的部件用 `spin(angle, sweep, draw, { swept })`：几份更淡的叶片副本，每份往后错开一点，叠在一块淡淡的扫掠形状上，让眼睛读出的是速度，而不是慢慢地转动。在标题旁边，安静更好：当真实的机械几乎不动时，就用一条 `meta.holds` 理由把这一点说出来，而不是编造运动。要求减弱动态效果的访客只看到第 0 帧，别的什么也没有，所以要把第 0 帧本身就做成一张完成的画。

## 8. 成套的画，以及很小的画

当几张画要放在一起时（一排卡片、一条图标），用同一箱零件把它们全部造出来：同一种螺丝、同一种支脚、同一种边缘倒角、同一个镜头角度、同一种强调。这样它们看起来就像兄弟姐妹。比较每一张有多繁密，把最空的往上补到和其他的一样，而不是把最满的往下减。在图标尺寸下，用更少的零件、把每个做得更大，细小的刻度干脆全部不要。按页面实际显示的尺寸渲染每一张画，再按手机宽度渲染一次（`placement.mjs --phone out.png`），两张都要看。