Initial qxsleep project baseline

2026-04-26 23:05:11 +08:00
commit f5fbf356cd
95 changed files with 856370 additions and 0 deletions
--- a/design/设计工作准备-FOR-BUTTERFLY.md
+++ b/design/设计工作准备-FOR-BUTTERFLY.md
@@ -0,0 +1,133 @@
+# 🦋 小蝴蝶设计工作包 - 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  
+**创建人**: 小浣熊🦝  
+**适用设计师**: 小蝴蝶🦋  
+**项目阶段**: 设计准备阶段