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

10 KiB
Raw Blame History

aitu (爱图) Logo 设计概念

🎨 设计理念

核心概念: 智慧之眼 - 结合AI芯片几何图案的视觉符号
设计元素: 眼睛 + AI芯片 + 像素粒子 + 渐变流动

💎 主Logo概念设计

概念1: 智慧之眼（推荐）

<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 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 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 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 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 动画示例

/* 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设计 - 胶卷与画笔

基于用户需求设计的专属Logo，结合了电影胶卷和画笔元素：

  • 橙金色电影胶卷: 飘带状设计，象征视频创作和媒体内容
  • 蓝紫渐变画笔: 专业画笔造型，代表AI绘画和创意设计
  • 品牌名称: aitu (爱图) - 传递对图片创作的热爱

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