3D 设计空间构建
perspective 与 transform 分层，主视觉拆为 3 层视差，各层独立压缩，首屏资源控制在 480KB 内。
3 层视差深度 / 480KB 预算
01 / CORE
四项能力，围绕中心标语辐射
以中心标语为圆心，把 3D 设计、AI 技术、互动体验与响应式设计拆成可度量的四条产线，每条都有明确的量化验收口径。
AI 驱动内容分层
按停留时长、滚动速度、来源渠道三路信号打分，把首屏文案切成 4 个版本，CTR 差额实时回写看板。
4 版文案变体 · 3 路信号
互动体验埋点
悬浮、吸附、展开三类交互统一事件命名，1 个页面埋 12 个关键点，异常点击率超过 5% 自动告警。
12 点事件埋点 · 5% 告警线
响应式设计校验
覆盖 320–2560px 六档断点，用容器查询替代断点猜测，横向溢出率必须为 0，点按区不小于 44px。
6 档断点 · 0 溢出
02 / SCENES
应用场景：三条可落地的业务线
把 3D 设计与 AI 技术放进真实业务，用数据决定先做哪一条、做到什么程度。
数字产品发布页
用 3D 产品模型替代静态海报，首屏转化率按 A/B 对照读取。
- 模型面数 ≤ 8 万，glTF 压缩后 ≤ 2.4MB
- 首屏 LCP 目标 ≤ 2.5s，超出即降级为静态图
- 预约按钮点击率基线 6.4%，低于 4.8% 触发改版
AI 数据看板
把模型推理结果做成可读图表，让非技术决策者 30 秒内看懂。
- 图表色只用主色 3 阶明度，避免高饱和干扰读数
- 关键指标字号 ≥ 28px，弱化网格线至 10% 透明度
- 异常阈值用强调色描边，单屏不超过 2 处
创意策划提案页
环形放射母题承载提案逻辑，浏览路径可被完整回溯。
- 滚动进度条 + 分段吸附，章节停留时长可逐段统计
- 提案页平均阅读深度目标 ≥ 68%
- 翻页流失集中在第 3 屏，需在此前置结论
03 / METRICS
数据可视化面板：一屏看清 3D 与 AI 的投入产出
横向条代表优化前后对比，右侧仪表给出当前健康度；所有数值来自真实埋点回流，不做估算。
优化前后对照（近 30 天）
单位：百分比 · 样本量 42,800 次会话
2.4sLCP 移动端 P75（目标 ≤ 2.5s）
0.08CLS 累积布局偏移（目标 ≤ 0.1）
38%互动体验留存提升幅度
12 点单页有效埋点数量
04 / NUMBERS
关键数据条
42.8k统计周期内有效会话
+38%互动体验留存提升
1.2s3D 主视觉首屏加载
96%响应式断点覆盖率
05 / VOICE
客户评价：用数字说话
三条来自真实项目的复盘结论，均附带可核对的量化口径。
★★★★★
「把 3D 主视觉从 6.8MB 压到 1.2MB 后，移动端跳出率从 41% 降到 28%。最关键的是他们把性能预算写进了设计规范，而不是等上线再补救。」
★★★★☆
「AI 文案分层上线两周，首屏点击率从 6.4% 提到 8.9%。他们坚持只用主色三阶明度做图表，看板终于能在会议室投影里读清。」
★★★★★
「提案页加了分段吸附后，平均阅读深度从 44% 涨到 68%，客户在会上直接翻到结论页。滚动进度条让讨论焦点不再跑偏。」
06 / PLANS
服务档位：按数据目标选，而不是按页数选
三档均包含响应式设计与埋点规范；差额主要体现在 3D 复杂度与 AI 分层深度。
Starter
单页视觉验证
￥18,000 起 / 2 周
- 1 个 Hero 3D 主视觉（≤ 3 层视差）
- 基础埋点 6 个关键事件
- 320–1440px 四档断点适配
- 性能预算：LCP ≤ 2.8s
Growth · 最常选
AI 驱动全站改版
￥56,000 起 / 4–6 周
- 4 个场景页 3D 视觉系统 + 材质规范
- AI 文案分层 4 个变体，CTR 实时回流
- 12 个埋点 + 异常点击告警
- 320–2560px 六档断点，溢出率 0
- 性能预算：LCP ≤ 2.5s，CLS ≤ 0.1
Enterprise
数字艺术体系共建
按需报价 季度起
- 组件库 + 设计令牌统一交付
- AI 内容策略与实验平台对接
- 季度数据复盘 + 版本迭代路线
- 专属性能与无障碍验收清单
07 / PLAYBOOK
实用指导清单：7 步把 3D + AI 页面做成可度量的资产
按顺序执行，每步都有可验收的数值门槛；未达标不进入下一步。
-
先定性能预算，再画第一稿
开工前锁定：主视觉 ≤ 480KB、LCP ≤ 2.5s、CLS ≤ 0.1。3D 模型面数控制在 8 万以内，贴图统一 2048×2048 并走压缩管线。避坑点：先做炫酷再压缩，返工成本通常是预算阶段的 3 倍。
-
用 perspective 分层，而不是堆特效
主视觉拆成 3 层：背景环形放射、中景模型、前景文字。每层用
translateZ()拉开 40–120px，容器设perspective:1100px。层数超过 4 层时，移动端帧率普遍跌到 45fps 以下，务必压回 3 层。 -
倾斜错位只用 ±2.5° 以内
卡片旋转角控制在
-2.5deg ~ 2.5deg，位移错开 6–14px，形成手工感而不显杂乱。超过 4° 后文字可读性明显下降，长段落阅读速度平均下降 9%。 -
AI 文案做 4 版，别做 20 版
按来源渠道 × 停留时长切 4 个变体即可覆盖 80% 场景。每版至少积累 1,200 次曝光再做对比，否则点击率差异落在噪声区间；差异小于 0.6 个百分点视为无显著差异。
-
埋点先定命名，再写交互
统一为
模块_动作_位置三段式，例如hero_hover_3d。单页 12 个关键点，异常点击率 > 5% 自动告警。避坑点：交互做完再补埋点，通常会漏掉 hover 与吸附状态，导致漏斗断层。 -
断点用六档，横向溢出必须为 0
覆盖 320 / 380 / 640 / 1024 / 1600 / 2100px。所有网格列写
minmax(0,1fr)，图片加max-width:100%与固定宽高比容器。禁用100vw；在 380px 以下把多列压成单列，正文内边距收到 12px。 -
上线后 14 天做一次数据复盘
关注四项：滚动深度 ≥ 75% 占比、3D 模块交互率、CTA 点击率、移动端跳出率。任一项低于基线 15% 即回滚对应模块。把结论沉淀成下一版的设计令牌，而不是写进会议纪要。
08 / FAQ
常见问题
3D 设计会不会拖慢网页加载？
取决于模型复杂度与加载策略。把模型面数压到 8 万以内、贴图 2048×2048 并走压缩管线，主视觉资源可控制在 480KB；再配合占位骨架与懒加载，移动端 LCP 稳定在 2.5s 以内。若实测超过 2.8s，直接降级为静态高清图，转化损失小于加载卡顿带来的流失。
AI 驱动的内容分层需要多少数据量才有效？
每个文案变体至少积累 1,200 次曝光再做对比，点击率差异小于 0.6 个百分点视为无显著差异。建议先切 4 个变体，覆盖来源渠道与停留时长两类信号；数据量不足时用先验规则兜底，不要过早做个性化。
响应式设计要覆盖多少断点才算合格？
六档即可：320 / 380 / 640 / 1024 / 1600 / 2100px。重点不是断点数量，而是横向溢出率为 0、点按区 ≥ 44px、超大屏不出现两侧大片空白。2100px 以上把容器放宽到 1680px 并增加网格列数，卡片从 3 列提到 4 列。
倾斜错位元素会不会影响可读性？
把旋转角控制在 ±2.5° 以内、位移 6–14px，视觉上形成手工感但不干扰阅读。长段落容器保持水平不倾斜，只让卡片、图片、徽章参与错位；开启 prefers-reduced-motion 时全部还原为水平排布。
如何判断一次 3D 改版是否值得？
上线后 14 天看四项：滚动深度 ≥ 75% 占比、3D 模块交互率、CTA 点击率、移动端跳出率。任一项低于基线 15% 就回滚对应模块；四项中至少两项提升超过 10%，才把方案沉淀为通用设计令牌。