张翔
121 lines
2.8 KiB
Markdown
121 lines
2.8 KiB
Markdown
# 网站优化重构设计方案
|
||
|
||
**日期**: 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. 检查所有页面的设计风格一致性
|