# 🦋 小蝴蝶设计工作包 - QXSleep 项目

## 🎯 设计任务概况
**客户**: QXSleep（床垫制造商）  
**网站类型**: B2B 企业官网  
**目标市场**: 欧美（英语/西班牙语/德语）  
**设计死线**: 2026-05-02（7天后 MVP）

## 📐 设计规格需求

### 页面清单（按优先级）
| 优先级 | 页面名称 | 语言版本 | 特殊要求 |
|-------|---------|---------|---------|
| P0 | 首页 Home | EN/ES/DE | 必须有询价入口 |
| P0 | 产品中心 Products | EN/ES/DE | 分类展示 + 产品详情 |
| P0 | OEM 服务 | EN/ES/DE | 工厂实力 + 合作流程 |
| P1 | 工厂参观 Factory Tour | EN/ES/DE | 图片轮播 + 视频 |
| P1 | 关于我们 About | EN/ES/DE | 公司介绍 + 团队 |
| P1 | 联系我们 Contact | EN/ES/DE | 表单 + 地图 |
| P1 | 404 错误页 | EN/ES/DE | 品牌一致性 |

### 设计系统要求
```css
/* 色彩规范 */
--primary-blue: #1e3a8a;    /* 主品牌色：专业蓝 */
--secondary-gray: #64748b;   /* 辅助色：商务灰 */
--accent-white: #ffffff;     /* 强调色：纯白 */
--success-green: #10b981;    /* 成功状态：绿色 */
--warning-amber: #f59e0b;    /* 警告状态：琥珀 */

/* 字体层级 */
--font-h1: 2.5rem/3rem;     /* 页面主标题 */
--font-h2: 2rem/2.5rem;     /* 章节标题 */
--font-h3: 1.5rem/2rem;     /* 小节标题 */
--font-body: 1rem/1.5rem;   /* 正文字体 */
--font-caption: 0.875rem/1.25rem; /* 图注字体 */

/* 间距系统 */
--space-xs: 0.5rem;   /* 8px */
--space-sm: 1rem;     /* 16px */
--space-md: 1.5rem;   /* 24px */
--space-lg: 2rem;     /* 32px */
--space-xl: 3rem;     /* 48px */
```

## 🖼️ 素材准备状态

### ✅ 可用参考
- 行业标杆网站分析（已完成）
- 色彩规范定义（已完成）
- 页面结构规划（已完成）

### ⚠️ 等待客户提供
- [ ] 公司 Logo（高清 PNG/SVG）
- [ ] 产品图片（每产品5张不同角度）
- [ ] 工厂照片（外观 + 生产线）
- [ ] 证书扫描件
- [ ] 公司介绍文字

### 🔄 设计工作流程
1. **线框图阶段**（1-2天）
   - 基于 PRD 绘制页面线框图
   - 确定信息架构和交互流程
   
2. **视觉设计阶段**（2-3天）
   - 应用设计系统创建高保真mockup
   - 三语版本的适配设计
   
3. **交付阶段**（1天）
   - 输出设计规范文档
   - 与开发团队对接

## 📱 响应式设计要求

### 断点设置
```css
/* 移动端 */
@media (max-width: 640px) { 
  /* 单列布局，大按钮，简化导航 */ 
}

/* 平板端 */
@media (min-width: 641px) and (max-width: 1024px) { 
  /* 两列布局，适中按钮 */ 
}

/* 桌面端 */
@media (min-width: 1025px) { 
  /* 多列布局，完整功能 */ 
}
```

### 关键交互要求
- **询价按钮**: 必须在每页显眼位置
- **语言切换**: 右上角固定位置
- **导航菜单**: 桌面端水平，移动端汉堡菜单
- **产品筛选**: 左侧边栏（桌面）/ 顶部筛选（移动）

## 🎨 设计风格指引

### 总体调性
- **专业可信**: 体现制造商的技术实力
- **国际化**: 符合欧美审美，避免本土化元素过重
- **现代简约**: 干净的布局，突出产品和内容

### 具体元素
- **图标风格**: 线性图标，统一粗细（2px）
- **按钮样式**: 圆角4px，有悬浮效果
- **卡片设计**: 微阴影，圆角8px
- **图片处理**: 统一滤镜，保持色调一致

## 🔍 SEO 设计考虑

### 小猎鹰🦅 SEO 审查要点
- [ ] 页面标题层级正确（H1>H2>H3）
- [ ] 图片必须有 alt 属性
- [ ] 关键词在设计中合理体现
- [ ] 页面加载速度优化（图片压缩）

## 📋 设计检查清单

### 交付前必查
- [ ] 三个语言版本视觉一致
- [ ] 所有交互状态已设计（hover/active/disabled）
- [ ] 移动端适配完整
- [ ] 品牌一致性检查
- [ ] 可访问性检查（对比度/字体大小）

---
**文档创建**: 2026-04-25 12:12  
**创建人**: 小浣熊🦝  
**适用设计师**: 小蝴蝶🦋  
**项目阶段**: 设计准备阶段