美术风格
选型过程见 画风选型。三版对比之后选的是 C · 日本清新风。
上一版的「扁平贴纸 / 厚描边」规范整体作废——色板、线条规则、光影规则全部换掉。
按那份做的素材(docs/art/ui/ui-main-screen.webp 等)只留作对比,不要再用。
一句话:日本清新风——水彩淡彩、细线、大留白、柔和漫射光。参考是 吉卜力乡村背景 / 牧场物语 / 动物森友会,不是厚涂欧美卡通,也不是水墨国风。
风格板由 python3 tools/art/styleboard.py 生成,改色板就改那个脚本再跑一次。

一、风格定位#
| 维度 | 定调 |
|---|---|
| 线条 | 细。2~3px 的柔和线条,颜色是蓝灰 #7C8B99,不是黑也不是深棕 |
| 上色 | 水彩淡彩。颜料有晕染、有浓淡变化,边缘略微柔化,不是平涂色块 |
| 纸感 | 整体压一层水彩纸纹理,像画在纸上而不是画在屏幕上 |
| 光影 | 柔和漫射光。阴影很浅、是淡紫蓝 #B8BED4,没有硬边阴影 |
| 留白 | 大留白是这套风格的命。宁可空,不要满 |
| 配色 | 淡、柔、低饱和。彼此拉得开但不刺眼,整体偏冷绿+奶油 |
| 情绪 | 安静、通透、治愈。让人想在里面待着 |
把画面缩小到 30% 看,如果觉得"有点吵",就是元素太多了。 这套风格的容错在"空"这一侧——空是对的,满一定是错的。
二、色板#
十二主色 + 三个功能色。新加颜色必须先进这张表。
| 名称 | 色值 | 用在哪 |
|---|---|---|
| 薄荷绿 | #A8D8B9 |
草地、树冠、田地、主按钮 |
| 深薄荷 | #7FBF9A |
草的暗部、进度条已满、次级绿 |
| 鼠尾草绿 | #9CB89A |
远树、背景植被、低饱和绿 |
| 天空蓝 | #A9D6E5 |
天空、屋顶、信息类角标 |
| 浅水蓝 | #BFE3F0 |
水面、天空高光、浅底 |
| 奶油白 | #FDF8F0 |
页面底色、云、面板底 |
| 米黄 | #F0E4D0 |
面板、卡片底、木器 |
| 浅赭 | #E8D5B7 |
土壤、树干、栅栏 |
| 樱粉 | #F5C6D0 |
花朵、腮红、稀有度、装饰 |
| 淡紫 | #C9BFE0 |
稀有度、茄子类、远景山 |
| 淡橙 | #F5C99B |
作物、鸡、暖色点缀 |
| 暖金 | #F2C879 |
金币、金色小鸡、里程碑高亮 |
2.1 功能色#
| 名称 | 色值 | 用在哪 |
|---|---|---|
| 线条 | #7C8B99 |
所有轮廓线、分隔线。统一用它,不许换黑或深棕 |
| 阴影 | #B8BED4 |
所有投影。淡紫蓝,很浅,没有硬边 |
| 文字 | #5A6673 |
正文与数字。深蓝灰,不是纯黑 |
- 线条画粗了。旧规范是厚描边,改过来时手最容易惯性画粗。 线条一旦超过 3px,整张图立刻从"水彩绘本"变成"贴纸"。
- 阴影画黑了。阴影必须是淡紫蓝
#B8BED4且很浅。 用灰黑或深棕会让画面变脏,失去通透感。
2.2 稀有度(抽卡用)#
不要靠明度拉开,靠色相,而且四个色都必须是淡彩:
| 稀有度 | 颜色 | 倍率 |
|---|---|---|
| 普通 | 薄荷绿 #A8D8B9 |
×1.2 |
| 稀有 | 天空蓝 #A9D6E5 |
×1.5 |
| 史诗 | 淡紫 #C9BFE0 |
×2 |
| 传说 | 暖金 #F2C879 |
×3 |
2.3 飘字三档(连击)#
连击越高,飘字颜色往上走,字号同时变大:
| 连击 | 颜色 | 字号 |
|---|---|---|
| 低 | 奶油白 #FDF8F0 |
14px |
| 中 | 淡橙 #F5C99B |
20px |
| 高 | 暖金 #F2C879 |
28px |
三、线条、水彩与光影规则#
3.1 线条#
| 规则 | 数值 |
|---|---|
| 大元素(谷仓、设施) | 3px |
| 中等(树、动物) | 2.5px |
| 小图标 | 2px |
| 极小(果实、粒子) | 1.5px 或干脆不描边 |
| 线条颜色 | 一律 #7C8B99 |
| 线条质感 | 略微不匀、带一点手绘抖动,不要机械等宽 |
3.2 水彩#
- 颜料要有浓淡:同一块颜色里允许出现 10%~15% 的明度变化,模拟水彩的沉积。
- 边缘略微柔化:色块外沿有一圈 1~2px 的柔化过渡,不要刀切一样齐。
- 允许叠色:两个色块重叠处颜色会略深,这是水彩的特性,要保留。
- 整体压一层纸纹:全图叠一张水彩纸纹理(正片叠底,不透明度 6%~10%)。
3.3 光影#
- 光源默认左上、柔和漫射(阴天/清晨的感觉),不是正午直射。
- 阴影用淡紫蓝
#B8BED4,模糊、很浅、没有明确边界。 - 高光只用一处:一个柔和的亮斑,不要到处点高光。
- 允许轻微的空气透视:越远的东西越淡、越偏蓝紫。
把元素缩到 48×48。如果还看得出是什么、而且线条仍然清楚,就合格。 但注意:这套风格的线条很细,48px 时本来就该快看不见了—— 所以关键元素(设施图标)要在 72px 下验收,不要按 48px 卡。
四、元素清单#
4.1 主界面(430×764)#
| 元素 | 尺寸 | 说明 |
|---|---|---|
| 田(主点击物) | 220×160 | 中央,带田垄的圆角田块,点一下从中间蹦出作物 |
| 作物 | 64×64 | 南瓜 / 胡萝卜 / 玉米,三种随机,飘出后飞向谷仓 |
| 小动物 | 64×64 | 小鸡 / 小兔 / 小猪 / 小羊,四种,带 2 帧蹦跳 |
| 金色小鸡 | 80×80 | 同小鸡造型,暖金色 + 一圈柔和光晕 |
| 谷仓(钱袋位) | 96×96 | 金币的落点,收钱时轻轻压一下再弹回 |
| 天气图标 | 48×48 | 晴天 / 多云 / 小雨 / 阳光充足 / 雨后彩虹 / 丰收季 |
| 设施图标 | 72×72 | 15 个,见 4.2 |
4.2 十五个设施图标#
菜地、鸡舍、奶牛棚、果园、麦田、养猪场、温室、风车磨坊、农贸市场、食品工厂、冷链物流、种子实验室、垂直农场、太空农场、云端农业帝国。
每个都要画成"一眼能认出来的东西",不能靠文字标注区分:
- 菜地 = 一畦带芽的土
- 鸡舍 = 浅蓝顶的小屋 + 一只探头的小鸡
- 奶牛棚 = 木棚 + 奶桶
- 果园 = 一棵挂红果的树
- 麦田 = 一片金色麦穗
- 养猪场 = 泥地 + 一只粉猪
- 温室 = 玻璃拱顶 + 里面的绿苗
- 风车磨坊 = 白色风车 + 面粉袋
- 农贸市场 = 条纹遮阳棚 + 一筐菜
- 食品工厂 = 烟囱 + 传送带上的罐头(冒热气,不要冒黑烟)
- 冷链物流 = 小冷藏车 + 雪花
- 种子实验室 = 试管 + 一株发光幼苗
- 垂直农场 = 一摞叠起来的种植层
- 太空农场 = 圆顶舱 + 星球背景(要保留田垄和麦穗的母题)
- 云端农业帝国 = 云上的小屋 + 金色麦穗
上一批素材里,实验室、生态穹顶、童话城堡画得像科幻片,和前两行的农场完全割裂。 后三档是"农场变大了",不是"换了个题材"——太空农场也要有田垄和麦穗。
五、出图与命名#
docs/art/
styleboard.png 风格板(本页这张,脚本生成)
ui/ 界面装饰、按钮、面板、主界面效果图
icon/farm/ 15 个设施图标
icon/animal/ 4 种小动物 + 金色小鸡
icon/crop/ 作物
icon/weather/ 6 种天气
fx/ 演出与特效(金色小鸡时刻、里程碑、大丰收)
style-lab/ 画风选型对比图(历史存档,不要再用)
命名:<类别>-<英文名>.webp,例如 farm-chicken-coop.webp、animal-rabbit.webp、weather-rainbow.webp。
全小写、连字符分隔,不用中文文件名(省得 URL 编码出问题)。
| 类型 | 尺寸 | 体积上限 |
|---|---|---|
| 大场景元素 | 220×160 | 40 KB |
| 设施图标 | 72×72 | 8 KB |
| 小图标 / 粒子 | 32~64 | 4 KB |
| 界面装饰 | 按需,2 倍图 | 30 KB |
统一用 webp,首屏总请求控制在 60 个以内、总体积 400 KB 以内。
六、禁止项#
| 禁止 | 原因 |
|---|---|
| 厚描边 | 上一版规范的核心,和这套风格直接冲突。线条超过 3px 就废了 |
| 黑色或深棕描边 | 太硬,破坏通透感。统一用 #7C8B99 |
| 硬边阴影、深色阴影 | 这套风格没有硬阴影。阴影一律淡紫蓝且很浅 |
| 高饱和、荧光色 | 一出现就"吵",和治愈调性冲突 |
| 写实材质(金属反光、照片级木纹) | 那是"欧卡质感"那条路,已经否决了 |
| 3D 渲染感、景深虚化 | 同上 |
| 画面塞满 | 大留白是这套风格的命。宁可空,不要满 |
| 水墨、国风元素 | 那是 B 方案,已经否决了 |
| 自己调色 | 色板之外的色值一律先加进第二节的表再用 |
七、验收标准(可执行)#
规范光写形容词没用,下面是能直接判的:
- 全图最粗的线条 ≤ 3px。
- 全图没有纯黑(
#000000)像素。 - 阴影色的明度不低于 65%(淡紫蓝
#B8BED4明度约 74%)。 - 主色板 12 色覆盖 ≥ 90% 的画面面积。
- 设施图标在 72×72 下能一眼认出,不需要文字标注。
- 主界面缩小到 30% 看,第一感觉是"安静"而不是"热闹"。
- 有水彩纸纹层,不透明度 6%~10%。