okooooooo/aitu
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
155ec00987b7fefac7c067128ba2a2e8774e0faf
aitu/docs/LOGO_CONCEPTS.md
T
liquidandClaude b99f45208c feat(sw): 完善 Service Worker 任务队列和工作流执行 
- 移除工作流内容哈希防重复，改用唯一 ID + 3秒输入防抖
- 修复图片/视频插入延迟问题，优先使用传入尺寸避免等待下载
- 修复元素插入左对齐问题
- 添加 SW 配置请求机制，确保工作流不会因配置缺失而卡住
- 优化日志输出

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-01-11 17:51:59 +08:00

312 lines
10 KiB
Markdown
Raw Blame History

# aitu (爱图) Logo 设计概念
## 🎨 设计理念
**核心概念**: 智慧之眼 - 结合AI芯片几何图案的视觉符号
**设计元素**: 眼睛 + AI芯片 + 像素粒子 + 渐变流动
## 💎 主Logo概念设计
### 概念1: 智慧之眼（推荐）
```svg
<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- 外围眼形轮廓 -->
<path d="M40 20C55 20 70 35 75 40C70 45 55 60 40 60C25 60 10 45 5 40C10 35 25 20 40 20Z"
fill="url(#gradient1)" opacity="0.1"/>
<!-- 主眼球 -->
<circle cx="40" cy="40" r="18" fill="url(#gradient2)"/>
<!-- AI芯片图案瞳孔 -->
<rect x="35" y="35" width="10" height="10" fill="white" rx="1"/>
<rect x="37" y="37" width="6" height="6" fill="url(#gradient3)" rx="0.5"/>
<!-- 电路线条 -->
<path d="M32 32L28 28M48 32L52 28M32 48L28 52M48 48L52 52"
stroke="white" stroke-width="1.5" opacity="0.6"/>
<!-- 像素粒子装饰 -->
<rect x="15" y="25" width="2" height="2" fill="#FD79A8" opacity="0.8"/>
<rect x="63" y="35" width="2" height="2" fill="#A29BFE" opacity="0.8"/>
<rect x="20" y="55" width="2" height="2" fill="#6C5CE7" opacity="0.8"/>
<rect x="58" y="50" width="2" height="2" fill="#FD79A8" opacity="0.8"/>
<!-- 渐变定义 -->
<defs>
<linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#6C5CE7"/>
<stop offset="100%" style="stop-color:#FD79A8"/>
</linearGradient>
<linearGradient id="gradient2" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#6C5CE7"/>
<stop offset="50%" style="stop-color:#A29BFE"/>
<stop offset="100%" style="stop-color:#FD79A8"/>
</linearGradient>
<linearGradient id="gradient3" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#6C5CE7"/>
<stop offset="100%" style="stop-color:#5A4FCF"/>
</linearGradient>
</defs>
</svg>
```
### 概念2: 抽象几何（备选）
```svg
<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- V形状基础 -->
<path d="M20 20L40 60L60 20" stroke="url(#grad1)" stroke-width="8" fill="none" stroke-linecap="round"/>
<!-- A形状融合 -->
<path d="M25 45L35 25L45 45" stroke="url(#grad2)" stroke-width="4" fill="none" stroke-linecap="round"/>
<!-- 像素点装饰 -->
<circle cx="30" cy="35" r="3" fill="#FD79A8"/>
<circle cx="50" cy="35" r="3" fill="#A29BFE"/>
<circle cx="40" cy="50" r="3" fill="#6C5CE7"/>
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#6C5CE7"/>
<stop offset="100%" style="stop-color:#FD79A8"/>
</linearGradient>
<linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#A29BFE"/>
<stop offset="100%" style="stop-color:#6C5CE7"/>
</linearGradient>
</defs>
</svg>
```
## 📝 完整Logo组合
### 水平版本
```svg
<svg width="200" height="60" viewBox="0 0 200 60" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- Logo图标部分 -->
<g transform="translate(10, 10)">
<!-- 简化的眼形图标 -->
<ellipse cx="20" cy="20" rx="18" ry="12" fill="url(#logoGrad)" opacity="0.15"/>
<circle cx="20" cy="20" r="10" fill="url(#logoGrad)"/>
<rect x="17" y="17" width="6" height="6" fill="white" rx="1"/>
<rect x="18" y="18" width="4" height="4" fill="#5A4FCF" rx="0.5"/>
</g>
<!-- 文字部分 -->
<text x="60" y="25" font-family="Inter, sans-serif" font-size="18" font-weight="700" fill="url(#textGrad)">
Visu
</text>
<text x="60" y="42" font-family="Inter, sans-serif" font-size="18" font-weight="700" fill="url(#textGrad)">
AI
</text>
<defs>
<linearGradient id="logoGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#6C5CE7"/>
<stop offset="50%" style="stop-color:#A29BFE"/>
<stop offset="100%" style="stop-color:#FD79A8"/>
</linearGradient>
<linearGradient id="textGrad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#6C5CE7"/>
<stop offset="100%" style="stop-color:#5A4FCF"/>
</linearGradient>
</defs>
</svg>
```
## 🎯 应用场景展示
### Favicon (16x16)
```svg
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="8" cy="8" r="6" fill="url(#fav)"/>
<rect x="6" y="6" width="4" height="4" fill="white" rx="0.5"/>
<rect x="7" y="7" width="2" height="2" fill="#5A4FCF" rx="0.2"/>
<defs>
<linearGradient id="fav" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#6C5CE7"/>
<stop offset="100%" style="stop-color:#FD79A8"/>
</linearGradient>
</defs>
</svg>
```
### 移动端图标 (1024x1024概念)
```svg
<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- 圆角背景 -->
<rect width="120" height="120" rx="26" fill="url(#appBg)"/>
<!-- 主图标 -->
<g transform="translate(30, 30)">
<!-- 外围光晕 -->
<ellipse cx="30" cy="30" rx="28" ry="18" fill="url(#glow)" opacity="0.2"/>
<!-- 主眼球 -->
<circle cx="30" cy="30" r="20" fill="url(#mainEye)"/>
<!-- AI芯片瞳孔 -->
<rect x="25" y="25" width="10" height="10" fill="white" rx="2"/>
<rect x="27" y="27" width="6" height="6" fill="url(#chip)" rx="1"/>
<!-- 电路装饰 -->
<path d="M15 15L12 12M45 15L48 12M15 45L12 48M45 45L48 48"
stroke="rgba(255,255,255,0.4)" stroke-width="2"/>
</g>
<!-- 像素粒子 -->
<rect x="20" y="25" width="3" height="3" fill="#FD79A8" opacity="0.8" rx="1"/>
<rect x="97" y="40" width="3" height="3" fill="#A29BFE" opacity="0.8" rx="1"/>
<rect x="25" y="85" width="3" height="3" fill="#6C5CE7" opacity="0.8" rx="1"/>
<rect x="90" y="75" width="3" height="3" fill="#FD79A8" opacity="0.8" rx="1"/>
<defs>
<linearGradient id="appBg" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#8B7EE8"/>
<stop offset="50%" style="stop-color:#6C5CE7"/>
<stop offset="100%" style="stop-color:#5A4FCF"/>
</linearGradient>
<linearGradient id="glow" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#FFFFFF"/>
<stop offset="100%" style="stop-color:#FD79A8"/>
</linearGradient>
<linearGradient id="mainEye" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#FFFFFF"/>
<stop offset="30%" style="stop-color:#F8F9FF"/>
<stop offset="70%" style="stop-color:#A29BFE"/>
<stop offset="100%" style="stop-color:#6C5CE7"/>
</linearGradient>
<linearGradient id="chip" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#6C5CE7"/>
<stop offset="100%" style="stop-color:#5A4FCF"/>
</linearGradient>
</defs>
</svg>
```
## 🎪 动态效果概念
### CSS 动画示例
```css
/* Logo呼吸效果 */
@keyframes logoBreath {
0%, 100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.05);
opacity: 0.95;
}
}
.logo-animated {
animation: logoBreath 3s ease-in-out infinite;
}
/* 像素粒子浮动 */
@keyframes pixelFloat {
0%, 100% {
transform: translateY(0px) rotate(0deg);
}
33% {
transform: translateY(-3px) rotate(120deg);
}
66% {
transform: translateY(2px) rotate(240deg);
}
}
.pixel-particle {
animation: pixelFloat 4s ease-in-out infinite;
animation-delay: var(--delay, 0s);
}
/* 渐变色彩流动 */
@keyframes gradientShift {
0% {
background: linear-gradient(135deg, #6C5CE7 0%, #A29BFE 50%, #FD79A8 100%);
}
50% {
background: linear-gradient(135deg, #FD79A8 0%, #6C5CE7 50%, #A29BFE 100%);
}
100% {
background: linear-gradient(135deg, #6C5CE7 0%, #A29BFE 50%, #FD79A8 100%);
}
}
.gradient-animated {
animation: gradientShift 6s ease-in-out infinite;
}
```
## 📐 设计规范
### 比例关系
- **图标与文字**: 1:2.5 的宽度比例
- **内部间距**: 图标高度的 0.5 倍
- **最小尺寸**: 完整Logo最小120px宽度
- **清晰空间**: Logo周围预留Logo高度的 0.5 倍
### 颜色变体
1. **彩色版** (主要): 渐变色彩
2. **单色版** (备用): 纯白色或纯黑色
3. **反色版** (深色背景): 白色为主
4. **灰度版** (特殊场合): 中性灰色
### 禁用规范
- ❌ 不可拉伸或压缩变形
- ❌ 不可改变渐变方向
- ❌ 不可添加描边或阴影
- ❌ 不可在低对比度背景使用
- ❌ 不可将图标和文字分离超过标准距离
---
## 🛠️ 实现文件清单
### 需要制作的文件
- [ ] **logo.svg** - 完整矢量Logo
- [ ] **logo-icon.svg** - 仅图标版本
- [ ] **logo-horizontal.svg** - 水平布局版本
- [ ] **logo-monochrome.svg** - 单色版本
- [ ] **favicon.ico** - 网站图标
- [ ] **app-icon-*.png** - 各尺寸应用图标 (16px, 32px, 64px, 128px, 256px, 512px, 1024px)
- [ ] **social-preview.png** - 社交媒体分享图 (1200x630px)
### 开发集成
- [ ] 更新 React 组件中的 Logo 引用
- [ ] 替换 public 目录中的图标文件
- [ ] 更新 manifest.json 中的图标路径
- [ ] 修改 HTML head 中的 favicon 设置
- [ ] 调整 Loading 动画中的 Logo 效果
## 🎬 定制Logo设计 - 胶卷与画笔
### 创意概念 - aitu Logo
基于用户需求设计的专属Logo，结合了电影胶卷和画笔元素：
- **橙金色电影胶卷**: 飘带状设计，象征视频创作和媒体内容
- **蓝紫渐变画笔**: 专业画笔造型，代表AI绘画和创意设计
- **品牌名称**: aitu (爱图) - 传递对图片创作的热爱
### SVG实现
```svg
<!-- 完整设计请参考 aitu-logo.svg 文件 -->
```
文件位置：`docs/aitu-logo.svg`
### 设计要点 (v3.0 - aitu 品牌升级)
- **橙金胶卷**: 温暖的橙金色系，体现媒体内容的丰富与活力
- **蓝紫画笔**: 科技感的蓝紫渐变，象征AI技术的专业与创新
- **玫红点缀**: 创意激情色彩，营造艺术创作的热情氛围
- **飘带动感**: 立体飘带设计，传达创作过程的流畅与自由
- **品牌名称**: "aitu"字体设计，体现"爱图"的情感连接
---
*Logo设计概念 v1.0*
*创建时间: 2025-09-05*
Reference in new issue View Git Blame Copy Permalink