# 精选案例 | 安瑞信杰社媒SVG交互图文合集 - 发布日期：2023-03-21 - 原页面：https://www.energytrust.com.cn/news/%E7%B2%BE%E9%80%89%E6%A1%88%E4%BE%8B%20%7C%20%E5%AE%89%E7%91%9E%E4%BF%A1%E6%9D%B0%E7%A4%BE%E5%AA%92SVG%E4%BA%A4%E4%BA%92%E5%9B%BE%E6%96%87%E5%90%88%E9%9B%86 ![](https://www.energytrust.com.cn/images/articles/wx_A00_001.png) | 写在最前： SVG是一种交互图文形式，但我们做SVG又从不止于交互本身，让交互服务于内容，提升内容阅读体验与信息感知，才是合格有效的SVG交互。 ![](https://www.energytrust.com.cn/images/articles/wx_A00_002.png) |  图层重叠，镂空填充，形成对比感受 ![](https://www.energytrust.com.cn/images/articles/wx_A00_003.gif) 当有了某个品牌的加持后，不同人的生活会发生什么样的改变？这是一个很常见，但又必须不断去沟通的逻辑。 那怎么让用户更愿意接受和理解呢？我们以品牌颜色“橙”作为桥梁，“黑白画面”寓意人生的困难，当橙色注入生活后，问题便有了解决的思路。交互形式与内容相辅相成，实现有效传播。 ![](https://www.energytrust.com.cn/images/articles/wx_A00_005.png) |  从一个主体不断发散，自动展开多层含义 ![](https://www.energytrust.com.cn/images/articles/wx_A00_006.gif) 深圳是一个怎么样的城市？不同人有着不同的印象和理解。借助自动伸长弹出的形式，丰富涵义逐一出现，给读者带来极强冲击感。搭配深圳这一特殊城市，充分调动国民自豪感，为内容带来高度认可。 ![](https://www.energytrust.com.cn/images/articles/wx_A00_008.png) |  拟真老虎机，强化活动参与意愿 ![](https://www.energytrust.com.cn/images/articles/wx_A00_009.gif) 活动奖品多种多样，要怎么让用户感受到自己有机会获取到不同奖品？活动通过小程序参与，推文又该如何强化用户的参与意愿，避免流失？ 我们的答案是从推文开始玩，通过定制老虎机交互样式，用户在推文里就能提前预测了解奖品，从而更愿意前往参与。 ![](https://www.energytrust.com.cn/images/articles/wx_A00_011.png) |  多层展开，将剪彩作为交互无缝融入 ![](https://www.energytrust.com.cn/images/articles/wx_A00_012.gif) 随着第100家分行的开业，将前99家按地区划分并定制逐一点击展开的交互，进行一次全盘回顾。最后以共同“剪彩”作为交互点，邀请用户点击剪彩，共同开启100新征程。 | 信息融入场景，随着用户阅读层层揭开 ![](https://www.energytrust.com.cn/images/articles/wx_A00_014.gif) 制作一个充满书籍的场景，众多线索埋藏其中。随着用户的滑动，逐一出现揭秘，让阅读更顺畅有趣。 ![](https://www.energytrust.com.cn/images/articles/wx_A00_016.png) |  以影院为场景，揭幕交互感受精彩 ![](https://www.energytrust.com.cn/images/articles/wx_A00_017.gif) 一场重磅发布会，就像一出好戏揭幕，为观众呈现精彩。以“筑梦剧场”作为包装，邀请用户前来观赏，点击画面播放动画揭幕，整体收缩后进一步展开发布会中的一个个环节，正如一幕幕精彩画面。 |  滑动“撕开”创意祝福 ![](https://www.energytrust.com.cn/images/articles/wx_A00_019.gif) 面对开工节点，结合开工送福这一大众有共性的传统习俗，定制撕福纸的创新互动，还原真实场景与动作，丰富读者的阅读体验。 ![](https://www.energytrust.com.cn/images/articles/wx_A00_021.png) |  放映机形式，回顾历史关键画面 ![](https://www.energytrust.com.cn/images/articles/wx_A00_022.jpeg) |  随机结果，实现抽签结果 ![](https://www.energytrust.com.cn/images/articles/wx_A00_023.jpeg) |  用下滑形式，巧妙实现关灯与背后心里话 ![](https://www.energytrust.com.cn/images/articles/wx_A00_024.jpeg)