“文末的门店展示、相关条款、活动说明……该怎么排版啊!?”

原创 收藏 评论
举报 2024-04-18




文末的门店展示、相关条款、活动说明等信息内容很多,不能简化又必须要放在图文中,但对正文内容来说又没有太大的作用。


怎样排版才能更好一些?


必须放在图文中,那就要展示全;对正文作用不大,那占据的图文空间又不能太多。


本期内容通过4篇品牌图文带大家解锁不同的SVG排版方式,总有一款适合你。


1.gif

一起来看看吧:



单层上滑

2.gif

*素材来自ubras《现在,就想回家过年》

「ubras」的这篇图文最后通过「上滑」的交互展示门店信息,既节省了版面,又使信息呈现得非常简约明了。


使用 iPaiban Pro编辑器搜索找到单层滑动-上滑(支持多张)组件后,点击选择。依次上传滑动图,注意组件高度取第一张图片的高度,每张图片的宽度一致即可,可以拖拽调整图片顺序。



想要实现同款效果可以搜索使用:

组件:单层滑动-上滑(支持多张)

编号:10200



自动对齐的单层上滑

3.gif

*素材来自Bananain蕉内《软 软 棉 棉 过 春 天》

「蕉内」这个上滑的效果,不是简单的上滑,而是可以自动对齐图片,这样不容易漏掉每一屏的内容。


使用 iPaiban Pro编辑器搜索找到单层滑动-上滑(自动对齐、支持多张)组件后,点击选择。点击+号上传图片即可,需注意组件高度取第一张图片的高度,每张图片的尺寸一致。



想要实现同款效果可以搜索使用:

组件:单层滑动-上滑(自动对齐、支持多张)

编号:10269



可设置滑动区域的双层上滑

4.gif

*素材来自恒生银行中国《【优卓臻选】解锁夏日出游礼单,晶彩礼遇相伴随行》

「恒生银行中国」的这篇图文用前景上滑的方式展示条款与细则,像便签本一样的呈现方式更吸睛。


使用 iPaiban Pro编辑器搜索找到双层滑动-前景上滑(可调整大小及位置)组件后,点击选择。点击换图上传底图,点击+号上传滑动图,滑动图需注意每张图片的宽高一致。



双击图片设置滑动区域,调整触发区域框选至滑动内容区域。



想要实现同款效果可以搜索使用:


组件:双层滑动-前景上滑(可调整大小及位置)

编号:10165



点击消失后展开相关条款

5.gif

*素材来自Apple《打包好了,新年“一条龙福利”请签收。》

「Apple」的这篇图文最后只是用简单的一句话呈现了相关条款,节省版面的同时也能方便有需要的用户查看内容。


使用 iPaiban Pro编辑器就可以实现同款效果,搜索找到点击消失+展开(设置触发区域)组合后,点击选择。点击编辑组合,进入组合编辑模式,上传展开前的图片。



双击设置触发区域,调整触发区域框选至文字内容区域。



拖拽批量无缝图组件至展开后的组件位,依次按顺序上传图片。



根据需要,设置切换时长、展开时长和加减展开高度



想要实现同款效果可以搜索使用:


组合:点击消失+展开(设置触发区域)

编号:11186

组件:批量无缝图(全能)

编号:10009

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

    参与评论

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

    参与评论

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

    推荐评论

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

    全部评论(0条)

    作者
    品牌时光机

    品牌时光机

    上海 浦东新区

    崂山路300号普联大厦1号楼

    行业:营销咨询

    官网:http://brandtime.cn