从第一笔SVG到品牌视觉系统定稿，6小时内的关键节点一览。
每个阶段的讨论焦点、设计决策、用户反馈和关键产出。
用户需求："龙虾老师"个人Logo，科技感、抽象图形、黑白均可、全场景适配（课件角标/文章水印/视频水印）。
参考故宫Logo的低干扰水印思路，设计几何化龙虾形象。
用户后来认为学士帽+书本太直白，推动了8方向探索和最终回归原版的决策。
10方案对比页：用户要求集中对比，生成含经纬线/钢笔触角/圆规钳/极简线描/盾徽/流线科技/印章/双色/等距投影等10个方向。
教师8方向：用户反馈学士帽太直白，探索烛光/讲台地球/钥匙/灯塔/年轮/射线/粉笔/黑板8种隐喻。
物种修正：用户反馈"有些像螃蟹了"，根因：六边形短躯干+对称钳+小尾扇+短触角=螃蟹视觉特征。6项修正：细长分段躯干、不对称钳、真尾扇、长弧线触角、眼柄+复眼突、4对步足。
此阶段暴露了"过度设计"问题——在龙虾身上叠加太多教师符号，反而丢失了物种辨识度。最终用户选择回归原版，仅做最小手术。
这次否决是项目的关键转折点——明确了"保持原版风格"的底线，后续所有修改都在V1.0骨架上做精确手术。
用户一度要求仅保留最下方2条步足，后又恢复全部6条。说明精确执行用户指令的重要性——不要自作主张删减。
用户透露空心眼圈的设计原意就是为装瞳孔预留的——这个意图在V5.0定稿时才揭示。
用户详细描述了7个使用场景：加载态/Hero态/角标态/入口态/分隔态/水印态/过渡态。
V2.0（眼睛不动BUG修复）→ V3.0（4项缺陷修复）→ V4.0（音效+白色主题+全身交互）→ V4.1（加载百分比/水印可见/入口缩小/过渡定位）
需要将Logo品牌系统适配到所有小程序/网页工具中，从视觉设计师、动效设计师、用户三个视角提供可落地的集成模块。
8个BUG的根因分析、修复方案和预防措施。
| # | 严重度 | 现象 | 根因 | 修复方案 |
|---|---|---|---|---|
| 1 | P0 | 品牌系统中眼睛不追踪鼠标 | SVG容器尺寸与viewBox缩放比计算错误。Hero用了460px高的容器而非200×200的SVG wrap | getMouseInSvg() 使用 (clientX-rect.left) * (200/rectWidth) - 100 精确映射 |
| 2 | P0 | 所有状态Logo偏到右下角 | JS buildLogoGroup() 设 transform="translate(100,100)"，HTML占位g已有相同transform → 双重嵌套 → 偏移到(200,200) |
删除JS中6处setAttribute('transform',...)，仅保留HTML占位g的transform |
| 3 | P1 | 加载动画只画了部分元素 | 用固定delay计算40笔，实际SVG只有38个[data-id]元素，且line/polygon的getTotalLength()部分为0 | 改用getTotalLength()获取精确路径长度，增加零长度fallback，元素总数修正为38 |
| 4 | P1 | 水印态完全不可见 | opacity设为0.04，加上SVG未设显式尺寸，浏览器计算为0×0 | opacity提升至0.10，SVG显式尺寸220px，加preserveAspectRatio |
| 5 | P1 | 入口点击后Logo不动，名片原地展开 | 点击事件只触发了卡片clip-path展开，没有对Logo本身做缩放+淡出 | Logo缩放至0.35+淡出，名片从中心圆形展开 |
| 6 | P0 | 过渡态Logo又偏右下角 | 过渡态动态创建SVG时，g元素未加translate(100,100) | 动态创建时补上g.setAttribute('transform','translate(100,100)') |
| 7 | P2 | 底部3个节点有不良视觉联想 | 设计时未考虑3个圆点排列在特定语境下的歧义 | 删除bottom-node/side-node-L/side-node-R，4套SVG同步更新 |
| 8 | P1 | 水印中"龙虾老师"字标与Logo重叠 | 全身水印SVG中字标和Logo在同一坐标系内，缩放后重叠 | 全身版+半身版双模式，字标独立层置底 |
从这个项目中提炼的10条设计与协作铁律。
Logo项目的技术架构和文件关系。
┌─────────────────────────────────────────────────────────────────┐
│ 龙虾老师品牌视觉体系 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
│ │ V5.0 SVG源 │───▶│ 交互入口 │───▶│ 活体系统 │ │
│ │ 4个文件 │ │ V3.0 │ │ V4.1 │ │
│ │ mark/full │ │ 活眼追踪 │ │ 12项交互 │ │
│ │ × black/white│ │ 名片展开 │ │ 6种音效 │ │
│ └──────────────┘ └──────────────┘ └──────────────┘ │
│ │ │ │
│ ▼ ▼ │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
│ │ 预览页 │ │ 水印包 │ │ 集成规范 │ │
│ │ V5.0 │ │ 4种场景 │ │ V1.0 │ │
│ │ 全场景演示 │ │ 透明度可调 │ │ 14个模块 │ │
│ └──────────────┘ └──────────────┘ └──────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ CSS Variables Layer │ │
│ │ --brand-fg --brand-bg --brand-accent --brand-surface │ │
│ │ 明暗双模自动切换 · currentColor 驱动 │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ Web Audio API Layer │ │
│ │ sfxBubble sfxClick sfxEntry sfxStomp sfxGrow sfxTrans │
│ │ 零外部文件 · 用户交互后激活 · 全局静音开关 │ │
│ └─────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────┘
| 类型 | 文件名 | 说明 | 状态 |
|---|---|---|---|
| SVG | logo_mark_black_v5.svg | V5.0 纯图标·黑标 (200×200) | ✅ 定稿 |
| SVG | logo_mark_white_v5.svg | V5.0 纯图标·白标 (200×200) | ✅ 定稿 |
| SVG | logo_full_black_v5.svg | V5.0 完整Logo·黑标 (400×320) | ✅ 定稿 |
| SVG | logo_full_white_v5.svg | V5.0 完整Logo·白标 (400×320) | ✅ 定稿 |
| HTML | logo_preview_v5.html | V5.0 预览页（全场景演示） | ✅ 定稿 |
| HTML | logo_interactive_entry_v3.html | 交互入口V3.0（活眼追踪+名片） | ✅ 定稿 |
| HTML | logo_watermark_package.html | 水印包（4种场景+透明度调节） | ✅ 定稿 |
| HTML | logo_living_system_v4.html | 活体Logo V4.1（12交互+6音效） | ✅ 最新版 |
| HTML | 龙虾logo视觉集成规范V1.0.html | 品牌集成设计规范（14模块） | ✅ 最新版 |
| HTML | logo_brand_system.html | 品牌视觉系统V1.0（7态组件库） | ⚠️ 有BUG |
| HTML | logo_preview.html — v4.html | V1—V4 各版本预览页 | 归档 |
| HTML | logo_interactive_entry.html / v2 | 交互入口V1/V2 | 归档 |
| HTML | logo_10_variants.html | 10方案对比页 | 归档 |
| HTML | logo_teacher_variants.html | 教师8方向探索 | 归档 |
| HTML | logo_lobster_fix.html | 物种修正6项 | 归档 |
| SVG | logo_*_v1—v4.svg | V1—V4 各版本SVG（共16个） | 归档 |
| PY | export_png.py | PNG导出脚本（需Inkscape） | 待测试 |
| HTML | 龙虾Logo项目复盘V1.0.html | 本文档 | ✅ 当前 |