元宵节,用排版如何把猜灯谜、吃汤圆玩出新创意?

i排版编辑器

发布于:2022-01-25

  • 放映机-音效、光效、切换GIF动图(防误触)

有的人已经放假了,有的人还在苦恼假期结束后的情人节和元宵节图文怎么做。


情人节图文老沙前几天分享了一些品牌案例,今天给大家分享10个元宵节排版创意,包括5个模板和5个品牌案例。


元宵节的创意离不开灯谜、花灯和汤圆,但在SVG交互的加持下,传统习俗也能玩出花。


样式模板:



1

双层滑动-背景左滑


·

_-_-_-[{"title":"无标题","abstract":"","article_id":"d8719cd08e79e3b231f6f583e7f99703","widgets":"[{\"type\":\"LRBackgroundScroll\",\"options\":{\"defaultImg\":{\"src\":\"http://black-resource-1257307183.cos.ap-beijing.myqcloud.com/16002fbe320ef34ab13e13031bbd4565.png\"},\"baseImg\":{\"media_id\":\"ee028971687562e38bdfd24c3868e89f.png\",\"src\":\"http://black-resource-1257307183.cos.ap-beijing.myqcloud.com/ee028971687562e38bdfd24c3868e89f.png\",\"type\":0,\"star\":false,\"name\":\"3_1613978777000_5413--前.png\",\"size\":968851,\"total\":946,\"img_width\":1000,\"img_height\":1221,\"is_deleted\":false},\"back_imgs\":[{\"media_id\":\"a734d08eead28c585c7f9a58e298652b.png\",\"src\":\"http://black-resource-1257307183.cos.ap-beijing.myqcloud.com/a734d08eead28c585c7f9a58e298652b.png\",\"type\":0,\"star\":false,\"name\":\"3_1613978944000_3166--后1.png\",\"size\":20806,\"total\":948,\"img_width\":1000,\"img_height\":1221,\"is_deleted\":false,\"x\":0,\"y\":0,\"width\":80,\"height\":80},{\"media_id\":\"c51568da3af09cc42b594023d9874f92.png\",\"src\":\"http://black-resource-1257307183.cos.ap-beijing.myqcloud.com/c51568da3af09cc42b594023d9874f92.png\",\"type\":0,\"star\":false,\"name\":\"3_1613978944000_9836--后2.png\",\"size\":13723,\"total\":948,\"img_width\":1000,\"img_height\":1221,\"is_deleted\":false,\"x\":0,\"y\":0,\"width\":80,\"height\":80}]},\"styles\":\"\"}]"}]-_-_-_


在 iPaiban Pro 编辑器中,有可以前景滑动的双层滑动,也有可以背景滑动的双层滑动。两者各有特点,后者空间感更强


该Demo对应编辑器模板:

组件:双层滑动-背景左滑

编号:10139(组件)



2

打印机效果


·

_-_-_-[{"title":"猜灯谜","abstract":"","article_id":"8c2e73d695c20e4981319d6e88ebd27e","widgets":"[{\"type\":\"SinglePrinter\",\"options\":{\"defaultImg\":{\"src\":\"http://black-resource-1257307183.cos.ap-beijing.myqcloud.com/c49d8cdb5ab7cfcd872a783ee18b9932.png\"},\"baseImg\":{\"media_id\":\"4bbcff3cce36c1589806e1361ea63e4d.png\",\"src\":\"http://black-resource-1257307183.cos.ap-beijing.myqcloud.com/4bbcff3cce36c1589806e1361ea63e4d.png\",\"type\":0,\"star\":false,\"name\":\"23_1613812315000_6984--灯.png\",\"size\":154993,\"total\":918,\"img_width\":650,\"img_height\":523,\"is_deleted\":false,\"width\":114,\"height\":114,\"x\":34,\"y\":120},\"halfImg\":{\"media_id\":\"4417547e03477ad7d1236297b8941ae7.png\",\"src\":\"http://black-resource-1257307183.cos.ap-beijing.myqcloud.com/4417547e03477ad7d1236297b8941ae7.png\",\"type\":0,\"star\":false,\"name\":\"23_1613812550000_6504--前.png\",\"size\":156775,\"total\":921,\"img_width\":650,\"img_height\":429,\"is_deleted\":false},\"toggleImg\":{\"media_id\":\"d50d0270b63207c352607e2276fa3c96.png\",\"src\":\"http://black-resource-1257307183.cos.ap-beijing.myqcloud.com/d50d0270b63207c352607e2276fa3c96.png\",\"type\":0,\"star\":false,\"name\":\"23_1613812332000_194--谜底.png\",\"size\":7516,\"total\":920,\"img_width\":650,\"img_height\":523,\"is_deleted\":false},\"dur\":1,\"isShow\":false},\"styles\":\"\"}]"}]-_-_-_


点击灯笼,谜底便会从灯笼中滑出揭晓。这种我们称为打印机效果。


在 iPaiban Pro 编辑器中有对应的组件可以套用制作,点击触发的区域也可以任意设置,灵活性很高。

组件:点击-打印图片(设置触发区域)

编号:10212(组件)



3

三宫格点击切换


·

_-_-_-[{"title":"灯谜点","abstract":"","article_id":"79a95a905d9dbbf944374d330448e08c","widgets":"[{\"type\":\"Img\",\"options\":{\"singleImg\":{\"media_id\":\"4f8ed24b9ad2218d12430dab8f2d298f.png\",\"src\":\"http://black-resource-1257307183.cos.ap-beijing.myqcloud.com/4f8ed24b9ad2218d12430dab8f2d298f.png\",\"type\":0,\"star\":false,\"name\":\"23_1613816250000_8663--未标题-1.png\",\"size\":11476,\"total\":928,\"img_width\":750,\"img_height\":300,\"is_deleted\":false},\"isTop\":true,\"bgMode\":\"without\",\"widthMode\":\"autofix\",\"width\":\"343\",\"containerWidth\":\"343\",\"containerWidthMode\":\"autofix\",\"bgImg\":{\"src\":\"http://black-resource-1257307183.cos.ap-beijing.myqcloud.com/8cd93f014d244d778c77fc32105e5bd1.png\"},\"imgs\":[],\"bgRepeat\":\"no-repeat\"},\"styles\":\"\"},{\"type\":\"Sudoku3Click2ToggleGIF\",\"options\":{\"baseImg\":{\"media_id\":\"411eba1722e96ac0a9fc2493b466461f.png\",\"src\":\"http://black-resource-1257307183.cos.ap-beijing.myqcloud.com/411eba1722e96ac0a9fc2493b466461f.png\",\"type\":0,\"star\":false,\"name\":\"23_1613816134000_1468--src=http___bpic.588ku.com_back_pic_05_80_39_735c1a0ec4233d4.jpg&refer=http___bpic.588ku.png\",\"size\":420406,\"total\":927,\"img_width\":1200,\"img_height\":685,\"is_deleted\":false},\"leftImg\":{\"media_id\":\"45a0d5245371f8d8881de55330220565.png\",\"src\":\"http://black-resource-1257307183.cos.ap-beijing.myqcloud.com/45a0d5245371f8d8881de55330220565.png\",\"type\":0,\"star\":false,\"name\":\"23_1613827536000_167--企.png\",\"size\":31799,\"total\":934,\"img_width\":767,\"img_height\":961,\"is_deleted\":false},\"leftImg2\":{\"media_id\":\"11989608f1774f146fdef093e874b618.png\",\"src\":\"http://black-resource-1257307183.cos.ap-beijing.myqcloud.com/11989608f1774f146fdef093e874b618.png\",\"type\":0,\"star\":false,\"name\":\"23_1613827543000_4251--n.png\",\"size\":38648,\"total\":935,\"img_width\":767,\"img_height\":961,\"is_deleted\":false},\"middleImg\":{\"media_id\":\"86321758acfca1abe415454219b0ef50.png\",\"src\":\"http://black-resource-1257307183.cos.ap-beijing.myqcloud.com/86321758acfca1abe415454219b0ef50.png\",\"type\":0,\"star\":false,\"name\":\"23_1613827555000_7954--最.png\",\"size\":36174,\"total\":936,\"img_width\":767,\"img_height\":961,\"is_deleted\":false},\"middleImg2\":{\"media_id\":\"1ec2658c3ba21b9c2e2404abf7e80cc4.png\",\"src\":\"http://black-resource-1257307183.cos.ap-beijing.myqcloud.com/1ec2658c3ba21b9c2e2404abf7e80cc4.png\",\"type\":0,\"star\":false,\"name\":\"23_1613827563000_4035--y.png\",\"size\":37761,\"total\":937,\"img_width\":767,\"img_height\":961,\"is_deleted\":false},\"rightImg\":{\"media_id\":\"c436ff400e498295dacc42b3cbb26b8e.png\",\"src\":\"http://black-resource-1257307183.cos.ap-beijing.myqcloud.com/c436ff400e498295dacc42b3cbb26b8e.png\",\"type\":0,\"star\":false,\"name\":\"23_1613827570000_4182--扮.png\",\"size\":38711,\"total\":938,\"img_width\":767,\"img_height\":961,\"is_deleted\":false},\"rightImg2\":{\"media_id\":\"11989608f1774f146fdef093e874b618.png\",\"src\":\"http://black-resource-1257307183.cos.ap-beijing.myqcloud.com/11989608f1774f146fdef093e874b618.png\",\"type\":0,\"star\":false,\"name\":\"23_1613827543000_4251--n.png\",\"size\":38648,\"total\":938,\"img_width\":767,\"img_height\":961,\"is_deleted\":false},\"path\":\"\",\"dur\":1,\"dur2\":1,\"dur3\":1},\"styles\":\"\"}]"}]-_-_-_


当字谜较复杂时,给用户提供几个选项会降低题目的难度。宫格式点击切换图片,每一个宫格可以用作一个选项,用户点击选项后立刻便会收到反馈。

组件:三宫格-点击切换GIF动图

编号:10137(组件)



4

普通滑动-下滑(可调整大小及位置)


·

_-_-_-[{"title":"猜灯谜下滑","abstract":"","article_id":"71e50640b2c98da05c5aefb8311e06a6","widgets":"[{\"type\":\"ScrollDownCustom\",\"options\":{\"defaultImg\":{\"src\":\"http://black-resource-1257307183.cos.ap-beijing.myqcloud.com/211ef88f0265ba7f96de7f1124f303c9.png\"},\"baseImg\":{\"media_id\":\"bab41c25eade7ff58ff3e4e00223d9fa.png\",\"src\":\"http://black-resource-1257307183.cos.ap-beijing.myqcloud.com/bab41c25eade7ff58ff3e4e00223d9fa.png\",\"type\":0,\"star\":false,\"name\":\"23_1613827665000_72--灯2?.png\",\"size\":54418,\"total\":939,\"img_width\":338,\"img_height\":465,\"is_deleted\":false,\"width\":93,\"height\":108,\"x\":126,\"y\":265},\"stageHeight\":108,\"isShow\":true,\"scrollImgs\":[{\"media_id\":\"f0f0566302777c322766f69296173102.png\",\"src\":\"http://black-resource-1257307183.cos.ap-beijing.myqcloud.com/f0f0566302777c322766f69296173102.png\",\"type\":0,\"star\":false,\"name\":\"23_1613827678000_336--2底.png\",\"size\":5128,\"total\":940,\"img_width\":86,\"img_height\":159,\"is_deleted\":false}]},\"styles\":\"\"}]"}]-_-_-_


局部滑动的创意应用,简单来讲,就是在一张背景图的任意位置,设置任意大小的滑动区域,包括左滑、右滑、上滑、下滑4个方向。详细原理大家可以看这里:《局←部↑滑→动》,很有意思。


Demo对应编辑器模板:

组件:普通滑动-下滑(可调整大小及位置)

编号:10213(组件)



5

放映机效果


·







x-_p-_o-[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]-o_q-_-x
x-_p-_o-[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]-o_q-_-x


将手机横过来,点击蓝色播放按钮,放映机动了起来,同时音乐播放,后面的背景内容开始滑动,直至结束。这就是放映机效果。


Demo中图片的设计有些粗糙,大家可以看看奔驰的案例《今天,向奔驰车主群发一则“纪录片”》,效果非常惊艳,有种在图文中看电影的感觉。

组件:放映机-音效、光效、切换GIF动图(防误触)

编号:10215(组件)

教程:《元宵节+放映机效果,惊艳!》



品牌案例:



1

神州租车



点此查看原文

点击一张图片切换为另一张图片,除了最常见的直接切换,点击左右翻转切换也越来越受欢迎。这种效果酷似翻牌,用户可能还会联想到过年期间打牌的场景。

该交互对应编辑器模板:

组件:点击-左右翻转切换图片

编号:10197(组件)



2

沛纳海Panerai



点此查看原文

同样是猜字谜玩法,有时候一下子给出答案反而没有意思。沛纳海这篇点击后先展开给提示,让用户引起思考,接着引导用户继续点击出现答案同时露出产品。


该交互对应编辑器模板

组合:点击切换图片+展开(有触发区)

编号:10057(组合)



3

宝马中国



点此查看原文

开篇点击点亮全文的效果很是惊艳。接着以宫灯为线索,配合元宵节猜灯谜的习俗,辅以点击显示的交互玩法,整体感较好,营造出了浓厚的节日氛围。

该效果需定制,定制请添加玉兔微信(ID:playhudong15)。


4

京东科技



点此查看原文

本文的巨形文字和碗接汤圆小游戏的玩法富有新意,吸引力十足,接着推出自己的节日电商活动,自然而然得到了更多曝光。

该效果需定制,定制请添加玉兔微信(ID:playhudong15)。


5

BMW宝马摩托车中国


   

点此查看原文

答题卡的玩法与猜灯谜的习俗结合太合适不过了,经典实用!

该效果需定制,定制请添加玉兔微信(ID:playhudong15)。



制作SVG交互图文认准 iPaiban Pro 黑科技编辑器,网址:x.iPaiban.com,复制网址在 PC 端 Chrome(谷歌)浏览器打开,即可开始注册并使用。

新用户在「新手礼包」可领取3天企业标准版会员体验权,以及22个常用必备组件的大礼包(1年)



一个互动

你有什么元宵节的交互想法吗?

留言区聊聊


SVG 黑科技交互排版👇🏻

·

                                                               
                                                               
                                                               
如需定制 SVG 黑科技排版,请添加下方玉兔微信沟通咨询。


点个“在看

戳沙小僧(playhudong033)

抱走《公众号排版规范手册》PPT