133 lines
3.9 KiB
Markdown
133 lines
3.9 KiB
Markdown
# 🦋 小蝴蝶设计工作包 - 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
|
||
**创建人**: 小浣熊🦝
|
||
**适用设计师**: 小蝴蝶🦋
|
||
**项目阶段**: 设计准备阶段 |