产品详情页视觉设计规范

产品详情页视觉设计规范【排版与格式标准】1.层级标记体系：一、标题文字（顶格）（一）标题文字（缩进2字符）（二）标题文字（缩进2字符）.......（三）标题文字（缩进2字符）（四）标题文字（缩进2字符）（五）标题文字（缩进2字符）（六）标题文字（缩进2字符）1.标题文字（序号与标题之间不加空格，缩进4字符）2.数量与结构约束：一、标题：全篇数量不得少于6个。二、二级标题：每个一级标题下设置2-5个不等，各章节二级标题数量不得相同。三、三级标题：涉及具体操作步骤、执行标准、量化指标的章节，必须使用“1.2.3.”三级标题；涉及宏观原则、组织架构、附则说明的章节，严禁使用三级列表，直接用段落融合阐述。3.序号后置规范：（一）权责划定。各单位主要负责人是第一责任人……（二）执行主体。设计部门牵头负责……（三）监督机制。品质管控组全程参与……（四）反馈渠道。用户意见收集专员负责……（五）时间节点。所有设计稿须在……（六）版本迭代。每季度更新一次……【一级标题创作规范】1.风格边界：必须使用书面语，庄重、简练、准确。2.标题长度：6-15个汉字。3.禁止模板：严禁所有一级标题使用“XXXX与XXXX”句式。【文档类型架构库】一、基础视觉框架（一）权责划定。各单位主要负责人是第一责任人，设计总监负责最终审核。（二）执行主体。设计部门牵头负责，技术部配合实现，市场部提供需求输入。（三）监督机制。品质管控组全程参与，每周召开例会汇报进度。（四）反馈渠道。用户意见收集专员负责整理，每月汇总提交设计组。（五）时间节点。所有设计稿须在产品上线前30日完成终稿，重大修改需3日审批周期。（六）版本迭代。每季度更新一次视觉库，新增元素需经全员培训。二、色彩系统规范（一）主色调定义。品牌蓝RGB（30,87,153），用于所有核心视觉元素。（二）辅助色搭配。白色FFFFFF用于背景，灰色D9D9D9用于分隔线。（三）警示色标准。红色FF0000仅用于错误提示，使用比例不超过5%。（四）色板管理。所有色彩需存入Figma色板库，命名格式“主色-01”。（五）色差校验。印刷品需使用Pantone色卡，屏幕显示以sRGB65536为准。（六）色盲适配。所有图表需提供黑白版本，确保色差对比度≥4.5:1。三、字体系统规范（一）标题层级。一级标题使用思源黑体加粗，字号32px；二级标题思源宋体常规，28px。（二）正文层级。正文使用思源宋体常规，18px，行距1.5倍。（三）特殊场景。活动弹窗使用微软雅黑，字号24px，加粗显示。（四）字体获取。所有商用字体需通过AdobeFonts申请授权。（五）兼容性测试。需在iOS/Android主流机型验证显示效果。（六）版权管理。自研字体需申请商标注册，商用字体按页数收费。四、图像处理标准（一）图片尺寸。主图宽度≥1080px，缩放后像素比1:1。（二）文件格式。产品图使用JPEG，场景图使用PNG，动效使用GIF。（三）压缩标准。图片PPI≥300，文件大小≤500KB。（四）版权审核。所有素材需提供授权证明，禁止使用未经许可的图库资源。（五）模糊处理。用户评价截图需使用高斯模糊，模糊半径5px。（六）动效规范。转场动画时长≤0.5秒，关键帧间隔≥0.2秒。五、布局结构规范（一）模块间距。同层级模块间距≥20px，不同层级间距×1.5系数。（二）留白比例。主视觉区域留白率≥25%，内容区留白率≥15%。（三）对齐原则。所有元素需遵循左对齐或居中对齐，禁止分散排列。（四）响应式适配。设计稿需标注断点：320px/768px/1024px。（五）滚动设计。下拉加载需配合渐显动画，加载时间≤1秒。（六）交互逻辑。点击区域最小尺寸≥44px×44px，边缘留白≥8px。六、组件库管理（一）组件分类。按钮、输入框、下拉菜单需标准化设计。（二）状态管理。每个组件需定义默认/禁用/加载三种状态。（三）命名规则。组件命名格式“模块-类型-状态”，如“按钮-主-默认”。（四）版本控制。组件库更新需记录修订日志，格式“YYYYMMDD-变更内容”。（五）使用规范。开发调用需遵循“设计稿标注尺寸±2px误差范围”。（六）维护机制。每季度抽检组件使用率，淘汰使用率＜5%的组件。七、验收标准（一）视觉核对。所有元素需与设计稿像素级比对，误差≤3%。（二）性能测试。首屏加载时间≤2秒，图片懒加载需完整显示。（三）无障碍设计。键盘可操作所有交互，屏幕阅读器可识别所有元素。（四）多终端验证。PC端、平板、手机需分别测试，重点验证折叠屏显示。（五）用户测试。招募30名目标用户进行可用性测试，记录所有反馈。（六）归档要求。设计稿、切图标注、设计说明需同步存档，命名格式“产品线-模块-日期”。八、附则说明本规范自发布之日起生效，由设计部负责解释。各产品线需指定1名视觉设计师作为对接人。重大调整需经设计委员会审议通过。所有设计