111 lines
8.3 KiB
Markdown
111 lines
8.3 KiB
Markdown
# 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` | 五角星制式坐标计算 |
|
||
|
||
## 生成与接线
|
||
|
||
```bash
|
||
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`（沿用自原版）。**图标红、界面绿**并存，如需统一要另行调整主题色，不在本次改动范围内。
|