# 网站优化重构设计方案

**日期**: 2026-02-26

---

## 一、设计背景

当前网站存在以下问题：
1. 交互模式不统一：服务使用模态框，产品和案例使用独立页面
2. 首页 About Section 与 `/about` 页面内容高度重复
3. 导航链接不一致：混合使用锚点链接和页面链接
4. 配色方案不统一：同时使用品牌红和紫色
5. 首页缺少案例展示区块

---

## 二、设计决策

### 2.1 交互模式

**决策**: 统一使用独立页面，无弹窗交互

| 页面类型 | 首页展示 | 独立页面 | 交互方式 |
|---------|---------|---------|---------|
| 服务 | 概览卡片 | `/services/[id]` | 点击跳转 |
| 产品 | 概览卡片 | `/products/[id]` | 点击跳转 |
| 案例 | 概览卡片 | `/cases/[id]` | 点击跳转 |
| 新闻 | 概览卡片 | `/news/[slug]` | 点击跳转 |
| 关于 | 简短介绍 | `/about` | 点击跳转 |

### 2.2 服务详情页设计

**决策**: 采用故事化叙事风格

页面结构：
```
您可能面临的挑战 → 我们如何帮助您 → 服务流程 → 您将获得的改变 → 相关案例 → CTA
```

### 2.3 首页 About Section

**决策**: 精简版 + 核心数据 + CTA

内容：
- 品牌口号
- 品牌故事摘要（精简版）
- 核心数据（STATS）
- "了解更多"按钮跳转到 `/about`

### 2.4 首页 Cases Section

**决策**: 新增，展示3个精选案例

### 2.5 导航结构

**决策**: 全部改为独立页面链接

```
首页 → /
核心业务 → /services
产品服务 → /products
关于我们 → /about
新闻动态 → /news
联系我们 → /contact
```

### 2.6 配色方案

**决策**: 统一使用品牌红色系，移除紫色

配色体系：
```
主色调
├── 品牌红 #C41E3A（主强调色）
├── 深红 #A01830（hover状态）
└── 浅红 #FEF2F4（背景色）

中性色
├── 主文字 #1C1C1C
├── 次文字 #5C5C5C
├── 辅助文字 #718096
├── 边框 #E5E5E5
└── 背景 #FAFAFA / #F5F7FA
```

---

## 三、首页结构

调整后的首页 Section 顺序：

| 序号 | Section | 说明 |
|------|---------|------|
| 1 | Hero | 品牌展示 + 核心数据 |
| 2 | Services | 4个服务卡片（点击跳转详情页） |
| 3 | Products | 3个产品卡片（点击跳转详情页） |
| 4 | Cases | 3个精选案例（新增） |
| 5 | About | 精简版品牌故事 + 核心数据 |
| 6 | News | 最新动态 |
| 7 | Contact | 联系表单 |

---

## 四、任务清单

### 高优先级
1. 创建服务详情页 `/services/[id]`
2. 删除服务详情模态框
3. 精简首页 About Section
4. 首页新增 Cases Section

### 中优先级
5. 更新导航链接
6. 统一配色方案
7. 创建服务列表页 `/services`

### 低优先级
8. 优化 Footer 链接结构
9. 检查所有页面的设计风格一致性