首页

文章

微信公众号图文编辑制作技巧有哪些

发布网友 发布时间：2022-04-19 20:39

我来回答

共4个回答

懂视网 时间：2022-04-26 17:46

现在很多公众号都直接在正文页通过SVG交互动画增加文章的阅读交互体验，而不再跳转H5。结合这一需求，本期分享的内容是如何开发交互式SVG，并嵌入微信公众号正文页。设计师和前端开发同学都可以来学习下。学会了可以接这方面的私活了，短平快地赚小钱钱。

先看下最终SVG交互效果：

(体验公众号正文页实际效果，请到本文底部扫码关注公众号)

1 为什么公众号需要交互SVG

技术要有落地的应用场景才能发挥实效。为什么很多公众号开始做SVG交互而放弃H5呢？

主要原因有两点：

  1. H5制作成本高，需要一定的开发周期和服务器支撑。
  2. 从正文页跳转H5页面多了一个步骤，容易造成用户流失。

当然，对于需要复杂交互，或者更多功能的话，还是需要单独开发H5。

SVG虽然只能实现简单的交互，但既能增加交互体验又不会太分散用户对内容的关注点，在很多场景下还是很有需求的。

2 应用场景

SVG交互本质还是基于SVG SMIL animation，配合SVG的click事件，实现非常简单的交互。

虽然实现的效果很有限，但还是有很多发挥空间的，比如以下应用场景：

  • 【汽车宣传】点击车子后，车子移动，经过某个位置显示某个特性或地点名称文案。
  • 【心理测试】点击某个选项后，出现选择结果。
  • 【拆红包】一层一层拆掉红包，显示最里面内容。
  • 【密码解锁】点击指定的几个数字后，显示解锁内容。
  • 【猜灯谜】点击后显示内容，类似翻牌。

    • 下面开始讲解本期Demo的制作全过程。

    3 素材制作

    3.1 背景图片

    使用PS等软件设计SVG的背景图，建议宽度为640px~750px，也可以更高，但文件大小也会增加。 本例制作了 640px x 800px 的jpg背景图：

    3.2 SVG素材

    可以去阿里巴巴矢量图库(www.iconfont.cn/)网站下载。也可以自行使用AI制作。 但需要注意控制好SVG的图片尺寸。SVG的图片的尺寸即点击区域，所以控制好图片中空余的留白区域。

    本Demo从阿里矢量库中下载了爆竹SVG，下载后用AI打开，缩小图片的尺寸：

    3.3 导出SVG

    由于微信编辑器不允许嵌入 <style><script> 标签，所以通过AI导出SVG的时候要进行一下设置：

    把Styling选择为Presentation Attributes，这样导出的SVG就不含有 <style> ，而且元素的样式也会通过标签属性进行设置，而不使用style内联css。

    4 构建SVG

    4.1 SVG基本结构

    <svg style="display: inline-block;width: 100%;background-image:url(bg.jpg);background-size: 100%,100%;background-repeat: no-repeat;" version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg"></svg>

    这里的style均为基础的CSS，就不再详述了。

    主要说下viewBox属性：

    viewBox="x, y, width, height"

    x、y 控制SVG内所有元素的位移（不影响SVG的背景图）。

    width、height 并不是SVG的实际宽高，而是SVG内的“分辨率”。width、height越大，SVG内的元素越小，反之，元素则越大（不影响SVG的背景图）。

    建议viewBox的x、y设置为0，width、height设置为背景图的尺寸。

    4.2 放入文字

    先使用 <text> 加入文字：

    <svg style="display: inline-block;width: 100%;background-image:url(bg.jpg);background-size: 100%,100%;background-repeat: no-repeat;" version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg">
+ <text x="200" y="540" fill="#fff" style="font-size: 30px">点击爆竹放飞梦想</text>
 </svg>

    通过调整x、y把位置调好，fill为文字颜色，style设置字号。

    4.3 加入文字动效

    现在实现文字的闪烁效果。这里需要使用 <animate> 和 <g> 标签。

     <svg style="display: inline-block;width: 100%;background-image:url(bg.jpg);background-size: 100%,100%;background-repeat: no-repeat;" version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg">
+ <g>
+ <animate attributeName="opacity" begin="0s" dur="1s" values="1;0;1" repeatCount="indefinite"></animate>
 <text x="200" y="540" fill="#fff" style="font-size: 30px">点击爆竹放飞梦想</text>
+ </g>
 </svg>

    介绍下 <animate> ：

    attributeName ，为动画控制的属性，这里为opacity透明度。

    begin ，为动画开始时间，可以理解为延迟时间。0s表示立即开始动画。也可以是分号分隔的一组值，例如beigin="3s;5s"，表示的是3s之后动画开始，6s时候动画再重新开始（如果之前动画没走完，会立即停止从头开始）。

    dur ，为动画时间，dur越小，动画越快。

    values ，表示attributeName指定属性的值变化,可以是一个值，也可以是用分号分隔的多个值，这里的"1;0;1"表示“不透明->透明->不透明”，即闪烁效果。

    repeatCount ，表示动画重复次数，indefinite=无数次

    <g> 标签很简单，就是把包起来的元素打成组合，这样animate就只针对 <g> 内的元素执行动画了。

    效果如下：

    4.4 从SVG提取爆竹代码

    打开AI生成的SVG文件，只取爆竹的矢量路径代码：

    4.5 加入爆竹

    加入爆竹代码，使用 进行包裹，然后通过调节 的translate调节位置。

    <svg style="display: inline-block;width: 100%;background-image:url(bg.jpg);background-size: 100%,100%;background-repeat: no-repeat;" version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg">
 <g>
 文字代码（略）
 </g>
+ <g style="transform: translate(140px, 580px);">
+ <path d="M37.1,124.13v3.45a20.83,20.83,0,0,1-3.36,12.28,21.27,21.27,0,0,0-3.54,11.86,3.45,3.45,0,0,0,3.45,3.45h0a3.45,3.45,0,0,0,3.45-3.45h0c0-3.88,1.1-5.78,2.62-8.41A27.61,27.61,0,0,0,44,127.58v-3.45H37.1Z" transform="translate(-16.4 0)" fill="#c83741" />
+ <path d="M50.9,124.13v72.42A3.45,3.45,0,0,0,54.34,200h0a3.45,3.45,0,0,0,3.45-3.45h0V124.13H50.9Z" transform="translate(-16.4 0)" fill="#963737" />
+ <path d="M26.76,37.91v86.22a3.45,3.45,0,0,0,3.45,3.45H57.8a3.45,3.45,0,0,0,3.45-3.45V37.91Z" transform="translate(-16.4 0)" fill="#ff4b4b" />
+ <path d="M26.76,37.91H61.24V51.71H26.76Z" transform="translate(-16.4 0)" fill="#c83741" />
+ <path d="M17.08,36.27A365.1,365.1,0,0,0,40.89,1.75a3.64,3.64,0,0,1,6.23,0,365,365,0,0,0,23.8,34.51,3.14,3.14,0,0,1-2.46,5.09H19.55A3.14,3.14,0,0,1,17.08,36.27Z" transform="translate(-16.4 0)" fill="#ff4b4b" />
+ <path d="M61.24,58.6,26.76,68.95V55.15L61.24,44.81Zm0,27.59L26.76,96.54V82.74L61.24,72.4Zm0,27.59L26.76,124.13V110.33L61.24,100Z" transform="translate(-16.4 0)" fill="#ffcf65" />
+ <path d="M61.24,51.7v-6.9l-23,6.9Z" transform="translate(-16.4 0)" fill="#ffb450" />
+ </g>
 </svg>

    4.6 制作愿望牌SVG

    通过AI制作愿望牌SVG，记得通过Command+Shift+O，把文字转化为矢量。然后按照3.3章节导出SVG。

    4.7 加入愿望牌

    愿望牌是在爆竹升天后显示的，实际上是盖在了爆竹前面，爆竹并没有消失。所以愿望牌的代码应该写在爆竹代码的后面。从SVG提取愿望牌代码参照4.4章节，并调节位置，加入后的代码如下：

     <svg style="display: inline-block;width: 100%;background-image:url(bg.jpg);background-size: 100%,100%;background-repeat: no-repeat;" version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg">
 <g>
 文字代码（略）
 </g>
 <g style="transform: translate(140px, 580px);">
 爆竹矢量代码（略）
 </g>
+ <g style="transform: translate(120px, 560px);">
+ 愿望牌矢量代码（略）
+ </g>
 </svg>

    效果如下，愿望牌完全挡住了爆竹：

    4.8 设置愿望牌初始属性

    由于愿望牌初始状态未不可见，所以将opacity设为0。

     <svg style="display: inline-block;width: 100%;background-image:url(bg.jpg);background-size: 100%,100%;background-repeat: no-repeat;" version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg">
 <g>
 文字代码（略）
 </g>
 <g style="transform: translate(140px, 580px);">
 爆竹矢量代码（略）
 </g>
M <g style="transform: translate(120px, 560px);opacity: 0;">
 愿望牌矢量代码（略）
 </g>
 </svg>

    5 SVG点击交互

    5.1 爆竹升天

    我们要实现的是通过“一次点击”，爆竹上天，然后愿望牌出现。爆竹和愿望牌要打成组。

    接下来，使用 实现click触发动画。

     <svg style="display: inline-block;width: 100%;background-image:url(bg.jpg);background-size: 100%,100%;background-repeat: no-repeat;" version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg">
 <g>
 文字代码（略）
 </g>
+ <g>
+ <animateTransform attributeName="transform" type="translate" values="0 0;0 -350" repeatCount="1" fill="freeze" begin="click" dur="0.5s" restart="never"></animateTransform>
 <g style="transform: translate(140px, 580px);">
  爆竹矢量代码（略）
 </g>
 <g style="transform: translate(120px, 560px);opacity: 0;">
  愿望牌矢量代码（略）
 </g>
+ </g>
 </svg>

    关键属性讲解：

    type ， attributeName="transform"的值，可以是 translate、scale、rotate、skewX、skewY。

    fill ，动画间隙的填充方式。支持参数有：freeze、remove。remove是默认值，表示动画结束直接回到开始的地方。freeze表示动画维持结束后的状态。

    restart ，支持的参数有always、whenNotActive、never。always是默认值，表示每点一次重新执行动画；whenNotActive表示动画正在进行的时候不能重启动画；never表示动画仅执行一次。

    begin ，延迟时间，上面已讲过，这里补充下click，表示点击后立即触发， click+2表示点击后2秒触发。

    现在我们已经实现了点击爆竹后升天的效果，但是愿望牌还处于不可见状态。这里就用到“click+时间”的玩法。

    5.2 愿望牌显示

    在愿望牌的 内加入，由于爆竹升天动画是0.5s，所以click+0.5正好是爆竹动画结束后显示愿望牌。

     <svg style="display: inline-block;width: 100%;background-image:url(bg.jpg);background-size: 100%,100%;background-repeat: no-repeat;" version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg">
 <g>
 文字代码（略）
 </g>
 <g>
 <animateTransform attributeName="transform" type="translate" values="0 0;0 -350" repeatCount="1" fill="freeze" begin="click" dur="0.5s" restart="never"></animateTransform>
 <g style="transform: translate(140px, 580px);">
  爆竹矢量代码（略）
 </g>
 <g style="transform: translate(120px, 560px);opacity: 0;">
+  <animate attributeName="opacity" begin="click+0.5" dur="0.1s" values="0;1" fill="freeze" restart="never"></animate>
  愿望牌矢量代码（略）
 </g>
 </g>
 </svg>

    ※注：请注意设置begin=click的元素和设置begin=click+0.5的元素的层级关系。首先，click元素和click+0.5元素要处于同一个 <g> 内；其次，click+0.5元素层级要比click元素的层级更深，所以能够正确的对应同一个click事件。

    5.3 完成剩余爆竹

    剩下两个爆竹，只需按照以上步骤，替换愿望牌的图片，然后调整元素位置即可，不再赘述。

    6 导入微信公众号

    6.1 上传背景图素材

    以上代码中的背景图我们用的是本地的路径，需要上传至微信后台，获取线上地址。 进入微信公众平台，点击左边的素材管理->图片->上传:

    上传成功后，打开图片，获取图片的线上地址：

    6.2 导入微信文章正文

    新建图文消息，先输入好标题、作者，上传好封面图。 然后在正文区域输入两行文字（微信要求正文必须含有文字）。

    打开chrome调试工具，定位到第二行文字：

    在第二行文字代码处，右击鼠标选择Edit as HTML:

    替换为我们的SVG代码：

    然后随便点击下其他元素的代码，有时可能会自动撤销，如果出现这种情况，再重新粘贴一次就行。

    完成后，就可以发布预览啦。

    6.3 注意事项

    微信编辑器有很多默认的“潜规则”，可能会拒绝我们嵌入的代码，如果被拒，我们嵌入的代码将会被删除或者替换成其他的标签。这里列出我摸索出来的“潜规则”。

  • 标签里的background的url()里，地址不能加引号，单引号双引号都不行，否则会被微信编辑器过滤掉。
  • 标签里不能有id
  • 不能有<style><script><a>标签。

    • 后续有新的发现会继续更新。

    6.4 奇葩BUG及技巧经验

    微信Android客户端的公众号正文页里点击元素，进行移动动画后，元素可能会出现奇怪的边框。需要给涉及到的元素的 <g> 设置style="outline:none"，包括 <g> 内的所有子 <g> 。

    SVG图片的圆心

    在用AI设计SVG的时候，最好把元素的圆心设置在SVG的中点，否则在实现rotate动画时，圆心偏离将导致元素旋转出现问题。虽然可以通过from和to的后面两个参数调节圆心位置，但是非常难手动找到精确的位置。

    <animateTransform attributeName="transform" type="rotate" from="0 41.5 43" to="360 41.5 43" dur="3s" repeatCount="indefinite">

    6.5 参考文献

    张鑫旭的博客《超级强大的SVG SMIL animation动画详解》

    https://www.zhangxinxu.com/wordpress/2014/08/so-powerful-svg-smil-animation/

    SVG参考

    https://www.runoob.com/svg/svg-reference.html

    6.6 完整HTML代码

    请前往我的github查看: https://github.com/Yuezi32/weixin_svg_demo

    热心网友 时间：2022-04-26 14:54

    一、简短精炼的标题
    一篇文章，哪个部分是吸引用户、粉丝的关注点?答案当然是标题。标题一直是重头戏，尤其是近期微信公开了阅读数，这促使很多标题党横生。
    小编摒弃标题党不说，标题应该符合2个要求：1、标题简短，易于用户阅读，标题太长，阅读要花时间，理解标题意思又要时间，这是要*出强迫症的节奏。2、标题要精炼，能让用户一眼明晰文章将要传达的意图。
    二、封面标题美陪衬
    通常推送文章图片和标题是相映衬的，用户看标题的时候也会关注图片，图片做到精致，用户关注度就高。图片的形象要与标题渗透的意思相符，这样才能两者完美结合，传达意境。
    三、摘要抓取好奇心
    标题给力，让用户点击进来看文章，成功了第一步。接下来就是摘要，很多微信运营者都不太重视摘要，直接就是文章，但是小编特别重视摘要。吸引人的摘要，足以让用户把整篇文章阅读完。摘要讲究简洁明了、概以全意、引发遐想点。
    四、内容相关价值高
    其实图文编辑中，内容是最重要的。许多新用户关注你一方面是觉得文章与自己很相关，还有一种就是与自己不相关，但是却有价值意义，会吸引用户关注，进行分享。就微信营销这一块，最有价值的内容就是实战技巧。
    五、文章排版有新意
    文章排版是很重要的，直接关系到用户是否愿意阅读下去。虽然现在越来越多的运营者排版上已无明显的差异，但是唯独缺少一些新意。
    可以说，微信自带的后台是相当简单的，玩创意基本不行。文章排版有新意。
    六、超链直捣公众号加关注
    可以说现在什么扫二维码、搜公众号的方式简直是弱爆了!现在文章内可添加超链接，这就是一个完美的契机。你可以在图文下面直接带上公司的微信公众号，然后添加超链，可直接进入公众号资料页，引导用户点击添加关注。这是最快捷的方式，当然你应该温馨的提醒下用户，让用户知道这个直接关注的超链。

    热心网友 时间：2022-04-26 16:12

    其实技巧就是选择文本不能太多，要合理的搭配图片，这样让用户感觉看着不疲惫，同时可以使用一下微信编辑器，借助微信编辑器里面素材，来把你内容和图片合理的布局一下，这样可以让观看用户感觉更一些，使用微信编辑器，可以看下排版侠编辑，选择内容，直接替换文本以及图片即可，这样更能突出需要表达的内容，同时素材也不能选择过多了。

    热心网友 时间：2022-04-26 17:47

    使用微信编辑器，里面有很多素材可以用
    历史要怎么读,有啥诀窍 高中历史诀窍 年终会活动策划方案 深度解析:第一财经回放,探索财经新风向 逆水寒手游庄园怎么邀请好友同住 逆水寒手游 逆水寒不同区可以一起组队吗? 逆水寒手游 逆水寒怎么进入好友世界? 逆水寒手游 逆水寒怎么去别人的庄园? 使用puppeteer实现将htmll转成pdf 内卷时代下的前端技术-使用JavaScript在浏览器中生成PDF文档 【译】将HTML转为PDF的几种实现方案 变形金刚08动画怎么样 变形金刚08动画的问题 变形金刚08动画日语版剧情介绍 高分!换显卡nvidia控制面板被我卸了,重新安装显卡驱动后没了nvidia控... 我的nvidia控制面板被卸载了 怎么找回啊 卸载后 这个画面看着很奇怪_百 ... 李卓彬工作简历 林少明工作简历 广东工业职业技术学院怎么样 郑德涛任职简历 唐新桂个人简历 土地入股的定义 ups快递客服电话24小时 贷款记录在征信保留几年? 安徽徽商城有限公司公司简介 安徽省徽商集团新能源股份有限公司基本情况 安徽省徽商集团有限公司经营理念 2019哈尔滨煤气费怎么有税? 快手删除的作品如何恢复 体育理念体育理念 有关体育的格言和理念 什么是体育理念 万里挑一算彩礼还是见面礼 绿萝扦插多少天后发芽 绿萝扦插多久发芽 扦插绿萝多久发芽 炖牛排骨的做法和配料 网络诈骗定罪标准揭秘 “流水不争先”是什么意思? mc中钻石装备怎么做 为什么我的MC里的钻石块是这样的?我想要那种。是不是版本的问题?如果是... 带“偷儿”的诗句 “君不见巴丘古城如培塿”的出处是哪里 带“奈何”的诗句大全(229句) 里翁行()拼音版、注音及读音 带“不虑”的诗句 “鲁肃当年万人守”的出处是哪里 无尘防尘棚 进出口报关流程,越详细越好。谢谢大家指教。 双线桥不是看化合价升多少就标多少的吗?为什么CL2+2KI=2KCL+I2中I失... 微信公众号如何编辑素材库？ 微信编辑器哪个好用，素材又多？ 微信公众平台如何添加多图文消息素材 爆竹十声辞旧发打一数字 DNF什么图爆十子斩刀者和屠戮之刃几率大？ 贵有恒,何须三更起五更眠;最无益,只怕一日爆十日寒... 花岗岩，山体爆破的单价？花岗岩一千平方爆10米深... DNF刷哪个天空深渊爆十字斩-者 哪里容易爆十字斩刀-者? 天天酷跑中任务累积打爆十个BOSS关宝箱是什么意思？ 大明龙权爆10级以下的紫装野外BOSS在哪 问道手游助人为乐怎样爆10倍高 天龙八部 哪里刷怪掉9级打孔和10级打孔还有11级的 ... 坦克世界6级坦克打爆10级坦克是怎么回事 会员6能爆10阶装备吗 跪求！！！热血江湖九泉哪爆10或13的武器 盗贼 10敏 和 5爆10强度哪个爆高 QQ三国爆十倍经验有没有方法几率大点？ 诛仙2焚香谷副本爆十玉碎片的几率有多大？ 诛仙3爆10武器怎么来 个人微信如何编辑图文信息 微信公众号编辑好的图文素材怎么发出去 微信公众号素材库里的图文还可以编辑吗 微信平台里的素材怎么才能再编辑 微信公众号里面编辑图文素材 怎么保存不了 好像卡... 怎么把微信公众号里面编辑好的多个素材合并成一个... 微信图文文档怎么做 微信公众平台怎样编辑图文？ 急急急急 。微信公众平台如何发布图文素材？如图 微信图片编辑怎么做比较好看 微信公众号素材管理编辑好的怎么发到微信公众平台... 怎样用手机连接电脑让手机可以上网？ 手提电脑和手机怎样连接才能上网 怎么把手机投到电脑上 长生传(小修中)电子书txt全集下载 《国公女》txt下载在线阅读全文，求百度网盘云资源 国公女_by臧白_txt全文阅读，百度网盘免费下载 穿越小说中人物顾长生的小说名 求小说百度云资源《极品女医：弃妇带娃也嚣张》 求电影世界穿越小说。
    声明声明：本网页内容为用户发布，旨在传播知识，不代表本网认同其观点，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。E-MAIL:11247931@qq.com