YCode 应用图标设计与落地（2026-10-17）

参考基线

对象：WorkBuddy 桌面端应用图标，取自安装目录 Assets/Square150x150Logo.scale-400.png（600×600 位图）。
证据等级：位图采样，不是 REA Evidence。若要纳入 1:1 复刻的证据链，需另行走 REA 重新导出该资源。
实测结果：
- 内容区 480/600 = 80%，四周各留 10%；squircle 圆角约 23% 边长。
- 背景渐变 135°，#0DC8A6 → #7ED968。
- 浅色斜带自身也有渐变：左下 #EFFCF8 → 右上 #D6F6F0。
- 两枚纯白药丸，长轴平行于斜带，圆角 = 宽/2。
- 全平涂：无描边、无阴影、无高光。
沿用下来的只有容器语言：squircle、45° 对角渐变。
但 80% 的内容区没有沿用到运行时：实测任务栏里 WorkBuddy 占满 24px 的槽位，而我们的图标只占 20px（截图量得 24 vs 20），因为它的窗口图标是贴边裁的。画布内容先按 scale(1.2) 放大到 95.5%，仍显小；最终改成 scale(1.25)，内容 99.4%（实测），等于满幅。

设计决策

不照抄：同构换色会被误认成同一产品的不同版本，任务栏并排时分不清。
中途试过「纯旗标」方案（只有星、没有角色）。放弃的原因：一眼看过去只是"一面被裁切的红旗"，缺少能让人记住的活物。兔子最终回到前景。
最终形态：放大裁切的旗面 + 白色长耳兔。旗面只取一角，五颗星各自只露局部；兔子压在前景，允许遮挡星群。
兔子参数：1.0 倍、中心 (64,106)，从底部探出——脸的下缘被边框切掉，只留耳朵、额头和眼睛。这是刻意的"贴脸"取景：兔子占满下半幅，与左侧的大星形成对峙。
眼睛是实心红 #B0112A，不是挖洞：早期用 mask 挖洞做"红瞳"，但洞会透出底下颜色——压在金星上眼窝就变金，位置被星群绑死。改成实心色后，兔子可以自由压在星上。

配色

旗面 #CF1230 → #78060F（正红 → 深绛），45° 方向与 WorkBuddy 一致但色相完全不同。
旗面光泽：一条多段透明/白/黑的 135° 渐变铺满旗面，模拟绸面受光起伏。曾用 feGaussianBlur 画真实褶皱，但在 64px 下会糊成色块，改回渐变实现——只保留"光扫过旗面"的观感。
星色 #F7CE72、透明度 0.86，压在深红上呈哑光金（实测像素 #EEB367），不刺眼。
已否决的底色：#0DC8A6 → #7ED968（原版青绿）、#2440E8 → #0FB9DE（靛蓝）、#4F2BE8 → #A94BFF（紫罗兰）、#C8102E → #FF4D6A（绯红带玫）、#FF6A3D → #E02D6E（珊瑚）、#2B1B4D → #7C3AED（深紫夜）。

五颗星的几何

按《国旗制法说明》计算，而非目测：

旗面 30×20 单位；大星中心 (5,5)、外接圆半径 3；四颗小星中心 (10,2)(12,4)(12,7)(10,9)、半径 1 → 大:小 = 3:1。
四颗小星各有一角尖正对大星中心，旋转角由 atan2 算出：239.0° / 261.9° / −74.1° / −51.3°。
换算到画布：k = 16 px/单位，原点 (−66, −16) → 大星半径 48、小星半径 16。构图刻意放大并右移：大星被左、上、下三边裁切，四颗小星分别从上、右（两颗）、下边缘露进一角，右侧两颗只剩 5px 左右的尖角，五颗都只看到局部。
这个取景是刻意的：放大到这个程度后，第一眼读到的是"红底 + 金色块面"，而不是一面完整的国旗；要看清"一大四小"必须退远看。
计算脚本 scripts/star-layout.mjs：改 k 和原点即可重排，坐标不写死。
曾试过 k=8.8（星群完整落在框内，一眼就是国旗）、k=10（完整但偏小）、k=14（五颗都露得较多）。放大的同时原点必须跟着往左移，否则小星会被整体挤出画面——k=16 配原点 (−66,−16) 才让右侧只留下一线。

合规提醒

国旗及其图案依法不得用作商标、外观设计和商业广告。本图标为个人自用，且星群在尺寸与位置上按画布重新换算（非制式排版），风险可控；若要对外分发或上架应用商店，建议把星群进一步抽象化（例如改为光点、星环，或去掉小星只留一颗）。

小尺寸处理

图标已无角色细节，全尺寸共用同一份矢量源，不再维护 icon-small.svg：

16px 下大星约 3.7px，只能读到"红底 + 金色星形"的轮廓；这是纯旗标方案的固有下限。
48px 及以上五颗星的关系清晰可辨。

文件清单

路径	作用
`build/icon.svg`	唯一矢量源，1024 画布
`build/icon.ico`	Windows 图标，内嵌 16/24/32/48/64/128/256
`build/icon.png`	1024 通用位图
`build/icon-preview.png`	各尺寸在浅色/深色任务栏下的对照表
`build/sizes/icon-*.png`	备用位图，13 档：16/20/24/32/40/48/64/96/128/180/256/512/1024
`resources/icon.png`	运行时窗口图标（512）
`scripts/gen-icon.mjs`	栅格化 + ICO 打包 + 对照表
`scripts/star-layout.mjs`	五角星制式坐标计算

生成与接线

npm run icon:build

主进程改动（src/main/index.ts）：

新增 appIconPath()：开发态取 app.getAppPath()/resources/icon.png，打包后取 process.resourcesPath/icon.png。
主窗口、设置窗口、任务窗口三处 BrowserWindow 补 icon。
app.setAppUserModelId('com.ycode.app')——Windows 任务栏分组与固定后的图标依赖它。

托盘

src/main/index.ts 新增 createTray()，在 app.whenReady() 里随窗口一起创建：

图标取 resources/tray.png（32px，打包后取 process.resourcesPath/tray.png）；
左键点击唤回主窗口（窗口被关掉就重建一个），右键菜单为「显示 YCode / 退出」；
图标缺失时只打一条 warn，不抛错，避免把启动流程带崩。

文件图标与打包

package.json 新增 build 段与两个脚本（dist 出免安装目录、dist:installer 出 NSIS 安装包）：

appId: com.ycode.app（与 setAppUserModelId 一致）、productName: YCode；
win.icon: build/icon.ico——.exe 的图标从这里写进 PE 资源；
extraResources 把 resources/icon.png、resources/tray.png 复制到打包后的 resources 目录，主进程的 process.resourcesPath 分支才有文件可读；
npmRebuild: false：本机的 VS Build Tools 缺 Spectre 库，node-pty 重编译会以 MSB8040 失败；该模块在开发态已按同一 Electron 版本构建，跳过重编译可直接复用。

注意：.exe 的文件图标只在打包后存在——开发态运行的是 electron.exe，资源管理器里显示的是 Electron 自己的图标，靠改代码无法替换。

验证状态

已验证：tsc -p tsconfig.node.json 通过；build/icon.ico 可被解析出 7 个尺寸；icon.png 为 1024、resources/icon.png 为 512；星色 #EEB367、旗面 #810B18 采样正确；对照表目视通过。
未验证：窗口与任务栏实际图标效果——当前环境 Electron GUI 未能拉起（ELECTRON_RUN_AS_NODE=1 且 GUI 启动无输出），未做真机观察。
未验证：打包后的 .exe 文件图标。项目当前没有任何打包配置，需要 electron-builder 的 win.icon: build/icon.ico 才能写进 PE 资源。
未做：托盘图标（当前应用没有 Tray）。

已知取舍

认不出是国旗：这是放大裁切后的预期结果，不是失误。第一眼是"深红 + 金色块面 + 白兔"，第二眼才读出星形。如果需要一眼认出国旗，把 k 降回 8.8、原点改到 (−2, 1)，但那样兔子就得让到角落。
图标里没有字母 Y：识别靠"深红 + 金星 + 兔子"这组符号，不靠字面。若日后要补品牌关联，靠应用名和界面承担，而不是继续往图标里塞元素。
兔子放到 1.0 倍后，下巴被边框切掉，脸只露到眼睛下方；再放大就要开始丢耳朵，往回收则失去"贴脸"的张力。
16px 只能呈现"红底 + 白兔 + 一块金色"，五颗星的关系不可辨。
应用内 UI 主色仍是 #00c29a（沿用自原版）。图标红、界面绿并存，如需统一要另行调整主题色，不在本次改动范围内。

8.3 KiB Raw Blame History Unescape Escape