产品详情页设计规范

产品详情页设计规范【排版与格式标准】1.层级标记体系：一、标题文字（顶格）（一）标题文字（缩进2字符）（二）标题文字（缩进2字符）.......（三）标题文字（缩进2字符）（四）标题文字（缩进2字符）1.标题文字（序号与标题之间不加空格，缩进4字符）2.数量与结构约束：一、一级标题：全篇数量不得少于6个。二、二级标题：每个一级标题下设置2-5个不等，各章节二级标题数量不得相同。三、三级标题：涉及具体操作步骤、执行标准、量化指标的章节，必须使用“1.2.3.”三级标题；涉及宏观原则、组织架构、附则说明的章节，严禁使用三级列表，直接用段落融合阐述。3.序号后置规范：（一）权责划定。各单位主要负责人是第一责任人……（二）执行标准。必须严格遵循国家标准……正确示范：“（一）权责划定。各单位主要负责人是第一责任人……”错误示范：“（一）各单位主要负责人是第一责任人……”【一级标题创作规范】1.风格边界：必须使用书面语，庄重、简练、准确。2.标题长度：6-15个汉字。3.禁止模板：严禁所有一级标题使用“XXXX与XXXX”句式。【文档类型架构库】一、页面布局规范（一）整体框架。页面分为头部、主体、尾部三部分，各区域占比必须符合标准比例。（二）模块划分。主体区域至少包含产品图示、参数说明、使用场景三个模块。（三）视觉层级。头部信息优先级最高，使用最大字号和最醒目颜色，主体内容按重要性递减排列。二、图像处理标准（一）图片质量。所有产品图必须为高清原图，分辨率不低于300dpi。（二）尺寸统一。主图尺寸为800×800像素，场景图宽度不得小于1200像素。（三）标注规范。技术参数图必须标注单位，使用箭头指向关键部位。三、文字内容规范（一）标题层级。一级标题使用黑体三号字，二级标题使用楷体四号字，正文使用宋体小四号字。（二）字数控制。每个产品参数说明字数不得超过50字，段落间距为1.5倍行距。（三）术语统一。所有技术术语必须使用行业通用表述，首次出现需加括号标注英文对照。四、交互设计要求（一）按钮布局。购买按钮必须位于页面右下角，面积不小于100×40像素。（二）弹窗设计。产品咨询弹窗触发条件为鼠标悬停3秒，关闭按钮需置于右上角。（三）响应速度。页面加载时间不得超过3秒，图片懒加载优先级低于核心文案。五、合规性审查（一）资质要求。所有产品认证标识必须清晰可见，标注发证机构和有效期。（二）免责声明。使用场景描述必须注明“效果仅供参考”，字色与背景对比度不低于4.5:1。（三）隐私条款。用户评价展示需匿名化处理，敏感信息必须经过脱敏处理。六、多平台适配方案（一）响应式设计。页面必须支持1080×1920分辨率自适应，移动端优先适配。（二）浏览器兼容。Chrome、Firefox、Edge最新版必须完全兼容，IE11需做基础功能降级。（三）设备测试。每季度进行一次全面兼容性测试，记录所有已知问题并纳入迭代计划。【公文语体规范】1.禁止口语化。2.禁止主观抒情。3.禁止非规范时间表述。4.禁止非规范称谓。5.动词规范。6.禁止AI虚词。【硬性约束与负面清单】1.严禁假大空，严禁使用“赋能、闭环、抓手”等虚化套话。2.严禁教科书式的概念解释，直接输出实操指令。3.一级标题数量不得少于6个。4.只输出纯中文内容，不要输出文章主标题。【输出格式】一、页面布局规范（一）整体框架。页面分为头部、主体、尾部三部分，各区域占比必须符合标准比例。头部区域高度为80px，主体区域占据页面70%垂直空间，尾部区域固定高度50px。主体区域必须采用栅格化布局，模块间距不得小于20px。（二）模块划分。主体区域至少包含产品图示、参数说明、使用场景三个模块。产品图示模块占据主体区域50%横向空间，参数说明和场景图各占据25%空间，模块间必须使用分隔线区分。（三）视觉层级。头部信息优先级最高，使用最大字号和最醒目颜色，主体内容按重要性递减排列。产品名称必须使用黑体三号字加粗，副标题使用楷体四号字斜体，正文内容使用宋体小四号字。二、图像处理标准（一）图片质量。所有产品图必须为高清原图，分辨率不低于300dpi，压缩后文件大小不超过500KB。主图必须包含产品全貌、关键功能特写、材质细节三个角度，场景图必须覆盖至少三种典型使用环境。（二）尺寸统一。主图尺寸为800×800像素，场景图宽度不得小于1200像素，所有图片必须使用统一的色彩管理系统。技术参数图必须标注单位，使用箭头指向关键部位，标注文字使用黑体五号字。（三）标注规范。产品对比图必须使用表格形式，横向对比参数差异，纵向对比效果差异，表格边框宽度不得超过0.5px。使用效果图必须标注使用方法，使用步骤图必须标注操作顺序。三、文字内容规范（一）标题层级。一级标题使用黑体三号字，二级标题使用楷体四号字，正文使用宋体小四号字，所有标题必须居中对齐。产品名称必须使用黑体三号字加粗，副标题使用楷体四号字斜体，正文内容使用宋体小四号字。（二）字数控制。每个产品参数说明字数不得超过50字，段落间距为1.5倍行距，段落首行缩进2字符。正文内容每段必须包含一个核心卖点，卖点必须使用加粗字体突出显示。（三）术语统一。所有技术术语必须使用行业通用表述，首次出现需加括号标注英文对照，如“蓝牙5.0（Bluetooth5.0）”。产品规格必须使用表格形式，横向为参数名称，纵向为规格值，表格边框宽度不得超过0.5px。四、交互设计要求（一）按钮布局。购买按钮必须位于页面右下角，面积不小于100×40像素，使用渐变色背景，悬停时颜色变化幅度不得低于20%。加入购物车按钮必须位于购买按钮左侧，使用白色背景加阴影效果。（二）弹窗设计。产品咨询弹窗触发条件为鼠标悬停3秒，关闭按钮需置于右上角，弹窗内容必须包含三个核心卖点，卖点使用加粗字体突出显示。优惠券领取弹窗必须使用倒计时触发，倒计时时间不得少于60秒。（三）响应速度。页面加载时间不得超过3秒，图片懒加载优先级低于核心文案，核心文案必须使用静态资源加载。所有交互元素必须使用CSS3动画，动画时长不得超过0.3秒。五、合规性审查（一）资质要求。所有产品认证标识必须清晰可见，标注发证机构和有效期，认证标识尺寸不得小于20×20像素。3C认证必须标注认证编号和发证日期，有机认证必须标注认证机构名称。（二）免责声明。使用场景描述必须注明“效果仅供参考”，字色与背景对比度不低于4.5:1，免责声明必须使用斜体字标注，并置于页面底部版权信息上方。产品功效声明必须使用“经XX实验室检测”字样，检测报告必须可点击查看。（三）隐私条款。用户评价展示需匿名化处理，敏感信息必须经过脱敏处理，评价内容必须经过人工审核。用户隐私政策必须使用链接形式，链接颜色与正文文字颜色一致。六、多平台适配方案（一）响应式设计。页面必须支持1080×1920分辨率自适应，移动端优先适配，所有图片必须使用矢量图或高清位图。页面切换必须使用CSS3动画，动画效果必须平滑无卡顿。（二）浏览器兼容。Chrome、Firefox、Edge最新版必须完全兼容，IE11需做基础功能降级，如不支持Flex布局需使用float替代。所有浏览器必须支持HTML5语义化标签。（三）设备测试。每季度进行一次全面兼容性测试，记录所有已知问题并纳入迭代计划。测试设备必须包含iPhone12、华为Mate40、小米13等主流机型，测试环境必须包含Wi-Fi和4G网络。一、页面布局规范（一）整体框架。页面分为头部、主体、尾部三部分，各区域占比必须符合标准比例。头部区域高度为80px，主体区域占据页面70%垂直空间，尾部区域固定高度50px。主体区域必须采用栅格化布局，模块间距不得小于20px。（二）模块划分。主体区域至少包含产品图示、参数说明、使用场景三个模块。产品图示模块占据主体区域50%横向空间，参数说明和场景图各占据25%空间，模块间必须使用分隔线区分。（三）视觉层级。头部信息优先级最高，使用最大字号和最醒目颜色，主体内容按重要性递减排列。产品名称必须使用黑体三号字加粗，副标题使用楷体四号字斜体，正文内容使用宋体小四号字。二、图像处理标准（一）图片质量。所有产品图必须为高清原图，分辨率不低于300dpi，压缩后文件大小不超过500KB。主图必须包含产品全貌、关键功能特写、材质细节三个角度，场景图必须覆盖至少三种典型使用环境。（二）尺寸统一。主图尺寸为800×800像素，场景图宽度不得小于1200像素，所有图片必须使用统一的色彩管理系统。技术参数图必须标注单位，使用箭头指向关键部位，标注文字使用黑体五号字。（三）标注规范。产品对比图必须使用表格形式，横向对比参数差异，纵向对比效果差异，表格边框宽度不得超过0.5px。使用效果图必须标注使用方法，使用步骤图必须标注操作顺序。三、文字内容规范（一）标题层级。一级标题使用黑体三号字，二级标题使用楷体四号字，正文使用宋体小四号字，所有标题必须居中对齐。产品名称必须使用黑体三号字加粗，副标题使用楷体四号字斜体，正文内容使用宋体小四号字。（二）字数控制。每个产品参数说明字数不得超过50字，段落间距为1.5倍行距，段落首行缩进2字符。正文内容每段必须包含一个核心卖点，卖点必须使用加粗字体突出显示。（三）术语统一。所有技术术语必须使用行业通用表述，首次出现需加括号标注英文对照，如“蓝牙5.0（Bluetooth5.0）”。产品规格必须使用表格形式，横向为参数名称，纵向为规格值，表格边框宽度不得超过0.5px。四、交互设计要求（一）按钮布局。购买按钮必须位于页面右下角，面积不小于100×40像素，使用渐变色背景，悬停时颜色变化幅度不得低于20%。加入购物车按钮必须位于购买按钮左侧，使用白色背景加阴影效果。（二）弹窗设计。产品咨询弹窗触发条件为鼠标悬停3秒，关闭按钮需置于右上角，弹窗内容必须包含三个核心卖点，卖点使用加粗字体突出显示。优惠券领取弹窗必须使用倒计时触发，倒计时时间不得少于60秒。（三）响应速度。页面加载时间不得超过3秒，图片懒加载优先级低于核心文案，核心文案必须使用静态资源加载。所有交互元素必须使用CSS3动画，动画时长不得超过0.3秒。五、合规性审查（一）资质要求。所有产品认证标识必须清晰可见，标注发证机构和有效期，认证标识尺寸不得小于20×20像素。3C认证必须标注认证编号和发证日期，有机认证必须标注认证机构名称。（二）免责声明。使用场景描述必须注明“效果仅供参考”，字色与背景对比度不低于4.5:1，免责声明必须使用斜体字标注，并置于页面底部版权信息上方。产品功效声明必须使用“经XX实验室检测”字样，检测报告必须可点击查看。（三）隐私条款。用户评价展示需匿名化处理，敏感信息必须经过脱敏处理，评价内容必须经过人工审核。用户隐私政策必须使用链接形式，链接颜色与正文文字颜色一致。六、多平台适配方案（一）响应式设计。页面必须支持1080×1920分辨率自适应，移动端