# Atlassian 风格品牌融合重构设计规格

**日期**: 2026-04-30
**状态**: 已审批
**参考**: Atlassian 官网设计思路 × Novalon 水墨科技品牌基因

---

## 1. 概述

### 1.1 目标

借鉴 Atlassian 官网的信息架构和交互模式，重构 Novalon 官网首页，实现"收敛但保留印记"的品牌升级——在保持朱砂红品牌色和书法标题辨识度的前提下，采用更专业、更清晰的白底信息展示风格。

### 1.2 范围

- Phase 1：首页重构 + 设计系统基础（本次规格范围）
- Phase 2：产品页/服务页迁移（后续）
- Phase 3：其余页面 + 设计系统完善（后续）

### 1.3 设计决策

| 决策项 | 选择 | 理由 |
|--------|------|------|
| 品牌方向 | B — 收敛但保留印记 | 专业感与品牌特色兼顾 |
| 交付节奏 | A+C 混合 — 首页驱动的设计系统 | 用实际页面需求驱动组件设计 |
| 首页布局 | 方案二 — 品牌融合重构 | Atlassian 架构 + Novalon 叙事 |
| 动效策略 | 大幅收敛 | 移除粒子/水墨，保留微交互 |
| 导航结构 | 4核心+2下拉 | 减少认知负担，产品矩阵预览 |

---

## 2. 品牌视觉规范

### 2.1 色彩（保留现有体系，新增场景色）

```css
/* 保留 */
--color-primary: #1C1C1C;
--color-brand-primary: #C41E3A;
--color-bg-secondary: #FFFBF5;
--color-bg-tertiary: #F5F5F5;

/* 新增场景色 */
--color-challenge-isolation: #FEF2F4;   /* 系统孤岛 - 红底 */
--color-challenge-growth: #FFFBEB;      /* 增长瓶颈 - 黄底 */
--color-challenge-compliance: #F0FDF4;  /* 合规风险 - 绿底 */
```

### 2.2 动效策略

| 组件 | 策略 | 说明 |
|------|------|------|
| InkBackground | ❌ 废弃 | 水墨背景不再使用 |
| DataParticleFlow | ❌ 废弃 | 粒子动效过于花哨 |
| ParticleGalaxy | ❌ 废弃 | 粒子星河 |
| MouseInteractiveParticles | ❌ 废弃 | 鼠标交互粒子 |
| FluidWaveBackground | ❌ 废弃 | 流体波浪 |
| GeometricAbstract | ❌ 废弃 | 几何抽象 |
| GridLines | ❌ 废弃 | 网格线 |
| AdvancedFloatingEffects | ❌ 废弃 | 高级浮动效果 |
| SubtleDots | ✅ 保留 | 微妙圆点符合收敛方向 |
| GradientFlow | 🔧 简化 | 保留但降低强度，Hero极淡背景 |
| ScrollReveal/FadeUp | ✅ 保留 | 核心滚动交互 |
| AnimatedNumber | ✅ 保留 | 数据统计动画 |
| SealAnimation | 🔄 重构 | 仅用于品牌标题区 |

### 2.3 排版

- 品牌标题：青柳隶书（保留）
- 正文/导航：Geist Sans（保留）
- 代码/数字：Geist Mono（保留）

---

## 3. 首页结构

### 3.1 整体布局

```
Navigation     Logo + 产品▾ + 解决方案▾ + 服务 + 案例 + 关于我们
Section 1      Hero（暖白 + 书法标题 + 双CTA + 极简装饰）
Section 2      社会证明数据条（三列数字 + 客户Logo墙）
Section 3      核心产品矩阵（2×2 卡片 + 朱砂红左边框）
Section 4      挑战与场景入口（"您面临什么挑战？"三列痛点卡片）
Section 5      客户成果（深墨色背景 + 引言 + 量化数据）
Section 6      CTA（朱砂红渐变 + 行动号召）
Footer         品牌信息 + 导航 + 联系方式
```

视觉节奏：暖白 → 浅灰 → 白 → 暖白 → **深墨** → 朱砂红 → 浅灰

### 3.2 导航重设计

**当前**：8项平铺（首页/核心业务/解决方案/产品服务/成功案例/关于我们/新闻动态/联系）

**新导航**：
- Logo（睿新致遠）
- 产品 ▾ → 下拉展示 ERP/CRM/BI/CMS 四产品矩阵
- 解决方案 ▾ → 下拉展示制造业/零售/教育/医疗四行业
- 服务
- 案例
- 关于我们（含团队/新闻）
- 联系我们

### 3.3 Section 详细设计

#### Section 1: Hero

- **背景**：暖白 `#FFFBF5` → `#FFFFFF` 渐变 + 极简装饰圆圈（1px border, rgba(#C41E3A, 0.08)）
- **内容**：
  - 品牌标签：`NOVALON · 睿新致遠`（8px, letter-spacing: 2px, #C41E3A）
  - 主标题：`智连未来，成长伙伴`（青柳隶书, 大号, #1C1C1C）
  - 副标题：`从战略规划到系统落地，陪伴企业完成数字化转型的每一步`（14px, #5C5C5C）
  - 双CTA：`预约演示`（朱砂红实心）+ `了解方案`（墨黑描边）
- **动效**：入场 FadeUp + 极淡 GradientFlow 背景

#### Section 2: 社会证明

- **背景**：浅灰 `#F5F5F5`
- **内容**：三列数字（200+ 企业客户 / 15+ 行业覆盖 / 99.9% 系统可用性）
- **动效**：AnimatedNumber 数字滚动
- **可选**：客户 Logo 墙（横向滚动）

#### Section 3: 核心产品矩阵

- **背景**：白色 `#FFFFFF`
- **布局**：2×2 网格
- **每个卡片**：
  - 朱砂红左边框（3px solid #C41E3A）
  - 产品名称（14px, font-weight: 700）
  - 关键词描述（12px, #5C5C5C）
  - Hover：微提升 + 左边框加粗
- **动效**：StaggerContainer 依次入场

#### Section 4: 挑战与场景入口

- **背景**：暖白 `#FFFBF5`
- **标题**：`您面临什么挑战？`
- **三列卡片**：
  - 系统孤岛（#FEF2F4 红底 + 🏭）
  - 增长瓶颈（#FFFBEB 黄底 + 📈）
  - 合规风险（#F0FDF4 绿底 + 🔒）
- **交互**：Hover 色变加深 + 点击跳转对应解决方案页
- **动效**：FadeUp 依次入场

#### Section 5: 客户成果

- **背景**：深墨 `#1C1C1C`
- **内容**：
  - 标签：`客户成果`（8px, rgba(255,255,255,0.6)）
  - 客户引言（16px, #FFFFFF, italic）
  - 署名（12px, rgba(255,255,255,0.5)）
  - 量化数据：2-3 个指标（数字 #C41E3A + 标签 rgba(255,255,255,0.4)）
- **数据来源**：CASES 常量中的 testimonial + results
- **动效**：FadeUp 入场

#### Section 6: CTA

- **背景**：朱砂红渐变 `linear-gradient(135deg, #C41E3A, #A01830)`
- **内容**：
  - 标题：`开启数字化转型之旅`（白色, font-weight: 700）
  - 副标题：`免费咨询 · 专属方案 · 30天试用`（rgba(255,255,255,0.8)）
  - 按钮：`立即咨询`（白色描边）

---

## 4. Phase 1 沉淀组件

| 组件 | 职责 | 复用场景 |
|------|------|---------|
| MegaDropdown | 产品/解决方案矩阵下拉导航 | 全站导航 |
| ProductCard | 朱砂红左边框产品卡片 | 首页、产品列表页 |
| ChallengeCard | 痛点/场景入口卡片 | 首页、解决方案页 |
| StatsBar | 三列数据统计条 | 首页、产品页、关于页 |
| TestimonialBlock | 深色背景客户证言 | 首页、案例页、产品页 |
| CTASection | 朱砂红渐变行动号召 | 全站通用 |

---

## 5. 技术约束

- **框架**：Next.js 16 + React 19 + Tailwind CSS 4
- **动效**：Framer Motion 12（保留）
- **图标**：Lucide React（保留）
- **部署**：静态导出（保持现有架构）
- **测试**：Jest 单元测试 + Playwright E2E