张翔
636bc4ecde
- 新增 ADR 架构决策记录 (Design DNA 集成与深化) - 新增 CMS 系统设计文档 - 新增实施计划文档 (Phase1-3) - 新增 Bain 品牌升级设计规格 - 新增 E2E 分层测试套件 (P1-P4) - 新增视觉回归测试配置 - 新增光效分析、视觉验证等辅助脚本 - 更新验收测试报告
10 KiB
10 KiB
第二阶段设计规格：深度 Bain 化升级（方案 C）— 极简主义旗舰版
概述
基于方案 B（中度 Bain 化）的效果评估，用户明确表示"跟 Bain 没啥关系"，决定升级到方案 C：深度 Bain 化。
方案 C 的核心是从骨架层面换血——不是在 Accenture 骨架上套 Bain 文案，而是彻底换成 Bain 的极简骨架。
设计哲学：删到不能再删，才刚好够。
设计目标
- 首屏记忆点：用户看一眼首页，只记住一句话
- 极简视觉：删除所有装饰性元素，纯排版驱动
- 模块精简：从 8 个 Section 压缩到 5 个
- 字体对比：标题/正文比从 3:1 拉到 5:1
- 品牌红 ≤ 3 处强记忆点：比方案 B 更克制
任务清单
任务 1：Hero 极致 Bain 化
文件：
src/app/(marketing)/home-content-v13.tsx（从 v12 复制）
改动点：
1.1 布局：从左侧聚焦改为"左对齐 + 大留白"
- 内容占左侧 50-55%，右侧 45-50% 纯留白
- 完全左对齐，不居中
- 垂直居中（视觉中心偏上一点）
1.2 信息层级：从 5 层压缩到 3 层
- 删除：快速信任锚点行（500+企业验证 · 2.8x平均ROI · 40%交付周期缩短）
- 删除：底部数据条（12年/500+/98%/6款）
- 删除："了解我们的服务"次要按钮
- 保留：标题 + 战略性问句 + 单个主按钮
1.3 标题：字号加大，字重更粗
- 字号：从 7xl 提升到 8xl-9xl（lg 断点下）
- 字重：从 font-extrabold 改为 font-black
- 字距：从 tracking-tighter 改为 tracking-tightest
- 行高：从 leading-[0.92] 改为 leading-[0.88]
1.4 背景：纯墨黑 + 极微弱噪点
- 删除：FloatingInkParticles（浮动粒子）
- 删除：DiagonalLines（对角线装饰）
- 删除：GridLines（网格线背景）
- 删除：所有彩色光晕（blur-3xl 圆形渐变色块）
- 删除：斜切渐变背景（clipPath 的彩色渐变）
- 保留：GrainOverlay，opacity 从现有值降到 0.015-0.02（几乎看不见）
- 保留：底部渐变遮罩（从纯黑过渡到透明，极微弱）
1.5 滚动提示
- 保持 Scroll to explore，但更弱化
- 移到左下角（Bain 风格），而不是底部居中
任务 2：模块精简——从 8 个压缩到 5 个
首页最终信息架构（5 个模块）：
1. Hero（极致聚焦，一句话价值主张）
↓
2. Services + Industries（服务 + 行业合并）
↓
3. Cases（案例研究，成果前置）
↓
4. ApproachStrip（方法论数据条，极简）
↓
5. CTA（最终转化，首尾呼应）
2.1 模块 1：Hero（任务 1 已完成）
2.2 模块 2：Services + Industries 合并
上半部分：四大服务（更极简）
- 保持 4 卡片网格布局
- 删除：卡片内的 metrics（200+战略项目 / 95%落地成功率等）
- 删除：卡片 hover 光晕
- 删除：卡片左侧竖条色条
- 简化：hover 效果只有边框变亮 + 标题文字变色
- 保留：编号 + 标题 + 英文副标题 + 描述 + 亮点列表 + "了解详情"链接
下半部分：行业覆盖（降为子模块）
- 不再有独立的 Section 标题和 eyebrow
- 用小标题"覆盖 6 大核心行业"（弱化处理，font-medium，text-dark-text-secondary）
- 6 个行业卡片更紧凑：小图标 + 名称 + 一句话描述
- 2 行 × 3 列的网格布局
- 视觉权重约为服务模块的 1/3
2.3 模块 3：Cases（保留，成果前置已完成）
- 保持方案 B 的成果前置布局
- 删除：卡片 hover 光晕
- 保留 2 个精选案例
- "查看全部案例"链接保留
2.4 模块 4：ApproachStrip（方法论极简数据条）
从完整 Section 压缩为"一行数据带"：
- 3 个核心指标横向排列，用细竖线分隔
- 指标：500+项目验证 / 98%准时交付 / 97%客户续约
- 数字 + 标签，极简排版
- 背景：墨灰色（bg-ink-light），与上下有区分
- 高度精简（py-16 左右）
- 删除：四步法的完整卡片、步骤描述、图标等
2.5 模块 5：CTA（极致化）
- 大留白，一句话 + 一个按钮
- 类似 Hero 的排版风格，形成首尾呼应
- 标题："让数字化投入真正转化为业务增长"
- 按钮："预约咨询"
- 删除：次要按钮
- 删除：额外说明文字（"首次咨询完全免费"等）
2.6 被删除的模块
| 被删除模块 | 去向 |
|---|---|
| Stats（独立 Section） | 核心数据已融入 Hero 第一记忆点 + ApproachStrip |
| Industries（独立 Section） | 降为服务模块的子模块 |
| Approach（独立 Section） | 压缩为"方法论数据条" |
| Insights（独立 Section） | 首页删除，完全移到内页 |
任务 3：极简视觉——删除所有装饰性元素
3.1 全站删除清单
| 装饰元素 | 使用场景 | 处理 |
|---|---|---|
| FloatingInkParticles | Hero 背景 | ❌ 全部删除 |
| DiagonalLines | Hero、各 Section 角落 | ❌ 全部删除 |
| GridLines | Hero 背景 | ❌ 全部删除 |
| 彩色光晕（blur-3xl 圆形） | Hero、服务区、案例区等 | ❌ 全部删除 |
| 斜切渐变背景（clipPath） | Hero | ❌ 删除 |
| 服务卡片 hover 光晕 | 服务卡片右下角 | ❌ 删除 |
| 案例卡片 hover 光晕 | 案例卡片右下角 | ❌ 删除 |
| 行业卡片渐变背景 | 行业卡片 hover | ❌ 删除，改为简单边框变化 |
3.2 保留的视觉元素（极简）
| 元素 | 作用 | 强度 |
|---|---|---|
| GrainOverlay（噪点纹理） | 品质感，避免纯黑太"平" | opacity 0.015-0.02（几乎看不见） |
| 1px 细线分隔 | Section 之间的节奏锚点 | 浅灰色，opacity 0.1 |
| 品牌红下划线/色条 | 视觉锚点，品牌记忆 | 极细（2-3px），只在关键位置出现 |
| 纯墨黑 / 墨灰背景 | 两个层次足矣 | bg-ink / bg-ink-light |
3.3 Bain 心法
每删掉一个装饰元素，剩下的内容就重一分。删到不能再删了，才刚好够。
任务 4：字体对比强化——从 3:1 拉到 5:1
4.1 字号对比调整（lg 断点）
| 层级 | 方案 B | 方案 C | 变化 |
|---|---|---|---|
| Hero 标题 | 7xl (4.5rem) | 8xl-9xl (6-8rem) | +50-75% |
| Section 标题 | 5xl (3rem) | 6xl (3.75rem) | +25% |
| 卡片标题 | 2xl-3xl | xl-2xl | -15% |
| 正文 | base (1rem) | base (1rem) | 不变 |
| 辅助文字 | sm (0.875rem) | xs (0.75rem) | -15% |
| Eyebrow/标签 | 11px-12px | 10px-11px | 更精致 |
4.2 字重与字距调整
| 属性 | 方案 B | 方案 C |
|---|---|---|
| Hero 标题字重 | font-extrabold (800) | font-black (900) |
| Section 标题字重 | font-bold (700) | font-extrabold (800) |
| Hero 标题字距 | tracking-tighter | tracking-tightest |
| 标题行高 | leading-tight (1.2) | leading-none / 0.88-0.9 |
4.3 字体层级精简
从 6-7 个层级精简到 4 个层级：
- Hero 标题（最大，最粗，最紧）
- Section 标题（大，粗）
- 正文（标准）
- 辅助/标签（小，弱化）
任务 5：品牌红再克制——从 5 处降到 3 处
5.1 方案 C 品牌红清单（3 处强记忆点）
| # | 使用场景 | 作用 | 强度 |
|---|---|---|---|
| 1 | Hero 主标题关键词 | 第一记忆点 | ★★★★★ |
| 2 | 案例首个成果数字 | 数据冲击 | ★★★★☆ |
| 3 | CTA 主按钮 | 最终转化 | ★★★★★ |
5.2 进一步减少的品牌红
- ❌ Section Eyebrow 下划线品牌红 → 改为白色/浅灰色
- ❌ Hero CTA 按钮（已包含在 CTA 主按钮里，Hero 和 CTA 各算一个但同类型）
- ❌ Stats 后缀品牌红 → Stats 已删除
- ❌ 所有 hover 态的品牌红文字 → hover 仍可用品牌红（交互反馈，不算常驻）
5.3 原则
- 常驻品牌红 ≤ 3 处
- hover 态品牌红不计算在内（交互反馈）
- 每一处品牌红都必须是关键转化点
验收标准
功能验收
- Hero 首屏只有 3 层信息（标题/问句/按钮）
- 首页模块数量 = 5 个（Hero / 服务+行业 / 案例 / 方法论条 / CTA）
- 所有装饰性元素已删除（粒子/网格/对角线/光晕/渐变背景）
- 字体对比强烈（Hero 标题/正文 ≥ 5:1）
- 常驻品牌红 ≤ 3 处
技术验收
- TypeScript 类型检查通过（0 errors）
- ESLint 检查通过（0 errors）
- Next.js 生产构建成功，无报错
- 响应式布局正常（sm/md/lg/xl 四断点）
- 性能不下降（Lighthouse Performance ≥ 90）
设计验收
- 整体 Bain 气质明显——极简、精英、答案优先
- 信息层级清晰，对比强烈
- 留白充足，不拥挤
- 品牌红珍贵、精准
- 纯排版驱动，无多余装饰
风险与注意事项
-
信息承载量下降风险
- 模块从 8 个减到 5 个，有些信息被删除或移到内页
- 缓解：确保核心价值主张清晰，引导用户通过导航探索更多
-
"公司规模感"下降风险
- Accenture 式的信息密度让人觉得"这是家大公司"
- Bain 式的极简可能让人觉得"这公司有点小/神秘"
- 缓解：用数据（500+、98%）和案例来建立可信度
-
中国市场适应性风险
- 国内客户可能更喜欢"信息丰富、看起来很厉害"的网站
- 缓解：Bain 本身就是高端咨询的代表，极简 = 高端 = 自信
-
回滚方案
- v12（方案 B）和 v13（方案 C）并存
- 如方案 C 效果不好，可快速切回 v12
迭代路径
- 方案 B（已完成）：中度 Bain 化，60% 工作量 / 85% 效果
- 方案 C（本次）：深度 Bain 化，骨架级换血，极简主义旗舰版
- 方案 D（未来可选）：Bain + Porsche 融合——极简骨架 + Porsche 动效品质感
与 ADR-0004 的对应关系
- ✅ 第一阶段（Accenture 骨架）：已完成
- ✅ 第二阶段 B（Bain 血肉·中度）：已完成
- 🚧 第二阶段 C（Bain 血肉·深度）：本次执行，从骨架层面换血
- ⏳ 第三阶段（Porsche 点睛）：待定
相关文档
- ADR-0004: 设计 DNA 深化方案
- 2026-06-29-phase2-bain-brand-clarity-design.md（方案 B 规格）
- CONTEXT.md: 朱砂点睛、答案优先等术语定义