贴纸预览静帧:商城白底与聊天深色底对透明边缘完全相反,单张 PNG 要在两种背景下都不过曝、不发灰
`sticker-preview-gif-png` 处理的是透明贴纸在「商城白底」与「IM 深色气泡」下的双重验收:GIF 常用索引透明加抖动,转 PNG 时半透明边若 matte 选错会在某一侧背景露灰圈。动效贴纸的静帧还要避免选中运动模糊帧导致轮廓发虚。过审包常要求纯透明,而抗锯齿天然带半透明,需要与审核规范对齐是修边、内缩还是接受有限羽化。忽略这些细节会出现「设计稿好看、上架截图翻车」的客诉。
贴纸 GIF→PNG:选轮廓最闭合的一帧,记录是否预乘 alpha,再黑白双底验收并在过审时准备「纯透」与「实底」双轨
- 挑选轮廓闭合、无长拖影的一帧,记录是否 premultiplied alpha;若贴纸有描边闪烁,避免取闪烁中间态。
- 在 #000、#FFF 与品牌浅灰底上叠放验收 halo;再缩到商店 64px 与聊天列表 96px 两档,确认锯齿来自量化还是降采样。
- 输出线上透明 PNG 与过审用实底 PNG 两套 URI,配置 CDN 规则;详情页继续提供 GIF 证明「会动」,减少「买了不动」误解。
贴纸类问答:半透明抗锯齿、顾客误以为「不会动」、以及审核要求背景全透明时的修边策略
设计师坚持「要动效中间最可爱的一帧」,但那一帧半透明边最重,过审又不通过,怎么折中?
拆分「营销预览帧」与「审核提交帧」:前者可略重动势,后者用修边或内缩 alpha 满足纯透要求。两帧都要在工单里标明用途,禁止混用一个文件同时过审与投放,避免审核截图与线上不一致引发纠纷。
同一预览 PNG 在深色聊天里正常、在商店白底出现一圈灰边,更像 matte 底色错了还是 alpha 合成顺序错了?
在 #000 与 #FFFFFF 上叠放同一张 PNG 对比:若灰边只出现在白底,多半是 flatten 时用了错误底色或未预乘 alpha。检查从索引透明转真透明时是否丢边;必要时用贴纸专用导出预设并禁止非整数缩放破坏半透明像素。
动效贴纸改成静帧预览后,用户投诉「买了不会动」,产品与详情页要怎么表述才不构成误导?
在首图角标注明「静帧示意」或「动画见详情视频/GIF」;商品参数里写明动效帧数与循环方式。列表仍可用 PNG 控体积,详情区保留 GIF 或短视频;客服脚本同步,避免把静帧当成最终交付形态。
源 GIF 描边圆滑,导出 PNG 后锯齿明显,是调色盘量化还是缩略尺寸被非整数除尽?
先在与源 1:1 像素下对比,若仍锯齿则查 256 色抖动是否在高对比描边上产生噪点;若在 64px 图标尺寸才出现,则是降采样 filter 问题。优先保持整数倍缩放,必要时用更高色深源重导,而不是事后锐化。
审核要求背景「完全透明」,但 GIF 抗锯齿带半透明边,一刀切会断边,如何与审核标准对齐?
向审核方索取允许的半透明像素比例或内缩 alpha 规范;技术上可轻微内缩或修边,并保留 GIF 动效版供体验。提交材料同时附黑白底截图证明无露边;若仍不通过,只能重做源或改用实底过审包与透明线上包分流。