十一国庆,这8种排版超适合吃喝玩乐

原创 收藏 评论
举报 2024-09-25

 



马上就到十一国庆,在此之前把工作搞定,就可以安心坐等放假啦。

其中重要的一项工作肯定就是国庆图文了,前几天为大家整理了案例合集,戳:《国庆节SVG交互图文案例合集》
如果大家的内容是和吃喝玩乐相关的,那你算是来对了~
今天给大家推荐8种超适合吃喝玩乐内容的SVG排版玩法,而且编辑器就能制作哦。

消除拼图

1.gif

*素材来自梅赛德斯-AMG《赛道VS生活,你的选择是?》

组件:点击-消除拼图(三列)点此0元购

编号:10874(组件)

教程:《点击消消消消消消消消消消消乐????》


依次点击同一颜色的图片,图片消失,其余图片上移逐渐完成拼图,带给用户极强的参与感和趣味性。拼图成功后的图片,将会给用户留下深刻印象。要拼的图片可以是产品图、目的地等。

长按轮播,松手停止

2.gif

*素材来自德克士Dicos《国庆桶限免 | 请你吃霸王餐了!》

组件:祈福签-长按轮播,松手停止点此0元购

编号:10134(组件)

组件:闪烁遮罩

编号:11113(组件)

教程:《新年签签签签签签签签签签签签!》


假期虽至,想吃什么想玩什么却犯了难。用「长按轮播,松手停止」的SVG效果来为自己或帮用户作个决定吧!

多列点击切换

3.gif

 *素材来自英菲尼迪《假期综合症治愈药丸》

组合:三列布局点此0元购

编号:10150(组合)

组件:点击-切换图片

编号:10005(组件)

组件:零高图片

编号:10224(组件)


假期玩得疯,小心节后患上「假期综合症」。试试用多列布局嵌套点击切换,制作一个捏气泡或药板的效果,来治愈一下。

抽屉切换或无限选择切换

4.gif

*素材来自阿维塔《假期友情提醒,这样安排更悦己》

组件:点击-抽屉切换图片(无限次往返,有触发区,左)点此0元购

编号:11123(组件)

组件:遮罩

编号:10829(组件)

教程:《海报图片太多?抽屉切换一屏全放下!》


想要将假期的每一天都妥善安排?使用抽屉切换的效果,排版一目了然,看哪天点哪天,并且不占据过多的图文空间。
类似的内容还可使用无限选择切换效果:

   5.gif

*素材来自保时捷中国《开保时捷的心情就像……》

组件:Apple同款-无限选择切换图片(五组及以上)点此0元购

编号:11277(组件)

教程:《Apple同款效果无限选择切换图片,来啦!》



点击横向展开

6.gif

*素材来自广汽传祺《国庆出行不劝退,带上这份指南饱览山河》

组件:点击-横向展开点此0元购

编号:11501(组件)

教程:《Apple又玩新花样,展开效果原来还可以横着放!》


盘点不同的旅游方式,用点击横向展开的效果超合适。使用横向展开罗列项目,条理清晰,且内藏乾坤,不怕项目内容多。

点击弹性选择展开

7.gif

 *素材来自本田中国《温馨提示,你的假期已过半》

组合:点击弹性选择展开组合(无限次、三组)点此0元购

编号:11176(组合)

组件:零高图片

编号:10224(组件)

教程:《超Q弹的点击弹性选择展开,来啦!》


如果需要罗列的选项不多,或者进行对比,弹性选择展开的效果更适合。这种略带Q弹感的展开与轻松愉快的内容是一对好搭配。

遮罩跟随展开

8.gif

*素材来自吉利汽车《打开十一假期的正确方式是?》

组合:点击展开(有触发区)点此0元购

编号:10051(组合)

组件:遮罩

编号:10829(组件)

教程:《老效果玩出新花样!》


如果想展现完整的假期吃喝玩乐生活,使用展开效果,并将产品或其他合适的元素用遮罩覆盖在展开之上贯穿全文,可使图文具有更强的整体性。

点击播放音频同时展开

9.gif


*素材来自Bose《是什么节奏让人如此上头?

组合:点击切换图片+播放音频+展开(以视频方式上传)点此0元购

编号:11359(组合)

教程:《不用音频,点击展开的 BGM 还能这样玩!》


给图文展开加个轻松欢快的背景音乐,能更好得突出表现假期状态,同时用户观看图文也更容易沉浸其中,感同身受。

本文系作者授权数英发表,内容为作者独立观点,不代表数英立场。
转载请在文章开头和结尾显眼处标注:作者、出处和链接。不按规范转载侵权必究。
本文系作者授权数英发表,内容为作者独立观点,不代表数英立场。
未经授权严禁转载,授权事宜请联系作者本人,侵权必究。
本内容为作者独立观点,不代表数英立场。
本文禁止转载,侵权必究。
本文系数英原创,未经允许不得转载。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权,侵权必究。

    评论

    文明发言,无意义评论将很快被删除,异常行为可能被禁言
    DIGITALING
    登录后参与评论

    评论

    文明发言,无意义评论将很快被删除,异常行为可能被禁言
    800

    推荐评论

    暂无评论哦,快来评论一下吧!

    全部评论(0条)