首页 / 博客 / 设计

四种插画风格，只有一种能上线

2026年8月29日 · 阅读约 6 分钟 · Dimesum Engineering

Dimesum 在选定之前把四种候选风格全都画了出来，而决定性的属性不是美观，而是画面里的每一种颜色能不能成为一个 token。

四种插画风格。其中只有一种可以套用主题。Dimesum 选定品牌美术方向，依据的只是一个机械式的检验：画面里的每一种颜色，能不能用一个 token 替换？三个候选方案没能通过，而最好看的那个败得最彻底。

四种原型都记录在 docs/design/brand/ART-STYLES.md 里，每一种对应创始人收集的一个参考。我们没有争论，而是把四种都画了出来：Dimesum 拥有的三个主体，各用每种原型自己的笔法和配色渲染一次。make ui-art-styles 会生成这张 4x3 的拼图。

对于产品美术，可生成性胜过美观

产品美术会被反复重新生成，营销美术只画一次。Dimesum 提供 18 套配色，同一只饺子既要在列表行里以 24px 站得住，也要在引导页上以 200px 站得住。一种每换一套配色就得请一次插画师的风格，两件事都做不了。

所以门槛就是可生成性。在平涂之上加一条粗细一致、圆头收尾的描边，每个形状正好只有两种颜色，而且两种都由 token 命名。改变 token 的取值，产品里的每一张图都会同时换上新主题，无需重画，也不需要第二份素材。

四种原型里有三种会崩，各有各的原因

群像是温暖手绘：带真实质感的编织蒸笼，琥珀色底，长着手脚、爬上筷子筒的饺子。它是四种里最有魅力的。它依然没法上线。画出来的高光是一段有两个色标和一个中心位置的渐变，而不是一个可以替换的 hex，而且这种明暗到了 24px 就糊成一团。

海报是扁平几何，编织垫上的橄榄绿与金色。它完全没有描边：形状只靠颜色区分。好看，却在结构上是致命的，因为换主题会移动填充色，也把边界一起带走。它的五官只占身体宽度约 8%，所以在 Dimesum 使用的 24px 到 48px 尺寸下，看上去一片空白。

跨页是现代编辑风，也最接近我们自己的笔法：平涂之上一条细而均匀的深色描边，细节靠反复的小笔触而非明暗来承载。差别在于题材，不在描边。它是俯视画出一整桌菜，而一整桌菜没有可以放进列表行的单元。Dimesum 需要的是角色风格，不是场景风格。

贴纸是简洁可爱矢量，也是我们最终上线的那一种。均匀的细描边、平涂填充、点状眼睛、大片珊瑚色腮红，没有明暗。它里面的每一种颜色都是 token，所以全部 18 套配色都能免费套用，它在 24px 和 200px 都站得住，而且它和我们那套 24px、2px 圆头描边的 Lucide 图标出自同一笔法。

决定性的问题：一种颜色能不能成为 token？

平涂让一种颜色可以被命名，而命名让 18 套配色变得免费。贴纸的饺子是一个填充 token 加一个描边 token。腮红是 0.42 不透明度的 rust-600，而不是一块平涂的粉彩色，所以它借用配色方案里现有的暖色调，而不是自己命名一种颜色。竹蒸笼是一条从每个主题的 gold-600 调出来的明度阶梯，所以在每一套方案里，它受光的边缘都是那个金色加 22% 纸色，它的底部则是那个金色加 38% 墨色。

两个未采用的风格都撑不过这一改。群像的高光被烤进了一个渐变色标里，所以给主体重新套主题后，会留下一块奶油色的斑块压在上面。海报没有一条线把画面撑在一起，所以一旦两块填充色彼此靠近，它们之间的边缘就不复存在。

三处只有并排对比才发现的修正

一张图单独看总是没问题。下面每一处修正都是用同样的方法发现的：把候选图渲染成 PNG，把参考图裁到相同的像素尺寸，然后把两者贴进同一张图里。

嘴巴原本画成 20u 宽，一放到参考图旁边就读成了一张笑脸。它缩到了 10u，是 28u 眼距的三分之一，角色就重新变回了一只饺子。眼睛的圆盘同时缩小，从 r5 变成 3.4u 的椭圆，高比宽大。

按 IoU 拟合到参考蒙版的一条轮廓得了 0.880，而最好的手绘尝试是 0.781。拟合出来的那条看着像一顶带尖刺的王冠。面积重叠看不出平滑度，所以分数更高的反而是更差的画。最终上线的是量好比例、手绘曲线的版本：长宽比 1.041，对比参考图的 1.039，每一段都是三次曲线，任何地方都没有拐角。

收口的褶必须打破轮廓。我们第一只饺子是一个光滑的圆顶，顶上画了三条细线，评审回来只有一个词：头发。画在一条不间断曲线上的线只能读成头发，因为形状里没有任何东西表明面皮是被捏合的。这些褶瓣只在高度顶部的 8% 里分开；切得再深就成了兔耳朵，这个版本上线过两次才被发现。

我们从未采用的三种里保留了什么

不采用一种风格并不等于删掉它。群像保留了它布置场景的直觉：道具、溢出、角色与物件的互动，用在有插画师参与、无需换主题的地方。跨页为站点保留了红底的那份自信，以及给非角色物件赋予一张脸的许可。海报保留了每幅构图只用四种颜色的纪律。

这些习作本身从不上线。ui/dumplings/styles/ 与 refs/ 地位相同：是引用，不是源，产品层不得导入它。生成器从文档自己的标题里解析出原型清单，所以在 ART-STYLES.md 里加上第五种原型，下一次构建时它就会出现在拼图上，而一个它画不出来的标题会让构建失败。