勋章设计研究

先拆解 iOS 健身 App 的月度奖章,用自己的引擎把它重画出来;再用同一套引擎做了十六枚不同风格的勋章。这一页按做事的顺序整理:先有设计理念,再走流程,然后抠细节,最后才是技术。每一枚都可以在风格体验页里转着看。


设计理念

勋章是一件被做出来的东西

看上去的每一处都要对得上一种真实的工艺和材料:冲压、铸造、掐丝、点蓝、罩漆、刺绣、注塑。工艺决定形,冲压件边是圆的,铸件有砂眼;材料决定光,抛光金属反差大、亮带窄,漆和釉颜色稳;用旧决定痕迹,凸处磨掉露底,凹处积漆积锈。明暗全部来自几何和光,一点也不画上去。超现实可以有,但要是有意的,并且和勋章的概念连得上。

高级感来自克制

规则少而一致:一种线宽、一套角度、一个小色板、一个主角。苹果的月度勋章只有两三种颜色、竖直加 30° 两种角度,外框也借来当笔画,所以整枚是一件东西,不是贴上去的图。饱和色只给要看的东西,大面积满饱和的原色显得廉价。每个元素都要说得出用处,说不出就删。

风格是一种看世界的方式

先弄懂这个风格为什么长成这样,再决定形、字、色、材料。苏式的高级感来自诚实和极端,材料和螺钉都不藏;赛博朋克的张力来自秩序和破坏同时在场;二战德式好看在制造本身,冲压、磨损、哑光让东西显得重。只拿最出名的符号往上套,一眼就被看穿。

形和字都从风格里长出来

外形、厚薄、拱起还是平,按这个风格对应的实物定:贴纸和铭牌是平的,冲压章微拱,瓷璧中间厚、两边圆。字体是最先被看出不对的地方:字必须属于这个风格,同一处的中文和数字用同一种字体,找不到合适的中文字体,正面就不放中文。

为一件具体的事做

一枚勋章讲一件事:十一月的挑战,醒醒九岁生日。要一看就是它,专属的细节比通用的漂亮重要。十一月挑战的几枚都在找"三十天"和"完成"这件事在各自工艺里的说法:三十环链式针、三十颗键、一次烧成的釉、铸在盘心的铭文。


流程

写设计理念1学风格2出方案,确认3先做大的4和名作并排自查5改前改后对比6被否就回到方案,推倒重来时回到学风格
  1. 写设计理念。三五句话:这枚勋章讲什么事、要让人感到什么、这个风格的内核是什么、借哪种实物和工艺来表达。写不出来,就是还没想清楚。
  2. 学风格。写清它是什么、和相邻风格差在哪、代表作和设计者、视觉语法。从博物馆开放数据找原图,放大看细节。
  3. 出方案,确认后再动手。先说对风格的理解,再说外形、形体、构图、字体、材料、配色,附构图线稿。
  4. 先做大的,再做小的。外形、构图、材料、主色定了,再做磨损、瑕疵、背面。缺引擎能力先列清单,不在图案里硬凑。
  5. 和名作并排自查。正面、25°、背面、每个配色都出图,放大看局部;能量化的就量:平均亮度、配色之间差多少、上下的分量。
  6. 每轮出改前改后对比。说清改了什么、为什么、还差什么。

抠细节时的经验

先学再做

  • 凭印象拼元素会反复返工。景泰蓝试了回纹、冰裂、哥窑开片、云雷纹五版,收齐明代掐丝珐琅名作照着做才通过。
  • 一件东西只用一种工艺的语言:冰裂是瓷器的釉病,不能上掐丝珐琅;开片放在青瓷上才对。
  • 主题不能压过工艺:刺绣章的核心是针法,太空题材被去掉了。
  • 推倒重做时先回到名作,找它为什么不单调:远近层次、几种做法叠用、几种金。

像别的东西就是错

  • "像车牌":黑漆铝字加四角螺钉。改成灰绿漆、分栏、两颗铆钉。
  • "像中式军功章":苏式第二版的红星金光芒,换成工业铭牌。
  • "像盘子":青瓷第一版正面凹、背面有圈足,换成瓷璧。
  • "像照片加滤镜":画珐琅肖像保留了照片细节再加效果,改成先拿掉细节再按名作的画法画回去。
  • "像渲染的模型":透明塑料浮在平灰上,没有影子和硬的高光,加了地面投影和一块小而亮的主光。

颜色

  • 配色要换占面积大的部位,换完量一下彼此差多少:赛博朋克最早三种近黑的漆,渲染出来最多只差 13/255。
  • 暗不等于有风格,先量平均亮度:赛博朋克改前 0.23,苹果 0.52。
  • 漆的颜色从反射里来才有深度,靠一个固定底亮撑出来的颜色像塑料。
  • 透明层的颜色会被底下的颜色染偏:灰蓝珐琅罩在金上成了橄榄绿,所以釉下垫什么金属按釉色定。

字体和构图

  • 挑字体时把整套要印的字排出来一起比,关键字放大看,数字也要看粗细;拉丁花体配中文只会更散。
  • 同一个信息只出现一次:赛博朋克正面原来有五处"11",只留一个。
  • 头重脚轻要按大块明暗反差量,不按像素平均量。

材料和光

  • 金属的旧要按材料来:纯金不氧化,18K 以下的金会轻微发暗,鎏金磨薄透出铜,银会发黑,金线会发褐;所有金属都有发丝划痕、变柔的高光和凹处积垢。珍品旧得克制。
  • 玻璃、漆、釉的光泽要靠一块形状清楚的光源倒影,光滑本身看不出来。
  • 镜面金属映到超过约六成亮的光就溢成纯白;平的镜面翻一次面会扫过一整圈环境,硬边光源放多了会一路闪。
  • 真实感来自落地:接触阴影、透过彩色外壳的投影、受光一侧亮背光一侧暗的边。

出问题先找根因

  • 德式镂空的白亮锯齿:孔里高度一下压到 0,成了阶梯。
  • 玑镂珐琅背面的摩尔纹:同心纹太密太深,斜面映到窄灯带出了比像素还细的明暗。
  • Y2K 影子上的竖线:勋章转动时穿进了背后的平面。
  • 不用模糊去盖:盖住的是症状,下一个角度还会出来。

改前改后

苏式:黑漆铝字加四角螺钉像车牌(上);改成灰绿漆、分栏、红色只给
苏式:黑漆铝字加四角螺钉像车牌(上);改成灰绿漆、分栏、红色只给"11"、两颗铆钉(下)
刺绣:行星和轨道压过了刺绣(上);改成三十环链式针绕
刺绣:行星和轨道压过了刺绣(上);改成三十环链式针绕"11",四种针法各有位置(下)
赛博朋克:上半部分量太重、偏右上(上);裂缝和
赛博朋克:上半部分量太重、偏右上(上);裂缝和"11"下移、左下加分量,上下大块反差从 59:41 调到 54:46(下)
玑镂珐琅:灰蓝罩在银上(左);罩在金上成了橄榄绿(中);釉下改垫银(右)
玑镂珐琅:灰蓝罩在银上(左);罩在金上成了橄榄绿(中);釉下改垫银(右)
玑镂珐琅:环境里加两扇窗形光源,转到 25° 以后釉面映出边缘清楚的窗,才看得出是玻璃
玑镂珐琅:环境里加两扇窗形光源,转到 25° 以后釉面映出边缘清楚的窗,才看得出是玻璃
装饰艺术:光芒末端散成碎屑、
装饰艺术:光芒末端散成碎屑、"11"是一块哑灰、左边一条过曝(上);改后(下)
Y2K:浮在平灰上像渲染图(上);减掉大片柔光、留一块硬边主光(中);再加接触阴影和透过外壳的彩色投影(下)
Y2K:浮在平灰上像渲染图(上);减掉大片柔光、留一块硬边主光(中);再加接触阴影和透过外壳的彩色投影(下)
二战德式:孔里高度一下压到 0 成了阶梯,反出白亮锯齿(上);孔边保持原高度、往里才压低(下)
二战德式:孔里高度一下压到 0 成了阶梯,反出白亮锯齿(上);孔边保持原高度、往里才压低(下)

十七枚勋章

点图片在体验页里打开那一枚。


起点:苹果月度勋章

iOS 26.5 健身 App 的奖章,从模拟器运行时里找到渲染框架和模型,反解着色器,再在模拟器里调用原版勋章视图出图当真值。下面是从中得到的设计规则和参数,后面所有风格都从这里出发。

构成:掐丝珐琅

  • 3D 奖章和扁平贴纸是同一份线稿:线变成凸起的金属丝,面变成珐琅。
  • 所有金属丝和外框一样高,连成一整块金属;珐琅低一截填在格子里。
  • 笔画尽量接到外框或别的笔画上,把正面分成封闭的格子。
  • 背面是一整块抛光金属,文字是一层更亮的反光面,不刻。

构图:2026 年月度款

  • 竖线保持竖直,其余直线一律斜 30°,和六边形的斜边平行。
  • 月份"11"只有两根竖线,六边形左上两条斜边当它们的斜钩。
  • 一条斜线把正面分成上方珐琅、下方缎面金属的年份带。
  • 年份是几何字:字碗是正圆,四个字交叠、共用笔画。

形体比例

项目占高度效果
正面、背面球面半径122%转动时亮带在整面上滑过
壳厚2.5%侧面是一道弧,不是一块板
中心拱起9%模型 z 跨度 14% 是拱高,不是厚度
金属丝高出珐琅1.3%很浅,图案靠亮线和材质反差勾出来
金属丝宽2.8%平顶方条,侧壁竖直,带一圈暗边
顶边倒角0.2%暗处的细亮线,精致感的主要来源

颜色

按月份从这张表取珐琅色;金属是银 (0.63, 0.65, 0.67),"完美月"用金 (0.77, 0.68, 0.33)。珐琅是纯色,明暗全部来自反射。

球面半径 122%,中心拱起 9% 金属丝宽 2.8%,高出珐琅 1.3% 顶边倒角 0.2% 壳厚 2.5%(竖向放大示意)
正面、背面都是球面,壳很薄,金属丝很浅;亮带靠拱面滑过整面
显示上限 1反射方向上的环境亮度 0 → 1抛光金属 k=3缎面金属 k=1.6珐琅 k=1.6
金属对亮度取三次方,暗处更暗、亮带更窄更亮;珐琅底亮高,颜色稳

着色:一张环境图,四个数

颜色 = (环境亮度k × 系数 + 底亮) × 固有色
部位环境通道k系数底亮
抛光金属(外框、金属丝、侧壁)G32.10.214
缎面金属(年份带)R1.61.10.265
珐琅R,方向加亮片扰动 0.11.60.750.582

没有灯、没有阴影、不是物理光照。每个像素只算一个反射方向,去一张影棚环境图里取亮度:上半球全白,水平线一圈暗,地面身后有一圈亮带。金属对亮度取三次方,暗处更暗、亮带更窄更亮;珐琅底亮高、反射弱,颜色稳定。

手感

F = 14.5·cos(2θ + π/2) − 0.5·sign(ω)|ω|1.05 + 0.6·sinθ / (|ω|+1)3

三项依次是磁吸(只停在正面或背面)、速度阻力、防止卡在正面的推力,再乘阻尼 4.2。拖满一个宽度约转 190°。

颜色空间

屏幕上按 Display P3 解释。同一个珐琅值,模拟器显示成 sRGB (247, 97, 81),网页默认显示成 (255, 111, 93)。网页里把画布设成 display-p3,再超采样到 3 倍像素,观感才和模拟器一致。和真值按区域比,珐琅中部 (255, 112, 94) 对 (255, 114, 95)。


引擎

分三层:engine.js 是所有风格共用的引擎,styles/ 是风格预设(比例、金属、色板、材料系数、布光、手感),designs/ 是图案(外形、笔画、浮雕、背面)。苹果的那一套是起点,每个风格缺什么就加什么,新能力一律做成可选项,不用的风格画面逐像素不变。

styles/ 风格预设比例、金属、色板、材料、布光、手感designs/ 图案外形、笔画、浮雕、背面engine.js 共用引擎十七枚勋章同一份几何薄壳、金属丝、浮雕镂空、旋转器形、厚盒材料珐琅、金属、漆线、瓷、透明塑料光和环境染色环境、硬边光源、预模糊自发光、地面投影手感和工程固定步长、缓存复用画布、逐像素回归新能力都是可选项:不设参数,别的风格逐像素不变

几何

  • 球面薄壳或平板,金属丝按笔画求并集生成真实几何。
  • 高度场浮雕:叠形状、刻槽、起线、内孔,可放在背面;镂空直通正反面。
  • 截面曲线旋转出整件器形(青瓷璧);厚盒形体加壳内零件(Y2K)。
  • 浮雕网格内部铺规则方格,只在轮廓一圈三角化,加载快一倍多。

材料

  • 珐琅:瑕疵图、透明嵌釉、平滑釉面、细刻纹防闪烁。
  • 金属:凹处积垢、凸处磨损、麻面、发丝划痕,一块浮雕里画几种金属。
  • 漆:金粉颗粒、螺钿随视角变色。
  • 线:针迹走向、线的光泽方向、锁边的线圈和起毛。
  • 瓷:哑光胎、按釉厚和视角吸收的釉、釉内散射、有深度的开片、刻款填色。
  • 透明塑料:内部先画到离屏图,外壳按折射、厚度吸收、磨砂、壁厚去取。

光和环境

  • 环境可以染色、只染反射;可以放长方形硬边光源;可以预先模糊成几级,按光滑程度取。
  • 自发光和辉光,自发光照到附近的金属。
  • 切缝里看进另一个无限深的空间(赛博朋克)。
  • 勋章背后的地面:接触阴影和透过彩色外壳的投影,按转角实时计算。

手感和工程

  • 转动按固定步长计算;开场先离线算一遍,保证停在正面。
  • 几何和与颜色无关的贴图按图案缓存,切回看过的风格约 0.2 秒;停稳后不再重画。
  • 每次改引擎都对全部风格做正面、25°、背面回归:钉死动画时间和随机数,改前改后逐像素比。
  • 多个风格并行做时,同一时间只有一个人改引擎。

踩过的坑

现象原因改法
苹果勋章金属发黑、珐琅偏灰用了物理材质加色调映射换成原版的经验公式
勋章太厚把模型 z 跨度当成板厚做成球面薄壳
数字有锯齿、交界有接缝金属丝画在高度图上;每笔独立网格互相穿插金属丝改成真实几何,所有笔画求并集
布光对不上环境图上下两面装反,不知道环境矩阵读出装载选项和环境矩阵
网页比模拟器淡、软画布按 sRGB 显示,像素不够画布设 display-p3,超采样
切换风格卡 2~8 秒每次从头算几何;求并集按平方变慢;不共用顶点;每帧都重画缓存、分组求并、共用顶点、按需重画
改了文件,页面加载失败浏览器缓存了旧的模块,新图案配旧字形本地预览服务器一律不缓存
有的勋章打开后背面朝前开场转动停在哪面取决于参数和帧率固定步长,先算一遍再调初速
镜面银一片纯白映到的光超过约六成亮就溢出落在银上的光源压到 0.55 以下
灰蓝珐琅发绿透明釉下垫的是金釉下金属按釉色定
釉面像缎子没有形状清楚的光源可映加窗形硬边光源
转动时影子出竖线勋章转起来穿进背后的平面平面每帧退到勋章后面