张翔
2.8 KiB
2.8 KiB
网站优化重构设计方案
日期: 2026-02-26
一、设计背景
当前网站存在以下问题：
- 交互模式不统一：服务使用模态框，产品和案例使用独立页面
- 首页 About Section 与
/about页面内容高度重复 - 导航链接不一致：混合使用锚点链接和页面链接
- 配色方案不统一：同时使用品牌红和紫色
- 首页缺少案例展示区块
二、设计决策
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 | 联系表单 |
四、任务清单
高优先级
- 创建服务详情页
/services/[id] - 删除服务详情模态框
- 精简首页 About Section
- 首页新增 Cases Section
中优先级
- 更新导航链接
- 统一配色方案
- 创建服务列表页
/services
低优先级
- 优化 Footer 链接结构
- 检查所有页面的设计风格一致性