省流版清单
大多数 Apple 同款 SVG 互动特效在 E2.COOL 编辑器中均早有组件预备，或形态趋同或优于 Apple 公众号，不妨收藏本文并跟随练习：
1）Apple图文新特效「宫格弹跳」模版｜免费使用｜黑科技编辑器
2）Apple「展开说说」特效模板｜黑科技编辑器｜花式排版组件
3）组件同款特效亮相Apple公众号｜无限展开-收缩｜科蚪原创
4）好家伙，5分钟排版Apple「好家伙」开场动画
5）Apple同款｜长图横滑排版，让布局更自由
6）Apple同款｜SVG无限往返刷新排版，就在E2黑科技编辑器
7）Apple同款｜「等分容器滑动」组件制作「变色进度滑动」SVG排版特效
8）Apple同款｜5秒内完成「限时可见」SVG 排版特效
9）Apple同款｜滚动暂停放大 - 这款轮播 SVG 动画有新意
10）比 Apple 排版做更好｜SVG 无限选择器模版
不止追随
More than faddism
正文开始。
众所周知，SVG 的动画类型无外乎由 JZ Creative Studio & 微信团队于 2016 年制定下的白名单体系范畴，然而在同样的技术背景下，为何 Apple 公众号能成为行业标杆，长期推出业内新潮甚至首发创作的交互模型？
所以本期，我们不仅介绍在 E2.COOL 黑科技编辑器中的同款特效模板，更解读其创意方法论本身，从四大设计原则出发，帮助你建立专业的创意设计思维。学会制作，更学会创作。
对齐（Alignment）式创意
任何时刻下，交互界面中的元素都不会是随意分布的。「对齐性」作为四大设计原则之首，通过丰富的时间与空间层面组合应用，就得以形成如《好家伙，iOS 15 新功能真是好家伙》的开场特效：
显然，这套开场动画包含了大量的对齐形式——居中对齐、分散对齐、基线对齐等，且元素在两两之间或多个之间具备多重对齐关系。当我们将一个基本设计原则充分延展，哪怕简单的应用组合都会形成独一无二的创意。
以下是基于 E2.COOL 黑科技编辑器「自由布局」类模版的具体制作方法讲解：
同理，在更大空间尺度上应用丰富的对齐关系，可以让版面在交互时建立一种清晰但精巧的视觉体验，如《OS 新出炉，一键四连。》的「全局滑动」设计。不妨点击《比 Apple 排版更有趣｜SVG 全局滑动模版妙用》学习基于 E2.COOL 黑科技编辑器的具体制作方法。
而在时间的尺度上，「对齐性」对 SVG 的按钮设计也至关重要。在交互设计学中，一个标准的按钮具备正常、悬浮（选中）、按下、加载和禁用最多 5 个状态，最简化则是仅「开」与「关」，或者说「激活」与「非激活」状态。
因而在「无限选择器」这类 SVG 组件应用时，按钮的变化在时间维度上也往往需要考究其「对齐性」。如《家人们，你们的健康我承包了。》一作是 Apple 团队学习业内大神@科蚪的相关模型技术实现的 SVG 排版，采用了按钮居中对齐变化以清晰指向当前选中内容的类目：
以下是基于 E2.COOL 黑科技编辑器的具体制作方法讲解，以及「无限选择器」在更多头部品牌公众号中的应用思路：
总之，「对齐（Alignment）」这一看似基础的设计原则，犹如创意的公理一般，既不证自明又变化万千。知晓它，更深度理解它，才能产出如 Apple 公众号水准的无穷创新 SVG 设计。
亲密（Proximity）式创意
如果多个交互元素、选项相互之间距离临近，它们就会成为一个视觉单元，而不是多个孤立的元素。这种人脑认知行为层面的理论，是第二条我们向与你分享的设计原则。在 SVG 交互设计中，「亲密性」在 perspective 3D 视差排版时尤为重要——优秀的亲密性设计能让裸眼 3D 震撼人心的同时保持条理清晰；拙劣的亲密性设计会让视差变得头晕目眩又逻辑混乱。
公众号视差排版最早由业内知名的 @交互实验室 于小米公众号发布，苹果很快也通过研习完成了多篇相关技术条件下的创意 SVG 排版。近期的《今天过节的各位，请伸出你的手。》就值得一看：
通过 E2.COOL 黑科技编辑器的「视差卡片」组件，完成这样的排版在技术层面并不算复杂，具体可以点击阅读《Apple公众号自由视差滑动，轻松实现。》开始学习。
而其真正的创作重点，在于文案、人物、纹理、产品图等元素，在裸眼 3D 条件下差速运动时的间距变化关系设定，这要通过该模版的「X轴位移距离」和「Z轴纵深距离」进行控制。
可见，公众号三维视差排版的本质，就是设计学中「亲密性」的极致动态统筹。如果你觉得该案例作为入门练习有一定难度，那么也可以参考 Apple 公众号的《《三岔口》和卓别林，在这里有了怎样的交集？》上手：
以下提供一个排版结构参考：
当然，如果你更习惯于版块化的视差切图方式，那也可以如 Apple 的《梦幻联动好戏，Mac 携伙伴联袂出演。》一样，通过 E2.COOL 黑科技编辑器的模版「横向视差滑动」完成这类规整度较高的裸眼 3D 滑动排版：
以下是基于 E2.COOL 黑科技编辑器的具体制作方法讲解：
总之，「亲密（Proximity）」这一设计原则的应用水平，很大程度上将决定品牌方的 SVG 是在锦上添花还是画蛇添足。
重复（Repetition）式创意
重复与创意并不矛盾。让设计中的视觉要素在整个作品中重复出现。比如颜色、形状、材质、空间关系、线宽、字体、大小和图片等。这样一来，既能增加条理性，还可以体现关联性，并通过重复高强度刺激用户感官，激发体验的快感。
Apple 公众号对重复性的应用非常频繁，比如《跟着这份 macOS Ventura 词汇表，开始新操作。》是空间尺度上交互形态的重复：
这一交互模型比较巧妙地将传统纵向的「点击-切换图片-伸长」模版旋转了 90°，再进行大量地叠加重复。具体的编辑器操作指南可参考《Apple同款｜SVG扑克序列横向展开只需5分钟搞定》学习。以下提供一个排版结构参考：
时间的尺度上 SVG 自然也可以进行重复，如 Apple 公众号的《返校福利驾到，内赠使用指南。》、《一个“文”字，看懂实况文本。》、《“春晚”好多新面孔，先说哪个好？》等都是各不相同的交互循环或动画循环。
关于这些效果在编辑器中的应用，你可以分别阅读：
1）组件同款特效亮相Apple公众号｜无限展开-收缩｜科蚪原创
2）Apple 同款｜无限移动-开关弹窗教程｜黑科技编辑器
3）Apple图文新特效「宫格弹跳」模版｜免费使用｜黑科技编辑器
可见创意从来不是一件难事，抓住「重复性」的这一设计原则，从不同的维度对一个稀疏平常的 SVG 能力进行大量的重复，往往就可以诞生一种耳目一新的交互效果。
总之，「重复（Repetition）」可以被认为是最容易实现创造性设计的原理。重点把握它，小白也都有机会运用 E2.COOL 黑科技编辑器打造行业爆款！
对比（Contrast）式创意
这是四大设计原则中最后一个我们要向你介绍的原则。同样，「对比」的对象没有特定限制，无论颜色、形状、材质、空间关系、线宽、字体、大小和图片等都能被对比。但与「重复性」不同的是，对比的目的往往在于区分并强调，让线性的 SVG 交互过程中出现着重的信息表现，引起用户的注意和思考。
如《技能便利店 Volume 2：面容 ID 可以戴着口罩解锁了。》一文中，业内首次出现了滑动时反馈滑动进度的高亮效果，一时让不少运营人啧啧称奇：
这其实是「等分容器滑动」模版的一种巧妙应用，在同样的 SVG 组件条件下，唯有 Apple 从交互行为的本质出发，以服务读者的思路完成了文本排版的对比式优化。以下是基于 E2.COOL 黑科技编辑器的具体制作方法讲解：
而在 Apple 的《3 题辛辣拷问，Mac 请接招。》中，「对比性」更直接以 highlight 的特效形式，基于视差滑动极具创意地突出了关键广告信息：
具体的编辑器操作流程不妨点击阅读《Apple 同款文字涂亮特效｜横向视差滑动》学习，以下是视频版的操作演示：
即刻上手
看过了 Apple 公众号的创意方法论归纳，相信此刻你对这些 SVG 模版已经产生了不少全新的见解，那不妨此刻就打开 E2.COOL 黑科技编辑器，开启你全新的学习之旅：
1）Apple图文新特效「宫格弹跳」模版｜免费使用｜黑科技编辑器
2）Apple「展开说说」特效模板｜黑科技编辑器｜花式排版组件
3）组件同款特效亮相Apple公众号｜无限展开-收缩｜科蚪原创
4）好家伙，5分钟排版Apple「好家伙」开场动画
5）Apple同款｜长图横滑排版，让布局更自由
6）Apple同款｜SVG无限往返刷新排版，就在E2黑科技编辑器
7）Apple同款｜「等分容器滑动」组件制作「变色进度滑动」SVG排版特效
8）Apple同款｜5秒内完成「限时可见」SVG 排版特效
9）Apple同款｜滚动暂停放大 - 这款轮播 SVG 动画有新意
10）比 Apple 排版做更好｜SVG 无限选择器模版
注意事项
对于牵涉无限循环结构的 SVG 组件，一般不能通过鼠标在编辑器或公众号草稿直接进行测试，而应预览至手机确认效果。此外，由于 Apple 模式的 SVG 架构都较为庞大，导入后建议以代码视窗而非可视化视窗进行保存，主流公众号插件（如 Z0、壹伴）等一般都具备该视窗。
更多海量模板，平均不足 1 元！
E2.COOL 秉持着让行业“人均 SVG”的生态理念，由多位黑科技排版设计的头部资深开发者共同打造，帮助更多品牌以可视化形式完成互动式图文创作。如有任何特效灵感和建议，也欢迎通过客服向我们提出，E2 将竭诚思考代码转化的可行性。
E2 平台官网
https://www.e2.cool/
会的比别人多一点