<table><tbody>
除了干货，其它什么也没有
职场
数据
新媒体
设计
极客
新媒体高级交互排版定制：021 37218818
老板进入了设计部的夸夸群
丢下一句“改回第一稿”……
（点击上方绿色的「发送」按钮）
当然以上对话纯属虚构，是 JZ 为大家提供的一个趣味交互图文 SVG 代码模版。只要点击按钮就可以发送短句，并支持修改群成员的回复。修改方法将在后文详述，欢迎免费取用，但我们目前不向任何第三方编辑器授权引用。
模板保留了文字的文本格式，在快捷修改后能够生成新的夸夸群效果，比如▼
老板又进入了新媒体部的夸夸群
又丢下一句“预算不够的！”……
（点击上方绿色的「发送」按钮）
如何获取模版
如果想获取模板，可参与明天的第三期《硬核运营》微淘直播。我们将分享新媒体行业的黑科技软件/工具/网站，并在直播过程中提供模版下载的超链接。模板包含了
.html 代码包和AI 设计稿。
直播时间
3月22日13:00开始
复制以下口令，打开淘宝即可
￥pEprbxoCFe6￥
模版内含
如何使用模版
1.构思夸夸群的剧情
比如第一句文案可以是“XX产品上新了！”，下方群友夸夸产品；也可以是“XX项目启动了！”下方群友夸夸项目等……总之，你一共需要确定五段文案，以及群的名称要另行设定。
2.代码修改
在编辑器中直接通过查找功能，可以锁定模板中的对应文字位置。第一句文案在两处出现（文本框+对话框），其余文案各一次。每段文案修改时，除了最后一行请确保每行 10 个全角字符。代码的阅读、书写、修改基本规则在新书《硬核运营》中P132-146页可查阅▼
3.设计修改
注意如果对 AI 矢量稿进行了调整，那么代码的对应内容需要重构。务必确保对教程《教程｜高级 SVG 交互式排版入门指南》娴熟掌握，在修改时，不要轻易改动图层顺序。
4.定制服务
更长篇幅的夸夸群特效或其他创意交互图文，可添加微信号 Zhuoya_Work 或致电 021 37218818 联系。
技术实现原理
面向开发者级粉丝，我们依然提供对本套模板的一些技术分析讲解。首先，单次点击后的连续动画触发，运用的是和《》相同的设计原理，其 AI 中的图层编组顺序尤其重要▼
其次，本作品也重点实验了对<code><pointer-events>/<code>穿透触发的应用——手机壳透明图片通过<code><margin-top>/<code>覆盖住了交互区，基于穿透触发确保了用户依然可以击中下方的 SVG 模块。我们在上一期《》中应用到了它。
最后，本模板设计了基本的防误触，以一个透明矩形完整覆盖了对话区域避免用户提前击中使得动画中途启动▼
进一步的模版制作全流程教学，我们将在以下课程中更新一节对应视频课程（本课程内含《硬核运营》图书）▼
长卷式SVG高级交互图文设计标准流程
卡地亚的这套创意排版是如何实现的？
苹果的这套创意排版是如何实现的？
星巴克五仁月饼排版出现重大失误
哪些排版技巧简单却创意非凡？
文科生，如何学好代码 H5 排版？
其他你会感兴趣的内容
回复 H 5阅读更多移动营销技术帖
回复 广告学习更多创意广告策划案
回复 排版查看花式新媒体排版技术
回复 矢量了解免费矢量素材的图库
回复
二维码入门艺术化二维码设计H5、平面、视频等数字营销服务请致电
TEL：（021）3721 8818
合作客户：APEC 峰会 | 中国航天科技集团 | 香奈儿 | 肯德基（湖南） | 华为 | 三星中国 | 中国国际航空 | 湖北省电视台 | 河南卫视 |浙江省人民广播电台 | 三生制药 | 交通银行 | 建设银行 | 真格基金 | 南方周末 | 上海闵行教育学院 | 牛津大学出版社 | 新东方集团 | 伟巴斯特 | 雪佛兰汽车 | 观致汽车 | 雷诺汽车 | TNS 新华信 | 高力国际｜第一太平戴维斯｜德国莱茵｜盖茨基金会｜追星集团
抱歉，除了干货，其他什么也没有。
閱讀更多 JZ多媒體解決方案 的文章
