eedoo 爱豆官网：在「彩虹阶梯 × 豆豆 IP」上做一次产品化升级

三个目标

开发角度看，原稿的问题不在「不好看」，而在「不好用、不好落地」：颜色多而散、字重全堆在 800、卡片投影偏玩具感、首屏动画 9 秒太长、没有导航高亮/键盘操作/移动端菜单。升级围绕三点：

逐项对照

信息架构也做了收敛

原稿的「豆豆家族」是 IP 展示页，升级后加入「每位小豆 = 一级阶梯」的对应关系，并把阶梯区从静态图改成可点击的交互组件（点任一台阶，右侧切换该级的阶段说明、3 条关键做法、阶段序号），这样同一块区域既能给客户看体系，也能给销售当讲解工具。

配色系统：八种颜色 → 一个色族

核心方法：把 8 个阶梯色当作同一条「温度渐变」上的 8 个采样点，统一 L≈72、C≈0.17 的感知明度与彩度（更接近 OKLCH 思维），红-粉-紫段不再忽亮忽暗。同时为每阶派生 soft（浅底）、base（台阶）、deep（文字/描边）三档。

中性色与功能色

字体：从「圆润可爱」到「克制可信」

圆体在标题上确实亲和，但会削弱机构端的专业感，且 Windows 上回退到微软雅黑后字面不统一。升级后：

中文栈：PingFang SC → HarmonyOS Sans SC → MiSans → Noto Sans SC → Microsoft YaHei；西文与数字优先 Manrope（开源、可自托管、无授权顾虑）。

形状、层级与动效

去掉了 v1 的实色「硬糖」投影（0 6px 0 rgba(...)），改为「1px 描边 + 两层柔影」。这是从儿童品牌视觉转向产品官网视觉最关键的一步：结构靠描边，层级靠阴影，悬停只位移 4px。

首屏动画节奏（原 9s → 现 6.5s）

• 0.0s 标题两行遮罩上滑 + 渐变标题缓慢位移
• 0.34s 正文、按钮、信任标记依次淡入（stagger 120ms）
• 0.30–1.16s 八级台阶逐级抬升（stagger 80ms，spring 落位）
• 1.2–5.8s 豆豆沿实测台阶位置攀爬（JS 计算 --dx/--dy，任意宽度都踩得准）
• 5.8s 登顶欢呼 + 达标旗（此后常驻 bob 呼吸）
• 6.0–6.4s 三张系统提示卡贴出；随后攀爬豆回收，避免「悬空」

交付物与开发约定

• src/pages/index.html首页（可直接部署的静态页）
• src/css/tokens.css设计令牌：颜色、字体、圆角、阴影、动效、基础组件（按钮/标签/导航/卡片/页脚）
• src/css/home.css首页专属区块样式，全部基于 tokens，改色只改 tokens.css
• src/js/main.js导航、攀爬定位、数字滚动、阶梯 tab、环形节点分布、滚动显现（零依赖，<9KB）
• design-notes.html本说明页

已覆盖的工程化细节

• 响应式断点 980 / 900 / 760 / 560，移动端隐藏侧栏提示卡、后台侧栏转图标模式
• prefers-reduced-motion：全部动画降级为静态，内容不丢
• 键盘可访问：阶梯为 role="tablist"，可用 Tab 聚焦、Enter 切换；skip link 直达正文
• 语义化：nav / main / section / article / footer，标题层级不跳级
• 性能：无框架、无图片资源（豆豆为内联 SVG symbol），字体仅加载 Manrope 一个开源字族
• SEO：title / description / lang，页面锚点可分享