企业产品详情页形象规范

企业产品详情页形象规范一、页面布局规范（一）整体结构框架企业产品详情页需遵循“聚焦核心、层级清晰”的布局原则，采用“顶部导航-核心展示区-产品细节区-信任背书区-行动引导区”的经典五层结构，确保用户能在3秒内捕捉核心信息，10秒内完成关键决策路径浏览。顶部导航区固定高度为80px，背景色采用企业标准主色调，左侧放置品牌LOGO（尺寸为60*60px，边缘预留10px空白），右侧设置“首页-产品中心-解决方案-关于我们-联系我们”五个一级导航项，字体采用16号微软雅黑，字间距1px，鼠标悬停时文字颜色切换为品牌辅助色并显示下划线动画。核心展示区占据首屏70%以上高度，采用“主视觉图+核心卖点”左右分栏布局，左侧主视觉图宽度占比65%，右侧核心卖点区占比35%。主视觉图需为产品使用场景实拍图或高精度渲染图，分辨率不低于19201080px，支持点击放大查看细节；右侧核心卖点区采用“标题+3-5个核心优势”结构，标题使用24号加粗字体，核心优势采用18号字体搭配圆形图标，图标尺寸为3030px，与文字左对齐，每项优势之间预留20px间距。产品细节区采用模块化布局，每个模块高度控制在400-600px之间，模块之间设置1px浅灰色分隔线，间距为30px。模块标题统一使用20号加粗字体，左侧添加8px宽品牌主色竖条作为视觉引导。内容呈现可根据产品特性选择“参数表格+场景图”“功能演示视频+文字说明”“对比图表+优势解析”等组合形式，确保信息传递直观高效。信任背书区采用横向滚动卡片布局，卡片宽度为200px，高度为120px，卡片之间间距为20px，包含合作伙伴LOGO、客户评价、权威认证证书三种类型。合作伙伴LOGO需保持底色透明，尺寸统一为12080px；客户评价采用“用户头像+星级评分+评价内容+用户身份”结构，头像尺寸为6060px，星级评分采用金色实心五角星，评价内容控制在100字以内；权威认证证书需展示证书缩略图，点击可查看高清扫描件。行动引导区固定在页面底部，高度为100px，背景色采用品牌主色调加深10%的渐变效果，左侧放置咨询热线（字体为18号加粗白色字体）和在线客服入口（图标尺寸为4040px，悬停时显示“点击咨询”提示文字），右侧设置“立即购买”和“预约演示”两个按钮，按钮尺寸为16050px，圆角半径8px，采用品牌主色填充，文字为16号加粗白色字体，点击时显示阴影放大动画。（二）响应式适配规则为确保在不同设备上的浏览体验一致性，详情页需实现全响应式适配，断点设置为360px（手机端）、768px（平板端）、1200px（桌面端）三个级别。手机端布局采用纵向流式布局，顶部导航区转为汉堡菜单（图标尺寸为40*40px，位于屏幕右上角），核心展示区主视觉图全屏展示，核心卖点区移至主视觉图下方，采用“图标+文字”上下排列结构；产品细节区每个模块标题居中显示，内容改为单列布局；信任背书区转为纵向卡片堆叠布局，卡片宽度为100%；行动引导区按钮改为上下排列，宽度为100%，按钮之间间距为15px。平板端布局介于手机端和桌面端之间，顶部导航区显示3个核心导航项，其余项折叠至更多菜单；核心展示区采用“主视觉图上+核心卖点下”的上下布局；产品细节区模块保持两列布局，宽度各占50%；信任背书区保持横向滚动布局，但卡片尺寸缩小为150*90px。桌面端布局保持初始设计，当屏幕宽度超过1920px时，页面内容居中显示，两侧留白，留白区域采用浅灰色背景，避免页面内容过宽导致阅读疲劳。二、视觉设计规范（一）色彩系统企业产品详情页需严格遵循品牌色彩体系，主色调、辅助色、中性色的使用比例控制为6:3:1，确保页面视觉风格统一协调。主色调为企业品牌标准色，仅用于顶部导航栏、核心卖点区标题、行动引导区、按钮、模块标题引导条等关键视觉元素，占页面色彩比例的60%。主色调的色值需精确到RGB、CMYK、HEX三种格式，例如：RGB(255,0,0)、CMYK(0,100,100,0)、#FF0000，确保在不同显示设备和印刷材质上颜色一致。辅助色为品牌主色调的衍生色，包括浅色调（主色调亮度提高30%）、深色调（主色调亮度降低20%）、对比色（色环上相差120度的颜色），占页面色彩比例的30%。辅助色主要用于鼠标悬停效果、图标、强调文字、数据图表等元素，增强页面层次感和视觉活力。例如主色调为红色时，浅色调可用于按钮背景，深色调可用于文字颜色，对比色可用于图表中的重点数据标注。中性色包括白色、浅灰、中灰、深灰、黑色，占页面色彩比例的10%。白色（#FFFFFF）作为页面背景色，浅灰（#F5F5F5）用于模块背景、卡片阴影，中灰（#999999）用于次要文字、分隔线，深灰（#333333）用于正文文字，黑色（#000000）仅用于标题、加粗文字等核心信息。中性色的使用需避免过多颜色层次，确保页面简洁清爽。（二）字体系统页面字体采用“无衬线字体为主，衬线字体为辅”的原则，中文使用微软雅黑、思源黑体等无衬线字体，英文使用Arial、Helvetica等无衬线字体，确保在不同操作系统和设备上显示清晰。标题字体采用加粗样式，字号根据层级依次递减：页面主标题24-28号，模块标题20-22号，小标题18-20号；正文文字采用常规样式，字号为14-16号，行高设置为1.5-1.8倍，字间距0.5-1px，确保阅读舒适度。特殊场景字体使用需遵循以下规则：数据类信息（如价格、参数、销量）采用等宽字体，增强数据的可读性和专业性；英文品牌名、产品型号采用大写字母，字号比中文文字大2号，突出品牌辨识度；引用内容、备注说明采用斜体样式，字号比正文小2号，颜色为中灰色，与正文形成视觉区分。（三）图像与图标规范产品详情页中的图像需符合“高清、真实、统一”的标准，所有图像分辨率不低于72dpi，格式优先选择WebP（压缩率高、加载速度快），其次为JPG、PNG格式。产品实拍图需采用专业摄影设备拍摄，确保光线充足、背景干净、产品主体突出，避免出现反光、阴影过重等问题；渲染图需与实物保持高度一致，材质、纹理、光影效果需真实自然；场景图需选择与产品目标用户群体匹配的使用场景，人物表情自然，环境氛围符合产品定位。图标采用扁平化设计风格，线条粗细统一为2px，圆角半径统一为2px，确保风格一致。图标分为功能图标、指示图标、装饰图标三类：功能图标用于导航、按钮、核心卖点等元素，尺寸为2424px-4848px，颜色采用主色调或中性色；指示图标用于引导用户操作（如箭头、提示符号），尺寸为1616px-2424px，颜色采用辅助色；装饰图标用于增强页面视觉效果，尺寸为1212px-2020px，颜色采用浅灰色，避免过于突出影响核心信息传递。图标使用需遵循“简洁易懂、语义明确”的原则，避免使用过于抽象或歧义的图标，当图标含义不够明确时，需搭配文字说明。所有图标需提供矢量格式文件（AI、SVG），确保在不同尺寸下不失真。三、内容表达规范（一）产品标题与卖点产品标题需采用“品牌名+产品型号+核心功能/特性”的结构，长度控制在20-30字之间，例如“XX智能扫地机器人Pro激光导航自动集尘1800Pa大吸力”。标题需突出产品核心竞争优势，避免使用模糊、夸大的词汇，如“最好”“顶级”“第一”等，确保信息真实准确。核心卖点需提炼产品最具竞争力的3-5个优势，每个卖点采用“利益点+支撑点”的结构，例如“1800Pa大吸力轻松吸除大颗粒垃圾和深层灰尘”，其中“轻松吸除大颗粒垃圾和深层灰尘”为利益点，“1800Pa大吸力”为支撑点。卖点表达需简洁明了，避免使用专业术语和复杂句式，让用户一眼就能理解产品能为其带来的价值。卖点排序需遵循“重要性优先”原则，将用户最关心的问题放在首位，例如对于家电产品，用户最关心的是功能、性能、价格，因此卖点排序应为“核心功能-性能参数-价格优势-售后服务”；对于美妆产品，用户最关心的是功效、成分、使用感受，卖点排序应为“核心功效-安全成分-使用体验-品牌保障”。（二）产品参数与细节产品参数需采用表格形式呈现，表格边框为1px浅灰色，表头背景色为浅灰色，表头文字采用加粗样式，内容文字采用常规样式。参数分类需清晰合理，可分为“基本信息、核心性能、物理规格、包装清单”等类别，每个类别下的参数需按照逻辑顺序排列，例如基本信息类参数排序为“品牌、型号、上市时间、产品颜色”；核心性能类参数排序为“功率、续航、分辨率、精度”等。参数内容需准确无误，所有数据需经过严格验证，避免出现错误或虚假信息。对于专业参数，需添加通俗易懂的解释说明，例如“1800Pa大吸力”可补充说明“相当于普通吸尘器的3倍吸力，能轻松吸除地板缝隙中的灰尘和宠物毛发”；“续航时间120分钟”可补充说明“按每天使用30分钟计算，可连续使用4天”。产品细节描述需围绕用户使用场景展开，突出产品的人性化设计和品质感。例如描述手机的细节时，可写“采用3D曲面玻璃后盖，手感温润顺滑，指纹识别模块与机身融为一体，解锁速度快至0.3秒；边框采用航空级铝合金材质，经过阳极氧化处理，耐磨防刮，长时间使用仍能保持崭新外观”；描述家具的细节时，可写“沙发坐垫采用高密度海绵填充，回弹性好，久坐不易塌陷；靠背采用透气棉麻面料，亲肤舒适，能有效缓解背部疲劳；框架采用实木材质，经过防虫防腐处理，使用寿命可达10年以上”。（三）信任背书与评价信任背书内容需真实可信，合作伙伴LOGO需为正式授权使用的版本，避免使用模糊、变形的图片；权威认证证书需提供证书编号和查询链接，方便用户验证真伪；客户评价需为真实用户反馈，可从企业官方网站、电商平台、社交媒体等渠道收集，避免使用虚假评价或夸大其词的内容。客户评价展示需遵循“多样性、代表性”原则，选择不同性别、年龄、地域、使用场景的用户评价，展示产品在不同场景下的使用效果。评价内容需包含“使用体验、产品优势、改进建议”等方面，避免只展示正面评价，适当展示中立或轻微负面评价，增强用户对产品的信任度。例如展示一条负面评价时，可同时展示企业的回复内容，体现企业对用户反馈的重视和解决问题的态度。信任背书区需添加“更多合作伙伴”“更多认证证书”“更多用户评价”的链接，引导用户查看完整内容，增强页面的信息丰富度和可信度。四、交互体验规范（一）页面加载与响应产品详情页需优化加载速度，确保在2G网络环境下首屏加载时间不超过5秒，4G网络环境下不超过2秒。优化措施包括：压缩图像文件大小（采用WebP格式、设置不同分辨率的图像版本）、启用浏览器缓存、使用CDN加速、减少HTTP请求数量（合并CSS和JS文件）等。页面加载过程中需显示加载动画，加载动画采用品牌主色调，样式为旋转的品牌LOGO或进度条，避免使用过于复杂或刺眼的动画效果，影响用户体验。当页面加载完成后，需显示淡入动画，让页面内容逐步呈现，增强视觉层次感。页面响应速度需流畅，所有交互操作（如点击、滚动、悬停）的响应时间不超过0.5秒，避免出现卡顿、延迟等问题。按钮点击时需显示反馈效果（如颜色变化、阴影放大、文字上移），滚动页面时导航栏需根据滚动距离自动切换样式（如滚动超过首屏时，导航栏背景色变为不透明白色，添加阴影效果），提升用户操作的感知度。（二）导航与跳转页面导航需清晰明确，顶部导航栏的每个导航项需设置明确的跳转链接，点击后需在当前页面打开新内容（除非是外部链接），避免在新窗口打开，影响用户的浏览连贯性。面包屑导航需显示用户当前所在位置，例如“首页>产品中心>智能家电>智能扫地机器人Pro”，每个层级都可点击跳转，方便用户返回上一级页面。页面内部跳转需采用平滑滚动效果，点击锚点链接后，页面需以每秒600px的速度平滑滚动到目标位置，避免瞬间跳转导致用户迷失方向。锚点链接需设置在页面的关键位置（如核心展示区、产品细节区、信任背书区、行动引导区），方便用户快速定位到感兴趣的内容。外部链接需添加明显的标识，例如在链接文字右侧添加“↗”图标，提示用户点击后将离开当前页面。外部链接需在新窗口打开，避免用户误操作导致当前页面内容丢失。所有外部链接需经过安全检测，确保链接指向的网站安全可靠，避免用户遭受钓鱼网站或恶意软件的攻击。（三）表单与反馈行动引导区的表单（如预约演示、咨询报名）需简洁明了，表单字段不超过3个，仅收集必要的信息（如姓名、手机号、邮箱），避免给用户造成填写负担。表单输入框需设置默认提示文字，提示用户输入的内容格式和要求，例如手机号输入框提示“请输入11位手机号码”，邮箱输入框提示“请输入有效的邮箱地址”。表单提交按钮需设置明确的文字说明（如“立即预约”“提交咨询”），点击按钮后需显示提交成功的提示信息（如“预约成功！我们将在24小时内与您联系”），同时隐藏表单，避免用户重复提交。如果表单填写有误，需在对应的输入框下方显示红色错误提示文字，提示用户修改错误信息，例如“手机号码格式不正确，请重新输入”。用户反馈渠道需畅通，页面底部需设置“意见反馈”入口，点击后弹出反馈表单，表单内容包括“反馈类型、反馈内容、联系方式”三个字段，用户提交反馈后需显示“感谢您的反馈！我们将尽快处理并回复您”的提示信息。企业需安排专人负责处理用户反馈，确保在24小时内回复用户，提升用户满意度。五、移动端适配规范（一）触控交互设计移动端产品详情页需针对触控操作进行优化，所有可点击元素的尺寸不小于48*48px，元素之间的间距不小于8px，避免用户误触。按钮、链接、图标等可点击元素需设置足够的点击热区，热区范围可超出元素本身10px，提升点击成功率。触控操作需支持常见的手势交互，例如双击图片放大查看细节，双指捏合缩放图片，左右滑动切换图片，上下滑动浏览页面。图片放大后需支持拖动查看完整内容，点击图片空白处可返回原尺寸。页面滚动需流畅自然，支持惯性滚动，滚动速度需与用户滑动速度成正比，避免出现滚动不顺畅或卡顿的问题。当页面滚动到顶部或底部时，需显示弹性效果，提示用户已到达页面边界。（二）内容适配与简化移动端页面内容需进行适当简化，突出核心信息，避免信息过载。核心展示区的主视觉图需优先展示产品主体，去除不必要的背景元素，确保在小屏幕上清晰可见；核心卖点区的卖点数量可减少至3个，每个卖点的文字描述可适当缩短，突出关键信息。产品参数表格需采用纵向布局，每个参数占一行，参数名