产品详情页视觉呈现标准

产品详情页视觉呈现标准【排版与格式标准】1.层级标记体系：2.数量与结构约束：3.序号后置规范：【一级标题创作规范】1.风格边界：必须使用书面语，庄重、简练、准确。2.标题长度：6-15个汉字。3.禁止模板：严禁所有一级标题使用“XXXX与XXXX”句式。【文档类型架构库】请覆盖以下核心逻辑模块，可根据《产品详情页视觉呈现标准》侧重点调整顺序、合并或拆分。一级标题数量不得少于6个。【公文语体规范】1.禁止口语化2.禁止主观抒情3.禁止非规范时间表述4.禁止非规范称谓5.动词规范6.禁止AI虚词【硬性约束与负面清单】1.严禁假大空，严禁使用“赋能、闭环、抓手”等虚化套话。2.严禁教科书式的概念解释，直接输出实操指令。3.一级标题数量不得少于6个。4.只输出纯中文内容，不要输出文章主标题。【输出格式】【重要指标】正文保证不少于3000字。直接输出文档正文内容。一、视觉风格统一性（一）色彩体系规范。产品主色调必须与品牌VI系统保持高度一致，RGB色值偏差不超过±5%。辅助色需控制在3种以内，且需通过色块占比测试（主色占比＞60%）。（二）字体层级分级。标题使用思源黑体，字号范围24-36px；正文使用思源宋体，字号18px；注释使用微软雅黑，字号14px。中英文混排时，西文使用Arial，字号需比中文小一级。（三）版式间距标准。页边距上下左右各设置30px，模块间距不得小于20px。图片与文字间距保持15px，按钮元素间距需符合F型阅读路径优化要求。二、产品信息层级化呈现（一）核心卖点提炼。一级卖点必须通过视觉加粗（字重700）或色块背景（饱和度＞70%）突出，每个产品页限定3个核心卖点。（二）参数化信息展示。规格参数需采用“名称：数值”的左对齐格式，单位统一使用国际标准符号（如g/kg）。复杂参数表需通过横向滚动条实现无限加载。（三）场景化文案适配。使用“场景+效果”的短句结构，如“户外使用-防水等级IPX8”，每行文案长度控制在25字以内。三、交互设计执行标准（一）图片质量要求。主图需满足1080P分辨率，动态图帧率不低于30fps。产品多角度展示时，相邻角度旋转差值需控制在15°以内。（二）视频播放规范。视频时长限制15-30秒，必须包含产品使用全流程，关键动作需通过字幕标注（字幕字号≥16px）。（三）按钮交互反馈。点击状态需通过颜色变暗（亮度降低20%）和动态边框（2px虚线）实现，悬停状态需提前300ms响应。四、移动端适配优化（一）响应式布局设计。使用Flexbox布局，关键元素（如价格、购买按钮）需在750px宽度下自动居中。（二）手势交互适配。下拉刷新距离需控制在60px±10px，滑动切换商品时需保持300ms的惯性效果。（三）性能优化指标。首屏加载时间需控制在3s以内，图片懒加载延迟需≥500px。五、合规性审查要点（一）广告法符合性。所有功效宣称必须标注“广告语”字样，且需通过第三方法务审核。（二）版权合规性。所有素材需提供授权证明，背景音乐需使用CC0协议资源。（三）无障碍设计。色盲模式需切换红绿色对比度＞4.5:1，键盘导航需覆盖所有交互元素。六、跨部门协作流程（一）设计交付标准。设计稿需包含切图标注（像素级精度），切图文件需命名“模块-编号-尺寸”。（二）开发对接规范。前端工程师需在3个工作日内完成静态页面还原度测试，UI设计师需全程参与联调。（三）验收执行标准。通过Chrome、Firefox、Safari三大浏览器全量测试，移动端需覆盖iPhone12/华为P50两种机型。七、附则说明（一）标准更新机制。本规范每半年修订一次，修订版需通过公司OA系统全量发布。（二