爱收集资源网

微信公众号的交互设计排版是如何在SVG编辑器里实现的

网络整理 2022-05-15 07:03

微信公众号的交互设计一直是新媒体运营商近年来非常重视的一种推广手段。不过因为交互设计的技术门槛比较高,成本自然也比较高,不过现在有了SVG编辑器,不用编码就可以在微信公众号做很酷的交互设计。

—SVG 交互设计—

SVG编辑器提供多种SVG交互效果,包括无缝、点击、滑动、长按、图片轮播、影音、小程序、超链接等。

您只需要上传您的素材,这些动态交互效果就可以DIY到您定制的交互布局中。以点击切换效果为例,我们来看看微信公众号文章的交互设计布局。如何在 SVG 编辑器中实现。

——微信公众号交互设计教程——

准备工作:打开135编辑器,在首页左侧功能区找到【SVG编辑器】入口,或者直接点击进入SVG编辑器。

1、点击样式,将样式插入到中间的编辑区

2、在编辑器右侧点击侧边的【添加图片】按钮,上传点击前后的图片

注意点击前后图片的宽高要一致

公众号文章里的小动画

3、图片上传后,在动画设置中公众号文章里的小动画,设置动画时长和动画延迟的参数(动画时长值越大,点击后图片切换时间越慢;越长动画延迟值越大,点击延迟后动画出现的时间越长)

4、鼠标移动红框调整点击切换图片和大小的触发区域位置

点击触发区域外没有反应

5、设置完成,预览无误后,可以使用【同步】或【导出】功能,保存到微信公众号平台。

[喜欢][喜欢][喜欢]

大家都学会了吗? SVG编辑器还有更多黑科技排版方法公众号文章里的小动画,等你来发现~创意动态交互排版,一个SVG编辑器帮你轻松搞定!

-结束-

编辑器 微信公众号 svg