首页轮播图（核心视觉区）
| 位置 |
推荐尺寸 |
比例要求 |
适用场景 |
注意事项 |
| 顶部全屏横幅 |
750px × 375px |
2:1 |
品牌主推/活动促销 |
适配手机竖屏展示，避免文字过小；建议使用高清短边距设计 |
| 次级入口模块 |
700px × 280px |
约5:2 |
分类导航或热门商品集合页跳转 |
保持与整体风格统一，可添加半透明遮罩层提升文字可读性 |
商品详情页图片规范
主图展示区
| 类型 |
标准尺寸 |
最小边长 |
格式建议 |
优化要点 |
| 单张主图 |
800px × 800px |
≥600px |
PNG/JPG（压缩至200KB内） |
正方形构图突出主体；背景纯色优先；支持360°旋转查看功能最佳 |
| 多角度细节图 |
750px × 1000px |
WebP格式动态加载 |
按“正面→侧面→背面→局部特写”顺序排列；关键卖点用红色箭头标注 |
图文混排区域
| 元素类型 |
宽度限制 |
高度范围 |
对齐方式 |
排版技巧 |
| 文字说明板块 |
≤690px |
自动扩展 |
左对齐+首行缩进2em |
每段不超过5行，行间距1.5倍；重点数据用加粗/颜色区分 |
| 对比示意图表 |
650px |
自适应 |
居中显示 |
使用Infographic风格设计，关键指标用图标+数值组合呈现 |
分类导航栏图标
| 功能模块 |
图标尺寸 |
文件大小上限 |
设计风格建议 |
交互反馈要求 |
| 一级分类入口 |
120px × 120px |
50KB |
扁平化矢量图形 |
悬停时放大至130%，伴随0.3s渐变动画 |
| 二级子类目 |
100px × 100px |
40KB |
线性描边+单色填充 |
点击后出现波纹扩散效果，强化操作反馈 |
广告位&弹窗设计
固定侧边栏广告
| 位置 |
尺寸参数 |
出现频率控制 |
内容形式 |
避坑指南 |
| 右侧悬浮窗 |
180px × 300px |
每页仅限1个 |
优惠券领取/新品预告 |
设置关闭按钮明显可见；避免遮挡核心操作区域（如购物车图标） |
底部弹出式引导层
| 触发机制 |
最大高度 |
背景透明度 |
必备组件 |
转化优化策略 |
| 滚动至页面中部后触发 |
≤40%视窗高度 |
70%半透明黑色蒙层 |
输入框+按钮组合 |
提供键盘快捷提交支持；收集邮箱时默认勾选订阅选项（符合GDPR合规要求） |
常见问题与解答
Q1：为什么不同设备的图片显示效果差异很大？
A：主要受分辨率密度影响，例如同样标注为750px的图片，在Retina屏上实际需要准备双倍像素（1500px）才能保证清晰度，解决方案是采用响应式图片技术（srcset属性）,根据设备DPI自动加载适配版本。
Q2：如何平衡图片质量与加载速度？
A：推荐使用WebP格式替代传统JPEG，平均可减少30%文件体积，对于装饰性背景图，可采用CSS模糊滤镜预处理，既降低带宽消耗又营造视觉层次感，定期通过Lighthouse工具检测页面性能，确保所有图片通过速度
