讲清产品页配图的类型分工、制作工具与统一风格的做法。下面按“先判断、再动手、最后验证”的顺序展开，每一步都给出可核对的检查点。

涉及 产品截图、演示图、配图制作 的关键动作都写成了具体命令或配置项，可以照着走，也可以当检查表用。

类型分工

界面截图讲事实、标注图讲流程、场景图讲故事，三类按页面叙事各就其位。

截图规范

统一浏览器宽度（如 1440）与窗口比例，带浏览器框更真实，别用大分辨率的原图直接缩。

标注工具

共用一套配色与圆角、阴影参数，图上的强调色与站点主色一致。

动图与视频

GIF 控制在 3MB 内，超过就换短视频或静图加说明。

维护节奏

产品改版后截图批量重拍，图上与线上不一致比没有图更伤信任。

速查表

常见问题

Q：按文中写法改完，怎么确认真的生效？
不要只看配置文件，用对应的验证命令或从外部视角复测一次；改完先小流量观察一段，再全量推进，出问题能马上回退。

Q：按文中的步骤做完，还需要注意什么？
把处理过程和最终生效的参数记下来。同类问题再出现时直接对照记录，比重查一遍快得多。

Q：业务规模小，也要按这套标准来吗？
不需要一次到位。先把影响最大的两项做到位，剩余的随着业务增长逐步补齐，比一开始就追求完美更容易落地。

小结

回到这篇的 5 个环节：类型分工、截图规范、标注工具、动图与视频、维护节奏。把这几个动作写进检查表，下次遇到同类问题按顺序过一遍，比凭经验跳步骤稳。

相关阅读：网站打开慢的全链路定位、用户协议与隐私政策：写什么才够用、低成本提升质感：配色与字体的基本原则。

延伸阅读：字体加载与图标方案：别让字体拖慢首屏、CSV与Excel的数据导入导出实操、网站防盗用：水印、右键与图片保护。