手绘感界面图标

# 手绘感界面图标 — design.md

内容版本：sha256:f22b22ce01a12e8c02a586194623725aa56d79c72b6b630731b68447bad43a5c

本文件由当前元数据、实现摘要和实际文件列表确定性生成。元数据记录是资料声明；未提供的数值不作推断。实现建议须在后续开发中选择和验收。

## 元数据记录

- 资产：components/hand-drawn-ui-icon-set；语义类型：icon-set。
- 分类：其他。
- 标签：手绘、图标设计、界面细节、原图参考。
- 场景：应用底部导航图标、工具栏功能图标、设置列表入口图标、空状态辅助图标。
- 平台：未提供。
- 风格：未提供。

### 亮点声明

- 清晰传意：图标首先要准确表达功能，再通过线条走向和局部细节加入俏皮感。
- 小尺寸细节：在紧凑尺寸中调整轮廓与细节，让界面角落也有可发现的设计趣味。
- 向 AI 描述效果：可描述为适用于 24×24 px 网格、建议线宽 1.5–2 px 的手绘感功能图标；保留清晰轮廓，允许轻微不规则线条与局部俏皮变化。尺寸与线宽为实现建议，并非原作标注。

### 实际文件与参考资源

- `demo.html`（sha256:d0c54aedbf998f80de0f4c99a14a744102274c2cb20943ee7bf414a631ad1c45）
- `meta.yml`
- `refs/01.jpg`（sha256:0011dcb9dc765e096f6aa2bd3e84cebea88c5edb3389da5604b3aec165e8f5ba）
- `refs/02.jpg`（sha256:ad7a7eaa0d8a0547283ef057198fe9cd7bbf20a42aa480798e9d69f18a8de5f7）
- `refs/03.jpg`（sha256:bdf27a690d08db42d33c90a7f33d352ccbc0efe1586e56354d23d14178a3f203）
- `refs/04.jpg`（sha256:7c0f1f573736fd0ee96e1942b3492faeebc4b486cdffbbff98fa65a99d938877）
- `refs/05.jpg`（sha256:cc07aa0026c30cef195cebf082e921360f26b82be7bb53e29b32ba018536e305）
- `refs/06.jpg`（sha256:11f41c54d952090bb08c11a86a42564df17e1fa2c8cedecb36a5d8cc3d00f83a）
- `refs/07.jpg`（sha256:35e6b76a5500fba56d001e1dc0dada3213a69ae1d007d9a5f58b9ab7d7a5f302）
- `refs/08.jpg`（sha256:503f2c613ec427f1cd053c3ec8598d2a556c4d26d942818b0596e3032a2d7966）
- 参考图：`refs/01.jpg`；图标全集封面：黑色手绘线条与绿色强调。
- 参考图：`refs/02.jpg`；记账界面应用与四枚实色图标。
- 参考图：`refs/03.jpg`；六枚功能图标与设置页应用。
- 参考图：`refs/04.jpg`；线性图标矩阵与设置列表。
- 参考图：`refs/05.jpg`；功能图标列表与会员页面。
- 参考图：`refs/06.jpg`；云端同步手势插图及列表应用。
- 参考图：`refs/07.jpg`；五种手势与快捷操作界面。
- 参考图：`refs/08.jpg`；图标应用收尾展示。
- 实现摘要：sha256:d0c54aedbf998f80de0f4c99a14a744102274c2cb20943ee7bf414a631ad1c45。

### 图标原图切片

- 标签：`refs/03.jpg`，矩形 [300, 140, 190, 180]，checked-preview，仅参考。
- 云端上传：`refs/03.jpg`，矩形 [545, 140, 190, 180]，checked-preview，仅参考。
- 文档：`refs/03.jpg`，矩形 [800, 140, 190, 180]，checked-preview，仅参考。
- 文档同步：`refs/03.jpg`，矩形 [300, 380, 190, 180]，checked-preview，仅参考。
- 拼图：`refs/03.jpg`，矩形 [545, 380, 190, 180]，checked-preview，仅参考。
- 设置：`refs/03.jpg`，矩形 [800, 380, 190, 180]，checked-preview，仅参考。

## 未提供

- 未结构化记录的 SVG 路径、可复用矢量文件、笔画宽度、统一网格、命名语义与授权不作推断；亮点描述属于元数据声明，原图切片只代表参考预览。

## 实现建议

- 根据使用场景建立图标语义与命名表，再选择一致的尺寸、线宽和视觉重心。
- 需要 SVG 时使用获授权矢量来源或重新绘制；将装饰图标隐藏于辅助技术，功能图标配置可访问名称。
- 检查浅色与深色背景、缩放和按钮状态中的辨识度；不得把栅格切片宣称为可直接复用的矢量。