61 lines
2.8 KiB
Markdown
61 lines
2.8 KiB
Markdown
# SenlinAI ICON 设计规格
|
||
|
||
## 背景
|
||
|
||
SenlinAI 当前在登录页和工作台中使用字母 `S` 作为临时品牌符号，Web favicon 仍是 Vite 默认图形。本设计为产品提供一个正式、无文字、可缩放的 SVG ICON，用于浏览器 favicon、登录页、工作台侧栏和桌面应用图标的后续适配。
|
||
|
||
## 设计目标
|
||
|
||
- 同时表达知识、森林和 AI 三个主题。
|
||
- 在 16px、32px 和 128px 尺寸下保持清晰可辨。
|
||
- 符合 SenlinAI 安静、可靠、专业的产品气质。
|
||
- 与当前 Web 客户端的 Arco 蓝主色保持一致。
|
||
- 使用简单、可维护的 SVG 几何路径，不依赖位图、字体、滤镜或渐变。
|
||
|
||
## 最终构形
|
||
|
||
采用“年轮知识树”方向：
|
||
|
||
- 外轮廓为圆角方形，提供稳定边界，适合 favicon、应用图标和工作台侧栏。
|
||
- 内部主体为白色树冠和树干。
|
||
- 树冠内的弧线同时暗示年轮、知识层次和脑回路。
|
||
- 树干与分支表示知识的积累、生长和连接。
|
||
- 分支上的青绿与浅蓝节点表示 AI、知识图谱和信息连接。
|
||
|
||
ICON 不包含文字、字母、标语或独立横版字标。
|
||
|
||
## 视觉规范
|
||
|
||
- SVG `viewBox`：`0 0 128 128`。
|
||
- 外部圆角方形：主色 `#165DFF`。
|
||
- 树冠主体：近白色 `#F4F8FF`。
|
||
- 内部结构线：`#165DFF`。
|
||
- AI 节点：青绿 `#14B8A6`、浅蓝 `#60A5FA`、浅薄荷绿 `#A7F3D0`。
|
||
- 线条使用圆角端点，避免小尺寸下出现尖锐毛刺。
|
||
- 不使用渐变、投影、滤镜、蒙版、嵌入字体或外部资源。
|
||
|
||
## 文件与集成范围
|
||
|
||
- 新增正式源文件：`apps/web_v1/public/senlinai-icon.svg`。
|
||
- 使用相同 SVG 内容替换 `apps/web_v1/public/favicon.svg`，保持现有 `index.html` 引用不变。
|
||
- 本任务不创建带 `SenlinAI` 文字的横版 LOGO。
|
||
- 本任务不修改 Tauri 平台的 PNG、ICO 或 ICNS 文件；这些格式可在后续独立任务中由 SVG 导出。
|
||
- 本任务不调整产品现有配色系统或其他界面布局。
|
||
|
||
## 可访问性与兼容性
|
||
|
||
- SVG 源文件包含简短的 `<title>`，便于独立查看时识别资源含义。
|
||
- 页面中作为装饰性图片使用时，由消费组件决定使用空替代文本或 `aria-hidden`，避免重复朗读。
|
||
- 图形不依赖颜色作为唯一含义；树形、年轮和节点具有独立的形状线索。
|
||
- SVG 应能由现代 Chromium、Firefox、Safari 和 Tauri WebView 正常渲染。
|
||
|
||
## 验收标准
|
||
|
||
- `senlinai-icon.svg` 是合法、可独立打开的 SVG 文件。
|
||
- 图形不包含任何文字或字母。
|
||
- 图标在 16px、32px 和 128px 渲染中无明显裁切、线条粘连或节点消失。
|
||
- 浅色和深色页面背景上均有清晰边界与足够对比度。
|
||
- Web favicon 使用新图标。
|
||
- 在 `apps/web_v1` 中运行 `node scripts/visual-check.mjs`、`npm run build` 和 `npm run lint` 均通过。
|
||
|