admin/qxsleep-content

Fork 0

Files

FrankyPeh f5fbf356cd Initial qxsleep project baseline

2026-04-26 23:05:11 +08:00

3.9 KiB

Raw Permalink Blame History

🦋 小蝴蝶设计工作包 - 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	品牌一致性

设计系统要求

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

📱 响应式设计要求

断点设置

/* 移动端 */
@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
创建人: 小浣熊🦝
适用设计师: 小蝴蝶🦋
项目阶段: 设计准备阶段

3.9 KiB Raw Permalink Blame History Unescape Escape