docs: add website optimization design and implementation plan

2026-02-26 19:41:31 +08:00
parent 93f9bca2e4
commit 010fa4a025
2 changed files with 1750 additions and 0 deletions
@@ -0,0 +1,120 @@
+# 网站优化重构设计方案
+
+**日期**: 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. 检查所有页面的设计风格一致性