🌻 设计文档小农场 · 野花笔记
← 全部文档/小农场/美术

美术风格

现行 #美术#风格#资源规范 docs/小农场/美术风格.md
这一份已经定案了

选型过程见 画风选型。三版对比之后选的是 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 正文与数字。深蓝灰,不是纯黑
这套风格最容易画错的两处
  1. 线条画粗了。旧规范是厚描边,改过来时手最容易惯性画粗。 线条一旦超过 3px,整张图立刻从"水彩绘本"变成"贴纸"。
  2. 阴影画黑了。阴影必须是淡紫蓝 #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%。