HiveCosm 蜂巢认领页设计规范+可交互原型
日期：2026-02-23
执行Agent：Nova (KT-018) 设计规范 + Pixel (KT-006) HTML原型
任务来源：William 指令 - HiveCosm C端产品用户旅程 Step 3
状态：已完成
交付物
1. Nova - 设计规范文档 (920行)
- 文件：
02-蜂巢创科/Nova工作区/HiveCosm-蜂巢认领页设计规范-V1.0.md
- 内容：
- Design Tokens (色彩/字体/间距/圆角/动效)
- 页面三态设计 (认领前/认领动画/认领后)
- 5 Phase动画时序规范 (总计约4500ms)
- 星空Canvas粒子系统规格
- 响应式适配 (SE/Standard/Plus/Tablet)
- 无障碍设计 (WCAG AA, reduced-motion)
- 验收清单 (P0x10/P1x6/P2x4)
2. Pixel - 可交互HTML原型 (1118行)
- 文件：
02-蜂巢创科/HiveCosm/prototypes/hive-claim-prototype.html
- 单文件：CSS+JS全部内联，浏览器直接打开可用
- 功能：
- 星空Canvas粒子背景 (60fps, 3色粒子, 径向扩散)
- 蜂巢飘来动画 (1600ms缓出, 旋转+缩放+弹性)
- HV编号typewriter逐字效果 (光标闪烁, 弹性完成)
- 蜂巢脉冲发光激活效果
- 星空加速(空间跃迁)效果
- 银河首句话玻璃态卡片
- Reset Demo按钮可反复演示
设计决策
| 决策 |
说明 |
| 色系 |
深蓝黑(#0A0E17) + 蜂巢金(#F4B942) + 银河蓝(#4A9EFF)，对齐现有HiveCosm视觉方向 |
| 动画时长 |
5 Phase共约4500ms，不疾不徐的仪式感 |
| 蜂巢SVG |
六边形+渐变描边+内部网格纹理+径向线，暗示内部空间 |
| HV编号 |
等宽字体40px + 光标闪烁 + 弹性完成效果 = typewriter仪式感 |
| 星空系统 |
Canvas 2D (非WebGL，兼容小程序)，60粒子/帧，加速时120粒子+拖尾 |
| 玻璃态 |
backdrop-filter: blur(16px) + 半透明背景，加-webkit-前缀兼容 |
后续工作
- P1：蜂巢Dashboard设计规范 (Nova)
- P2：银河对话界面设计规范 (Nova)
- 微信小程序适配：将HTML原型转为WXML/WXSS (Pixel)
Nova + Pixel 联合交付 - 2026-02-23