电商详情页布局设计规范

电商详情页布局设计规范一、核心布局原则（一）用户导向。以消费者浏览习惯和决策路径为设计基准，确保信息层级清晰、视觉流畅。1.视觉焦点区应占据首屏60%以上空间，优先展示产品核心卖点与价格信息。2.二级分类导航需设置在页面左上角或右上角，采用下拉式交互设计，避免横向滑动。3.详情页整体色调需与品牌VI系统保持一致，主色饱和度控制在40%-60%区间。（二）信息架构。遵循"价值感知-功能认知-信任建立-行动引导"四阶段信息传递逻辑。1.产品图库需采用360°全景展示，关键角度图例不得少于6张，标注尺寸参数。2.参数对比表格必须使用色块区分不同产品线，重要指标采用加粗格式。3.用户评价模块需设置滑动分页，每页展示5条带评分的图文评价。二、模块化设计规范（一）产品展示区。采用模块化组合设计，各模块间距不得小于20px。1.主图区必须使用统一尺寸的方形图片，边框宽度控制在2-3px。2.痛点解决方案需与产品图集采用错落排版，文字说明字号不得小于12px。3.促销信息需使用悬浮气泡设计，气泡边角圆弧半径不得大于10px。（二）内容呈现方式。采用图文混排与分段式布局，避免大段连续文字。1.技术参数说明必须使用项目符号，每项说明后需标注应用场景。2.使用场景图例需与文字说明保持对齐，图片下方必须标注使用场景名称。3.品牌资质认证需采用横向长条形展示，认证机构名称需使用小五号字体。三、交互设计标准（一）动态元素规范。所有交互元素需设置状态反馈，响应时间控制在300ms以内。1.轮播图切换动画必须采用淡入淡出效果，间隔时间控制在3-5秒。2.悬停提示需采用背景色变化而非文字放大，提示内容不得超过30字。3.表单输入框需设置默认值，错误提示必须与输入框保持垂直居中。（二）移动端适配。所有页面元素必须支持双指缩放，关键按钮需设置手势操作。1.小屏幕设备下导航栏必须采用折叠式设计，展开动画不得使用抖动效果。2.产品参数表需支持横向滑动，滑动时文字不得出现重叠。3.滚动条必须采用透明设计，滚动时不得出现页面闪烁。四、视觉设计细则（一）色彩系统。主色、辅色、点缀色必须符合品牌色板规范，色彩对比度需达到4.5:1。1.价格信息必须使用品牌主色，数字部分字体加粗，单位与数字间距为1px。2.促销标签需采用撞色设计，标签边框宽度不得小于1px。3.警告提示必须使用红色系，文字下方需添加红色底纹。（二）字体规范。标题与正文必须使用系统字体，字号比例遵循3:2原则。1.一级标题需使用黑体加粗，字号不得小于24px。2.正文说明必须使用宋体，行间距控制在1.5倍。3.特殊术语需使用楷体_GB2312，字号与正文保持一致。五、合规性要求（一）广告法合规。所有宣传用语必须标注"广告"标识，不得使用绝对化用语。1.产品功效描述需提供第三方检测报告，文字说明不得超出检测结论范围。2.用户评价必须经过实名认证，每条评价需标注购买时间。3.价格标示必须包含"￥"符号，折扣信息需与原价使用相同字号。（二）无障碍设计。所有图片必须添加alt属性，表单控件需设置键盘焦点。1.超长参数说明必须采用折叠面板，展开后文字行高不得小于18px。2.视障用户导航需设置跳过链接，跳转链接不得使用图片格式。3.色差对比度必须符合WCAG2.0标准，色盲用户测试通过率需达到90%。六、性能优化标准（一）加载速度。首屏内容加载时间不得超过3秒，图片压缩比例控制在80%以内。1.产品图集必须采用懒加载机制，预加载距离不得小于200px。2.CSS样式表需使用内联方式，关键样式不得使用@import。3.字体加载需设置FOUT解决方案，备用字体需使用系统默认字体。（二）跨平台兼容。页面必须支持IE11及移动端浏览器，响应式设计需通过ChromeDevTools测试。1.移动端页面宽度不得小于320px，元素边距需适配不同分辨率。2.JavaScript交互需使用Promise语法，错误处理必须使用try-catch结构。3.CSS动画需使用transform属性，避免使用opacity属性。七、附则说明1.本规范自发布之日起实施，由电商运营部负责解释。2.各产品线详情页设计需提交设计部审核，审核通过后方可上线。3.每季