张翔
636bc4ecde
- 新增 ADR 架构决策记录 (Design DNA 集成与深化) - 新增 CMS 系统设计文档 - 新增实施计划文档 (Phase1-3) - 新增 Bain 品牌升级设计规格 - 新增 E2E 分层测试套件 (P1-P4) - 新增视觉回归测试配置 - 新增光效分析、视觉验证等辅助脚本 - 更新验收测试报告
295 lines
12 KiB
Markdown
295 lines
12 KiB
Markdown
# 第二阶段设计规格：确立品牌（Bain 血肉）— 方案 B 中度 Bain 化
|
||
|
||
## 概述
|
||
|
||
基于 ADR-0004 确立的三阶段路径（Accenture 骨架 → Bain 血肉 → Porsche 点睛），当前进入第二阶段：借鉴 Bain & Company 的品牌清晰度，为网站注入"血肉"。
|
||
|
||
**本次升级定位：方案 B — 中度 Bain 化**
|
||
- 投入产出比最高：60% 工作量获得 85% Bain 效果
|
||
- 保留 Accenture 信息密度 + Porsche 品质感，不偏科
|
||
- 风险可控，后续可继续往方案 C（深度 Bain 化）深化
|
||
|
||
核心目标：从"有骨架"升级到"有血肉"——答案优先的内容策略 + 品牌红的精准运用 + 极简留白的视觉张力。
|
||
|
||
---
|
||
|
||
## 设计目标
|
||
|
||
1. **答案优先**：首屏 3 秒内看懂核心价值，所有 Section 标题结论化
|
||
2. **品牌清晰度**：品牌红精准点缀，首页 5 处强记忆点，面积 ≤ 5%
|
||
3. **案例冲击力**：成果前置，数字权重提升 2x，第一眼看到价值
|
||
4. **留白节奏**：关键区域增加 20-30% 留白，形成呼吸感
|
||
|
||
---
|
||
|
||
## 任务清单
|
||
|
||
### 任务 1：首页 Hero 深度重构（答案优先）
|
||
|
||
**文件：**
|
||
- `src/app/(marketing)/home-content-v11.tsx` → 升级为 v12
|
||
|
||
**改动点：**
|
||
|
||
#### 1.1 标题：从"愿景描述"改为"量化结论"
|
||
|
||
| 当前 | 改造后 |
|
||
|------|--------|
|
||
| 以战略远见<br/>驱动数字化**未来** | 数字化转型<br/>**成功率提升 3 倍** |
|
||
|
||
- 主标题直接给出最震撼的量化成果，第一眼抓住注意力
|
||
- 品牌红只高亮最核心的 1 个关键词（"成功率提升 3 倍"）
|
||
- 标题字号保持现有尺寸，字重从 700 提升到 800-900
|
||
|
||
#### 1.2 副标题：从"公司介绍"改为"战略性提问"
|
||
|
||
| 当前 | 改造后 |
|
||
|------|--------|
|
||
| 睿新致远 — 专注于为中型及成长型企业提供从战略咨询到技术落地的全链路数字化服务。 | 您的企业，准备好迎接下一阶段的增长了吗？ |
|
||
|
||
- 斜体 + 低对比度，作为"引子"而非主角
|
||
- 引发思考，让访客自我代入
|
||
|
||
#### 1.3 快速信任锚点：标题与 CTA 之间增加一行量化数据
|
||
|
||
```
|
||
500+企业验证 · 2.8x平均ROI · 40%交付周期缩短
|
||
```
|
||
|
||
- 3 个核心指标，横向排列，用圆点分隔
|
||
- 数字用品牌红 + 粗体，标签用弱化色
|
||
- 作用：标题震撼后，立即给出信任背书
|
||
|
||
#### 1.4 布局：从"左右分栏"改为"左重右轻聚焦布局"
|
||
|
||
- 左侧 65-70% 宽度承载核心信息（标题+数据+CTA+底部指标）
|
||
- 右侧 30-35% 留空（极简风格，减少视觉干扰）
|
||
- 去掉右侧"12年"独立卡片，数据融入底部数据条
|
||
|
||
#### 1.5 底部数据条：4 个核心指标横向排列
|
||
|
||
```
|
||
12年深耕 500+企业 98%续约率 6款自研产品
|
||
行业经验 客户信任 年度续约 全链路覆盖
|
||
```
|
||
|
||
- 数字用白色粗体，标签用弱化灰色
|
||
- 与底部有一定距离，作为 Hero 区的"收尾"
|
||
- 第 1 个指标的数字用品牌红（保持 1 处红点）
|
||
|
||
**设计规范：**
|
||
- Hero 垂直留白：py-28 → py-36（增加 30%）
|
||
- 标题字号：clamp(2.5rem, 6vw, 5rem)，字重 900
|
||
- 品牌红关键词占标题字数 ≤ 30%
|
||
- 战略问句：斜体，颜色透明度 50%
|
||
- 底部数据条：4 列网格，数字 2xl-3xl
|
||
|
||
---
|
||
|
||
### 任务 2：Section 标题全部结论化
|
||
|
||
**文件：**
|
||
- `src/app/(marketing)/home-content-v11.tsx`
|
||
- `src/components/sections/section-header.tsx`（如有）
|
||
|
||
**改造对照表：**
|
||
|
||
| 模块 | 当前标题 | Bain 式结论标题 |
|
||
|------|---------|----------------|
|
||
| **Stats（数据实力）** | 用数据说话的专业实力 | 12 年深耕，500+ 企业的共同选择 |
|
||
| **Services（服务体系）** | 四位一体的数字化服务体系 | 四大服务，覆盖数字化全链路 |
|
||
| **Industries（行业覆盖）** | 深耕六大核心行业 | 深入 6 大行业，懂业务才能做好数字化 |
|
||
| **Cases（案例研究）** | 可衡量的业务成果 | 每一个项目，都以业务改善为衡量标准 |
|
||
| **Approach（交付方法）** | 四步交付法，确保每一个项目成功落地 | 500+ 项目验证的交付方法论 |
|
||
| **Insights（洞察）** | 思想领导力 | 基于实践的行业洞见与方法论 |
|
||
| **CTA（转化区）** | 准备好开启您的数字化转型之旅了吗？ | 让数字化投入真正转化为业务增长 |
|
||
|
||
**改造逻辑：**
|
||
1. 从"我们有什么" → "你能得到什么"
|
||
2. 数据融入标题，增强可信度
|
||
3. 每个标题都是"承诺"，不是"分类"
|
||
4. SectionLabel（Eyebrow）保持英文（如 `Our Services`），作为节奏调节
|
||
|
||
---
|
||
|
||
### 任务 3：案例模块成果前置（Bain 式数据冲击力）
|
||
|
||
**文件：**
|
||
- `src/app/(marketing)/home-content-v11.tsx`（CasesSection）
|
||
|
||
#### 3.1 布局翻转：成果前置
|
||
|
||
| 当前顺序 | Bain 式顺序 |
|
||
|---------|------------|
|
||
| 挑战 → 方案 → 成果 | **成果 → 方案 → 挑战** |
|
||
|
||
- 访客第一眼看到震撼数字，被吸引后自然往下看"怎么做到的"
|
||
- 符合"答案优先"原则：先给结果，再讲过程
|
||
|
||
#### 3.2 数字权重提升 2x
|
||
|
||
当前：成果区在右侧 2/5，数字 5-6xl
|
||
改造后：成果数字横跨顶部全宽，数字 7-8xl
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────┐
|
||
│ 智能制造 CASE #01 │ ← 标签行
|
||
│ │
|
||
│ 40% 25% 99.5% │ ← 超大成果数字（7-8xl）
|
||
│ 生产效率 库存成本 数据准确率 │ 第1个用品牌红高亮
|
||
│ 提升 下降 提升 │
|
||
│ │
|
||
│ ────────────────────────────────────────────── │
|
||
│ │
|
||
│ 某大型制造企业 ERP 全面升级项目 │ ← 标题
|
||
│ │
|
||
│ [成果要点] [方案要点] [挑战要点] │ ← 要点式内容（非段落）
|
||
│ │
|
||
│ "睿新团队不仅完成了系统升级..." │ ← 客户证言
|
||
│ — CTO，某上市制造企业 │
|
||
└─────────────────────────────────────────────────┘
|
||
```
|
||
|
||
#### 3.3 三段式内容：从"段落"改为"要点"
|
||
|
||
| 当前 | 改造后 |
|
||
|------|--------|
|
||
| 每段 2-3 行描述文字 | 每行 1 个要点，bullet 列出 |
|
||
| 阅读成本高 | 扫描效率高 |
|
||
| 叙述感强 | 结论感强 |
|
||
|
||
**成果要点示例（用 ✅ 前缀）：**
|
||
- ✅ 项目一次性上线成功，业务中断 < 48 小时
|
||
- ✅ 生产排程效率提升 40%
|
||
- ✅ 库存周转率优化 25%
|
||
|
||
**方案要点示例（用 → 前缀）：**
|
||
- → 分步迁移策略，以数据中台为核心
|
||
- → 重构生产到财务全链路业务流程
|
||
- → 行业最佳实践 + 企业定制化结合
|
||
|
||
**挑战要点示例（用 ◇ 前缀）：**
|
||
- ◇ 原系统运行 8 年，数据孤岛严重
|
||
- ◇ 业务模式快速变化，系统支撑不足
|
||
- ◇ 决策效率低下，数据依赖人工汇总
|
||
|
||
---
|
||
|
||
### 任务 4：品牌红精准贯穿（朱砂点睛 2.0）
|
||
|
||
**核心原则：越少越珍贵。每一次品牌红出现，都必须是关键点。**
|
||
|
||
#### 4.1 首页品牌红使用清单（严格控制 5 处，面积 ≤ 5%）
|
||
|
||
| # | 使用场景 | 作用 | 强度 |
|
||
|---|---------|------|------|
|
||
| 1 | **Hero 主标题关键词** | 第一记忆点 | ★★★★★ |
|
||
| 2 | **Hero CTA 主按钮** | 转化驱动 | ★★★★☆ |
|
||
| 3 | **案例首个成果数字** | 数据冲击 | ★★★★☆ |
|
||
| 4 | **Section Eyebrow 下划线** | 节奏锚点 | ★★☆☆☆ |
|
||
| 5 | **CTA 区主按钮 + 关键词** | 最终转化 | ★★★★★ |
|
||
|
||
#### 4.2 需要减少/取消的品牌红使用
|
||
|
||
- ❌ 服务卡片左侧 hover 色条 → 改为白色/浅灰高亮
|
||
- ❌ 行业卡片图标色 → 统一用白色/深灰色
|
||
- ❌ 交付方法步骤数字的品牌红 → 改为深灰，hover 才出红
|
||
- ❌ Stats 区所有指标的后缀品牌红 → 只保留第 1 个用红，其余白色
|
||
- ❌ 服务卡片 link 文字品牌红 → 改为白色，hover 才出红
|
||
|
||
#### 4.3 Bain 心法
|
||
|
||
> 品牌红是"电吉他的失真音色"——整首歌只在副歌出现几次，每次出现都让人心跳加速。如果全程都用，就变成噪音了。
|
||
|
||
---
|
||
|
||
### 任务 5：留白节奏校准
|
||
|
||
**文件：**
|
||
- `src/app/(marketing)/home-content-v11.tsx`
|
||
- `src/app/globals.css`（如需调整令牌）
|
||
|
||
#### 5.1 Section 间距调整
|
||
|
||
| 当前 | 改造后 | 场景 |
|
||
|------|--------|------|
|
||
| py-20 ~ py-44 | py-28 ~ py-56 | 主内容 Section |
|
||
| mb-16 ~ mb-28 | mb-20 ~ mb-36 | 标题区与内容区 |
|
||
|
||
#### 5.2 留白梯度原则
|
||
|
||
信息越重要的区域，留白越大：
|
||
- **Hero / CTA**：最大留白（py-40 ~ py-56）
|
||
- **Stats / Cases**：中等留白（py-32 ~ py-44）
|
||
- **Services / Industries / Approach**：标准留白（py-28 ~ py-36）
|
||
|
||
#### 5.3 节奏变化
|
||
|
||
形成"信息密度 → 大留白 → 再信息密度"的呼吸节奏：
|
||
- Hero（大留白+信息聚焦）→ Services（高密度）→ Stats（中留白+数据）→ Cases（中留白+内容）→ ... → CTA（最大留白+聚焦）
|
||
|
||
---
|
||
|
||
## 验收标准
|
||
|
||
### 功能验收
|
||
- [ ] 首页首屏 3 秒内能看懂核心价值（量化结论 + 信任锚点）
|
||
- [ ] 所有 Section 标题为结论型表述（非描述/分类）
|
||
- [ ] 案例模块成果前置，第一眼看到核心数字
|
||
- [ ] 首页品牌红触达点 = 5 处，视觉面积 ≤ 5%
|
||
- [ ] Hero、CTA 区域留白比例符合 Bain 式极简美学
|
||
|
||
### 技术验收
|
||
- [ ] TypeScript 类型检查通过（0 errors）
|
||
- [ ] ESLint 检查通过（0 errors）
|
||
- [ ] Next.js 生产构建成功，无报错
|
||
- [ ] 响应式布局正常（sm/md/lg/xl 四断点）
|
||
- [ ] Lighthouse Performance ≥ 90（动效不影响性能）
|
||
|
||
### 设计验收
|
||
- [ ] 品牌红使用符合"朱砂点睛 2.0"原则（少而精）
|
||
- [ ] 信息层级清晰，标题/正文/辅助对比强烈
|
||
- [ ] 留白有节奏感，不拥挤也不空洞
|
||
- [ ] 数据呈现方式专业、有说服力
|
||
- [ ] 整体 Bain 气质明显，但保留 Accenture 信息密度和 Porsche 品质感
|
||
|
||
---
|
||
|
||
## 风险与注意事项
|
||
|
||
1. **内容质量风险**：答案优先需要高质量的量化数据支撑
|
||
- 缓解：真实数据优先，没有真实数据用方法论/框架替代
|
||
|
||
2. **留白过度风险**：留白太多可能显得内容单薄
|
||
- 缓解：信息密度与留白交替出现，形成节奏变化
|
||
|
||
3. **品牌红过度风险**：品牌红用太多会显得廉价
|
||
- 缓解：严格执行首页 5 处、面积 ≤ 5% 的约束
|
||
|
||
4. **风格融合风险**：Bain 化过度可能丢失 Accenture 和 Porsche 的优点
|
||
- 缓解：本次为中度 Bain 化，保留信息密度和动效品质，验证后再决定是否深化
|
||
|
||
---
|
||
|
||
## 迭代路径
|
||
|
||
- **当前（方案 B）**：中度 Bain 化，60% 工作量 / 85% 效果
|
||
- **下一步（方案 C，可选）**：深度 Bain 化——模块重排 + 极简大留白 + 纯排版驱动
|
||
- **决策点**：方案 B 上线后评估效果，再决定是否继续深化到方案 C
|
||
|
||
---
|
||
|
||
## 与 ADR-0004 的对应关系
|
||
|
||
- ✅ 第一阶段（Accenture 骨架）：已完成，设计令牌 + 组件体系 + 服务网格
|
||
- 🚧 **第二阶段（Bain 血肉）**：本次执行，答案优先 + 品牌清晰 + 极简留白
|
||
- ⏳ 第三阶段（Porsche 点睛）：待定，动效叙事 + 视差 + 品质感打磨
|
||
|
||
---
|
||
|
||
## 相关文档
|
||
|
||
- ADR-0004: 设计 DNA 深化方案——Accenture 骨架 + Bain 血肉 + Porsche 点睛
|
||
- CONTEXT.md: 朱砂点睛、答案优先、四层叙事模型等术语定义
|
||
- 2026-06-29-phase1-foundation-accenture-skeleton.md（第一阶段规格）
|