如果你的同事工牌还只是普通姓名牌，那可能错过了让办公室生活更有趣的机会。近日，各路网友晒出创意的同事工牌：
- 姓陈的同事叫：涨点工资成不陈同学
- 姓唐的同事叫：美式不加唐同学
- 姓李的同事叫：别和我讲道李同学
- 姓杜的同事叫：遇事不决先百杜同学
- 姓郑的同事叫：总有刁民想害郑同学
- 姓吴的同事叫：每天都是星期吴同学
- 姓周的同事叫：工资太低只喝白米周同学
- 姓刘的同事叫：此地不宜久刘同学
- 姓曹的同事叫：再催就跳曹同学
这些谐音梗工牌不仅好玩，还能用来制作公众号推文素材。但问题来了：有了内容，该用什么样的形式呈现才能吸引读者互动？
两种主流呈现方式：点击换图 vs 滑动效果
实现创意工牌的展示，通常有两种思路：
- 点击换图：用户点击图片后切换成另一张图，操作简单，适合展示工牌对比或前后变化。
- 滑动效果：用户手动滑动或拖动元素，适合需要用户参与的互动玩法，比如让用户“滑出”隐藏文字。
下面分别讲解这两种方式的具体实现步骤。
点击换图：简单快速，适合展示对比
点击换图的制作相对简单，只需要准备两张尺寸完全相同的图片。以135编辑器的组件为例：
- 多次点击形状（X形状）过渡换图，组件ID：754
- 多次点击形状（一字闭合）过渡换图，组件ID：752
- 点击换图-自动还原，组件ID：653
如果希望使用其他点击换图效果，可以在SVG编辑器中搜索「点击换图」，选择喜欢的样式使用即可。
关键点：点击换图时，两张图片的尺寸必须一致，否则会出现错位。图片设计上只要保持尺寸统一，就能顺利实现切换。
滑动效果：互动性强，适合设计解密类玩法
滑动效果相比点击换图需要考虑更多细节，但它带来的互动体验也更佳。例如，利用底图固定、上层滑动的双层横向滑动效果，可以让用户通过滑动来“发现”隐藏内容。
你可能疑惑：中间这张图看起来没有内容？实际上它是一张透明底的PNG图片。当给它加上背景后，就能看到其中的内容。
设计滑动效果的核心思路：确定需要用户通过滑动来“填充”或“发现”的内容，将该内容单独做在一张图上。例如，案例中需要用户将「钟」字滑出来，那么背景图就制作成不含「钟」字的版本。
滑动效果制作全流程（以135编辑器为例）
准备好设计图后，就可以进入SVG编辑器制作滑动效果了。
第一步：进入SVG编辑器
在135编辑器左侧菜单中，点击SVG编辑器，进入编辑页面。
第二步：选择SVG效果组件
这是一个横向双层滑动效果，因此选择符合这个要求的组件。例如，底图固定双层横向滑动-左右留白-滑动图可跳转，组件ID：526。
第三步：上传素材图
将组件添加进编辑页面后，在右侧面板中上传对应的背景图和滑动图。
第四步：导出到135编辑器
制作完成后，点击右上角的「导出」按钮，选择「复制代码到135编辑器」。
然后回到135编辑器的编辑页面，按下Ctrl+V粘贴即可。如果需要将效果插入到模板的指定位置，可以使用区域代码。
第五步：替换内容（可选）
如果希望替换SVG中的图片，只需覆盖代码中的<img>标签内容即可。同理，替换段落文字时，覆盖<p>标签中的文字内容即可。
这样就能将SVG效果灵活嵌入到模板中，实现创意工牌或其他互动内容的展示。
总结
无论是点击换图还是滑动效果，都能让原本普通的工牌内容变得更有互动感和趣味性。关键在于：
- 点击换图：适合快速对比，设计简单，只需统一尺寸。
- 滑动效果：适合解密或填充类玩法，需要思考“隐藏什么”以及“用户如何发现”。
熟练掌握这些SVG组件的用法后，你可以举一反三，将同样的交互方式应用到节日祝福、产品功能展示、互动问答等多种场景中。
如果你有其他有趣的工牌创意或排版技巧，欢迎在评论区交流讨论。
关于作者
作者：135编辑器
简介：135编辑器是一款用于公众号等新媒体场景的图文编辑工具，主要围绕公众号推文的排版与内容制作，提供模板样式、图文编辑与 AI 辅助创作等能力，成立于 2014 年，至今已服务超过 2000 万用户。
本系列由 135编辑器内容团队撰写，持续整理公众号排版方法、图文编辑技巧与 AI 辅助创作的实操内容，供新媒体运营者参考。文中功能与数据以产品当前版本及官方说明为准。
