张翔
636bc4ecde
- 新增 ADR 架构决策记录 (Design DNA 集成与深化) - 新增 CMS 系统设计文档 - 新增实施计划文档 (Phase1-3) - 新增 Bain 品牌升级设计规格 - 新增 E2E 分层测试套件 (P1-P4) - 新增视觉回归测试配置 - 新增光效分析、视觉验证等辅助脚本 - 更新验收测试报告
160 lines
6.9 KiB
Markdown
160 lines
6.9 KiB
Markdown
# ADR 0003: 设计 DNA 整合方案——咨询为骨，水墨为魂
|
||
|
||
## 状态
|
||
|
||
已接受
|
||
|
||
## 日期
|
||
|
||
2026-06-28
|
||
|
||
## 上下文
|
||
|
||
基于对 Accenture、Bain & Company、Porsche Consulting 三家顶级咨询公司设计体系的深度分析，结合 design-dna 技能的三维度框架（Design System + Design Style + Visual Effects），需要决定 Novalon 睿新致远的设计 DNA 整合方案。
|
||
|
||
核心问题：
|
||
1. 现有的「水墨雅致」定位与新的「咨询专业风」是什么关系？
|
||
2. 重构的实施路径应该是什么？从零开始还是在现有基础上升级？
|
||
3. 管理咨询风 vs 技术产品风，我们偏向哪边？HSI 架构是否需要调整？
|
||
|
||
## 决策
|
||
|
||
### 1. 设计定位：咨询为骨，水墨为魂
|
||
|
||
**主体骨架：咨询专业风**
|
||
- 墨色为主、留白克制、强对比排版
|
||
- 数据驱动、答案优先的内容策略
|
||
- 模块化网格布局、工业化组件系统
|
||
- 参考对象：Accenture（系统化架构）+ Bain（品牌清晰度）
|
||
|
||
**文化基因：水墨文化基因（降级为点缀元素）**
|
||
- 从「整体设计风格」降级为「差异化点缀元素」
|
||
- 使用场景（清单式管理，总数 ≤ 6 处）：
|
||
- Logo（书法睿字 + 印章）
|
||
- 页面分隔线、装饰纹样
|
||
- 过渡动画的水墨感
|
||
- 页脚角落的水墨纹理
|
||
- 设计原则：远看专业沉稳，近看有文化韵味
|
||
|
||
**品牌色：朱砂点睛**
|
||
- 朱砂红 `#C41E3A` 保持不变
|
||
- 面积占比 ≤ 10%
|
||
- 使用场景：Hero 关键词、CTA 按钮、关键数字、模块标签、链接强调、下划线
|
||
- 用法向 Bain 看齐：精准、克制、有记忆点
|
||
|
||
**服务区分：编号+色条编码**
|
||
- 主要区分：大号数字编号（01、02、03...）
|
||
- 辅助区分：卡片左侧 4px 细色条
|
||
- 不整卡上色，保持专业感
|
||
|
||
### 2. 实施路径：三阶段升级（非推倒重来）
|
||
|
||
**不是从零开始，是「对齐标准 + 清理债务 + 重点升级」**
|
||
|
||
| 阶段 | 名称 | 核心任务 | 对应设计 DNA 维度 |
|
||
|------|------|---------|-----------------|
|
||
| **Phase 0** | 对齐与清理 | 组件版本统一、死代码清理、设计令牌审计、特效组件盘点 | Design System（打基础） |
|
||
| **Phase 1** | 首页与核心模板升级 | 首页重构、4 类详情页模板标准化、内容叙事优化 | Design Style（立品牌） |
|
||
| **Phase 2** | 动效与体验打磨 | 微动效系统、滚动视差、交互细节、性能优化 | Visual Effects（塑个性） |
|
||
|
||
Phase 0 是最关键的一步——先统一基座，后面的工作才能高效推进。
|
||
|
||
### 3. 叙事风格：入口差异化，设计语言统一
|
||
|
||
**HSI 架构保持不变**（Products / Solutions / Services），但不同入口采用不同叙事风格：
|
||
|
||
| 入口 | 叙事风格 | 内容侧重 | 参考对象 |
|
||
|------|---------|---------|---------|
|
||
| 首页 | 咨询风 | 价值主张、方法论、客户案例、数据洞察 | Bain + Accenture |
|
||
| Solutions（方案） | 咨询风为主 | 行业痛点 → 方案架构 → 推荐组合 → 案例 | Accenture 行业方案 |
|
||
| Products（产品） | 产品风为主，咨询风为辅 | 功能模块 → 技术规格 → 适用场景 → 相关方案 | 顶级 B2B 软件公司 |
|
||
| Services（服务） | 咨询风 | 服务流程 → 方法论 → 团队 → 交付承诺 | Bain 服务介绍 |
|
||
|
||
**设计令牌全站统一**（颜色、字体、间距、圆角、阴影），只有内容组织方式不同——骨架是一样的，只是肉的摆放不同。
|
||
|
||
## 备选方案
|
||
|
||
### 方案 A：纯水墨雅致路线（维持原定位）
|
||
|
||
- **优点**：差异化强，有文化辨识度
|
||
- **缺点**：
|
||
- To B 技术咨询场景下，专业感、可信赖感可能不足
|
||
- 客户决策链长，第一印象的专业度很重要
|
||
- 水墨风容易做得"文艺有余、专业不足"
|
||
- **否决原因**：业务属性决定了专业感是第一优先级
|
||
|
||
### 方案 B：纯咨询公司风（完全丢弃水墨）
|
||
|
||
- **优点**：专业感强，符合行业惯例
|
||
- **缺点**：
|
||
- 失去了「睿新致远」这个名字背后的文化内涵
|
||
- Logo（书法睿字 + 印章）和品牌名不搭
|
||
- 与 Accenture、Bain 等巨头比，缺乏差异化记忆点
|
||
- **否决原因**：浪费了已有的品牌资产，差异化不足
|
||
|
||
### 方案 C：水墨为主，咨询为辅
|
||
|
||
- **优点**：视觉独特，记忆点强
|
||
- **缺点**：
|
||
- 风险太高，可能显得不够专业
|
||
- 企业客户的采购决策者可能觉得"不靠谱"
|
||
- 实施难度大，平衡不好就会变味
|
||
- **否决原因**：与 To B 技术咨询的业务属性不匹配
|
||
|
||
## 理由
|
||
|
||
选择「咨询为骨，水墨为魂」的核心论据：
|
||
|
||
### 1. 业务匹配度最优
|
||
- To B 技术咨询，专业感和可信赖感是第一优先级
|
||
- 客户决策链长，需要用数据、案例、方法论建立信任
|
||
- 咨询风的内容策略（答案优先、数据驱动）天然适配
|
||
|
||
### 2. 差异化与专业性的平衡
|
||
- 主体用咨询风，确保专业感底线
|
||
- 细节用水墨文化基因，提供差异化记忆点
|
||
- 「远看专业，近看有韵味」——既靠谱，又有品味
|
||
|
||
### 3. 不浪费现有品牌资产
|
||
- 朱砂红品牌色、书法 Logo、「睿新致远」命名都已确定
|
||
- 不需要推翻重来，只是调整权重和出场方式
|
||
- 风险可控，过渡平滑
|
||
|
||
### 4. 实施路径务实
|
||
- 不是推倒重来，而是在现有基础上对齐、清理、升级
|
||
- Phase 0 先解决技术债务，为后续升级打基础
|
||
- 每一步都有可量化的成果指标
|
||
|
||
### 5. HSI 架构复用
|
||
- 已经充分论证过的 HSI 架构保持不变
|
||
- 只是不同入口的叙事风格做区分
|
||
- 设计令牌全站统一，工程效率高
|
||
|
||
## 后果
|
||
|
||
### 正面
|
||
- 专业感显著提升，更符合技术咨询公司的定位
|
||
- 保留了文化差异化，不会沦为千篇一律的咨询公司模板
|
||
- 实施路径清晰，风险可控，每一步都有明确的产出
|
||
- 代码库健康度提升（Phase 0 清理债务）
|
||
- 为未来的迭代打好了基础
|
||
|
||
### 负面
|
||
- 「水墨雅致」的粉丝可能会觉得"不够有特色了"
|
||
- Phase 0 是脏活累活，短期看不到视觉效果
|
||
- 两种风格的融合需要拿捏好分寸，执行不好可能不伦不类
|
||
|
||
### 风险
|
||
1. **风格融合风险**：咨询风和水墨元素如果融合不好，可能显得割裂
|
||
- 缓解措施：水墨元素清单式管理（≤ 6 处），严格控制使用场景
|
||
2. **Phase 0 动力风险**：清理工作缺乏视觉成就感，容易半途而废
|
||
- 缓解措施：用量化指标（组件数量、文件体积、测试覆盖率）衡量进展
|
||
3. **执行走样风险**：开发过程中可能无意识地加水墨特效，偏离主体定位
|
||
- 缓解措施：建立 Design Review 机制，每个新组件都对照设计 DNA 检查
|
||
|
||
## 相关决策
|
||
|
||
- ADR-0001: 重构路径选择——混合方案而非全站 web-design-engineer 替换
|
||
- ADR-0002: 信息架构与叙事模型——HSI 混合架构 + 四层叙事模型
|
||
- CONTEXT.md: 设计 DNA、咨询专业风、水墨文化基因、服务编号+色条编码等术语定义
|