Apple、GUCCI等品牌的图文为什么精致？教你下载他们的素材慢慢学
制作了同样的动图，使用了同样的交互效果，为什么很多大品牌的排版还是总显得更精致一些？
这是很多刚接触交互排版的小伙伴常常遇到的苦恼，相信一些使用很久交互排版的可能也会有这个疑惑。
其实原因很简单：细节，细节，还是细节。
细节两个字说起来简单，做起来……也不难，但是麻烦。
用Apple、GUCCI、沃尔沃和蕉内的4个案例给大家说下就明白了。
1Apple
下面是Apple图文《新 macOS，连 iPhone 和 iPad 都点赞》开头的一个动态效果，很多人以为是一张单次播放的动图。
▲为方便展示说明，此处为录制的循环播放动图，原动态效果请进入原文查看
但是，当你让设计师制作了同样效果的动图并插入图文中后，你可能会发现两个问题：动效不是那么顺滑，图片也没有那么清晰了。
这是因为公众号后台对动图进行了压缩，而这种压缩是难以避免的。那Apple怎么弄的？
下载Apple原文的素材，一下就真相大白了。
它其实是将4张静态图用代码实现的动态效果，读者打开图文，4张图片依次浮现，效果比动图精致很多。
该效果用 iPaiban Pro 编辑器的「自动-逐行显示」组件（编号：11111）可以实现，教程：《文案自动一行一行地显示，这是怎么做到的？》
也就是说，图文中的动态效果，能用排版实现最好不要做成动图。
2GUCCI
GUCCI这个视频号图片很是经典，这种动态效果肯定是动图了，但它不是一张简单的动图。
GUCCI为什么这么做？还是为了避免公众号后台对动图的压缩，如果将这两张图片制作成一张动图，那视频号样式就没那么清晰了。
也就是说，动图中的元素能拆分的尽量拆分，后期再通过排版拼合。
像「遮罩」「零高图片」「多层图片」等组件都很适合拼合图片，相关教程：
《别用Ps了，背景图＋ GIF 超简单！双层、三层都能叠加》
上面两个例子都是讨论的在动效方面让图文更精致，之前老沙整理过《如何像苹果公众号的动图一样清晰？》的5种方法，戳蓝字可了解更多。
下面再讲讲图片角标：
3沃尔沃汽车
原生的的超链接图片和小程序图片在右上角都会自带角标，而角标太多则会影响图文整体的美观，所以老沙之前建议大家使用 iPaiban Pro 编辑器的相关组件去掉角标。
但角标还有一个提示点击的作用，有小伙伴担心去掉角标影响打开率，那怎么办？
沃尔沃是这样做的：重新设计角标，与图片设计风格相融合。这样美观和提示作用就都兼顾到了。
4蕉内
我们再看蕉内的这个图片角标，其实也做了小小的优化，大家下载素材就能发现角标是和图片设计在一起的。
以上只是一小部分细节的例子，想要发现这些细节，第1步就是把素材下载下来，通过素材，大家可以好好研究那些优秀的排版是怎么做出来的。
下载图文素材就用 iPaiban Pro 小助手v2.0插件，它不仅可以一键下载图片，还会将下载的图片自动打包并以【公众号-日期-图文标题】格式命名好，压缩包里的图片也是按文章里展示顺序一一排列好了。
下面近20篇图文的800多张图片下载仅仅用了不到8分钟。
详细安装和使用教程：《iPaiban Pro小助手v2.0来啦！》
制作SVG交互图文认准 iPaiban Pro 黑科技编辑器，网址：x.iPaiban.com，复制网址在 PC 端 Chrome（谷歌）浏览器打开，即可开始注册并使用。
新用户在「新手礼包」可领取3天企业标准版会员体验权，以及22个常用必备组件的大礼包（1年）哦。
一个互动
你还知道哪些
可以提升排版精致度的细节？
留言区聊聊
● SVG 黑科技交互排版????????
点个“在看”
戳沙小僧（playhudong033）
领交互图文案例库30天会员
（含数千品牌的32000+案例）
转载请在文章开头和结尾显眼处标注：作者、出处和链接。不按规范转载侵权必究。
未经授权严禁转载，授权事宜请联系作者本人，侵权必究。
本文禁止转载，侵权必究。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权，侵权必究。
评论
评论
推荐评论
暂无评论哦，快来评论一下吧！
全部评论（0条）