宝藏模版
往期推荐（点击阅读）：
🤑618排版必备SVG模版🤑
http://mp.weixin.qq.com/s?__biz=Mzk0NDIyMjU0OQ==&mid=2247505052&idx=1&sn=40d88344ea787fbfcdfe7d4597a02faa&chksm=c3256ca6f452e5b041deaba9838b1159bdec451d455d2ba9cd60e8db194a95cae7af58b08b2b&scene=21#wechat_redirect
🤠属于爸爸们的SVG模版🤠http://mp.weixin.qq.com/s?__biz=Mzk0NDIyMjU0OQ==&mid=2247505196&idx=1&sn=b3e267edfa44b86de7331e476f538d20&chksm=c3256d16f452e4008624efa170c4b6d2949be8dde287af4375eeaece0642305428230183e926&scene=21#wechat_redirect
各位编辑器会员，编辑器内 900+ 的 SVG 组件你们都用过吗？今天我们来聊聊特别有范儿的 SVG 设计范式——杂志/报刊模拟。
多热区弹出式海报
说到「杂志/报刊」，相信很多平台会员都知道 Vogue 基于黑科技 SVG 编辑器设计的《今天的头条是Prada》，作为一篇业内爆款交互设计图文，它的长尾效应经久不衰。
无限往返伸缩器
「无限往返伸缩器」是一种由业内知名开发者@科蚪发明的无限伸长-收缩循环 SVG 交互结构，在很多纸媒公众号内都有广泛应用，如嘉人的《我去，20___年。》：
像这样模拟文件层叠的效果，是该 SVG 模版的一个巧思应用。在 E2.COOL 的组件搜索功能内查找「无限往返伸缩器」即可体验！点击阅读《黑科技编辑器 | 无限往返伸缩器教程》学习该案例的具体操作流程。
点击-切换图片-伸长
看过了纵向的版面层叠，我们再通过 Apple 公众号的《跟着这份 macOS Ventura 词汇表，开始新操作。》学习横向的互动排版方法。
具体操作可以点击阅读《Apple同款｜SVG扑克序列横向展开只需5分钟搞定》学习。基于 E2.COOL 黑科技 SVG 编辑器你甚至可以任意变化内部的伸长形式，选择更适合你主题内容的效果。这里提供一个排版结构参考：
更多 Apple 同款的 SVG 交互设计，不妨点击阅读《𝗔𝗽𝗽𝗹𝗲同款𝗦𝗩𝗚模板大全&创意方法论》深入了解。
图书翻页
这是一款基于 SVG 代码模拟翻页效果的组件，支持无限添加页面，来看看人民日报公众号的应用：
当然如果你设计水平优异，已经制作了丝滑的翻页 GIF 动画，那么完全可以通过「连续 GIF 控制器」组件将他们依次衔接，点击下方画面体验：
需要注意的是，在使用这些 GIF 前，你应当确保 GIF 在设计软件中导出时已设置为仅一次播放！
任意动画接伸长
这是一款解放想象力的 E2.COOL 黑科技 SVG 编辑器高级模版，由此能实现丰富的画面伸长前的交互特效，譬如在此我们结合「撕纸」的动作模拟定制（by 交互实验室）案例 GQ 实验室《开撕》的日历交互：
关于该组件的具体应用方法，请点击阅读《解放想象力：SVG 任意动画接伸长》学习，教程里介绍了更多精彩的创意组合设计。
顶层滑动
作为一种「古典」的 CSS 交互布局，顶层滑动效果简洁大气，易于排版又效果流畅，自然也成为了纸媒公众号的常用选项。
在 E2.COOL 的组件搜索功能内查找「顶层滑动」即可体验！此外如果你的版面明确按屏幕大小分隔，那么也可以使用「黑科技编辑器｜纵向吸附容器滑动教程」或「黑科技编辑器｜纵向吸附滑动教程」进行排版。
横向视差滑动
在定制（by JZ Creative Studio）案例《笃定前行的中国——中国日报记者十年手记》中，中国日报采用了该 SVG 形式将多种纸张纹理与文本、图像融合，质感满满。请横向滑动下方画面体验：
标签抽拉
书签化的交互设计也是一种极具特色的 SVG 模型，由业内知名开发者@GL设计，上架于编辑器UGC 专区：
想实现同样效果？即刻进入黑科技编辑器，即可在「UGC 付费原创」大类模版中选择「标签抽拉」畅快体验。
扫一扫
134
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
