桥梁伸缩装置不是只靠一张外观图就能解释清楚的产品。梳齿板、锚固钢板、弹性模板、密封带以及路面和混凝土之间的关系，都藏在安装结构里。传统宣传页能够放参数和结构图，但当客户继续追问“哪一部分是产品”“内部怎样组成”“拆开以后各部件在哪里”时，二维图片需要销售人员反复指认。
本次案例的目标很具体：为路宝集团 WXCF-II 无砼无栓防滑密水梳齿伸缩装置制作一个网页端产品互动展示。页面不依赖专用软件，销售人员在手机或平板浏览器中即可打开；客户可以拖动旋转、双指缩放，并在整体展示与结构拆解之间切换。
先回答客户最需要看懂的问题
项目没有把所有信息同时堆在一个画面里。整体状态先建立产品与桥面、沥青、混凝土的安装关系，并用“无过渡砼、连梁锚固、无螺栓连接、低噪抗滑、连续密封”五个短标签概括产品特点。模型周围设置三个可点击标题：无过渡砼防冲击结构、无螺栓一体化连接、弧形渐变梳齿与连续密封。初始只显示标题，销售人员需要展开某个卖点时，再点开对应说明。
模型整理的重点，是结构正确和材质可辨
原始 STEP 模型进入网页前，先按展示任务重新整理。当前网页版本保留 60 个独立实体和 58,864 个三角面，把产品、沥青路面、上下两层混凝土、槽内填充和梳齿间填充分开管理。需要独立讲解的弹性模板与密封带总成也被拆成两个结构，避免在爆炸图中混成一个黑色块。
材质的目标不是追求离线渲染的复杂效果，而是在移动设备上保持流畅的同时，让客户一眼区分材料。两块弧形渐变梳齿板使用更偏灰的金属质感；其他钢件保留较明亮的反光；混凝土呈现上浅下深的层次；沥青保持细颗粒表面；弹性模板与密封带维持深色，梳齿间填充则调整为中灰色。这样旋转模型时，结构层次不会因为颜色接近而混在一起。
拆解动画先隐藏环境，再展开产品
点击“结构拆解”后，页面不会让路面和混凝土突然消失。沥青、混凝土、槽内填充和梳齿间填充先用 0.5 秒从完全可见过渡到透明，动画结束后，产品部件再沿竖直方向依次拉开。这个顺序让客户清楚看到：被隐藏的是安装环境，随后展开的才是产品本体。
| 展示状态 | 客户能看懂什么 | 适合的讲解环节 |
|---|---|---|
| 整体展示 | 安装位置、外观、三项结构特点与五个产品标签 | 初次介绍、客户快速浏览 |
| 结构拆解 | 各部件名称、上下层级和技术参数 | 深入沟通、方案说明与内部培训 |
互动设计不是让模型“多动几下”，而是控制信息出现的顺序。先看安装状态，再隐藏环境，最后理解部件，客户不需要自己猜哪些结构属于产品。
销售现场需要的是随手可用，而不是演示设备
页面针对手机和平板重新安排了标题、模型、标注、技术参数和底部切换按钮。销售人员可以把链接发给客户，也可以在拜访现场直接打开。模型支持拖动旋转、滚轮或双指缩放、恢复视角和全屏查看；静止时页面停止持续绘制，动画和交互发生时再更新画面，以减少移动设备的运行负担。
最终交付：一个可以持续复用的产品入口
项目最终交付的不只是一段固定视频，而是一套客户可以主动探索的产品资料。完整模型适合建立第一印象，结构拆解适合回答部件关系，页面下方的参数区则承接具体信息。根据路宝提供的产品资料，WXCF-II 系列页面呈现纵向伸缩量 40–160 mm、湿态抗滑指标平均值 BPN≥45、1 m/单元模块化分段，以及在 80 km/h 测试条件下噪声增加量不高于 5 dB 等资料信息；具体型号与工程选用仍应以正式技术文件为准。
这类工业产品互动页适合结构复杂、卖点隐藏在内部、销售需要反复解释的产品。制作前最重要的三类资料是产品三维模型、平面宣传资料和效果参考，同时还要先确定客户最需要看懂的问题。关于互动内容的探索路径，也可以参考天南文化的产品互动 H5 方法文章；如果产品更适合用镜头讲解运动过程，则可结合产品展示动画一起规划。
项目说明：本文中的结构名称和产品参数来自路宝集团提供的项目资料；网页三维模型用于销售沟通和结构理解，不替代施工图、设计计算、安装说明或正式检测文件。爆炸间距用于展示，不代表工程位移或实际拆装顺序。
