微信图文如何优雅排版复杂表格?

JZH52018-11-09 06:06:47

今日案例  SVG 载入

技术亮点  PDF 转制




在16年帮助微信团队制定了《微信下 SVG AttributeName 白名单》后,17 年和 18 年交互式图文爆发,尤其 JZ 多媒体解决方案的首席讲师 GL 作为交互图文新锐,在全行业支持不同顶尖企业发布了大量高品质设计作品,相信以下作品你见过一二:



林肯 | 第一太平戴维斯 | 梅赛德斯奔驰 | 起亚 | 腾讯

分期乐 | vivo | 滴滴打车 | 20世纪福克斯 | 一加手机




不过,SVG 的意义不仅在于让图文变得交互丰富、趣味十足,在实用性方面,各位运营工作者还要学会进一步挖掘其技术价值。



在微信图文里展示复杂表格的时候,以 JPG 或 PNG 格式呈现时,往往因为图文内图片大小有限制,经过压缩以后,呈现出非常模糊的效果。而使用 SVG 格式载入,不仅显示清晰,而且加载速度飞快。接下来,JZ 将示范使用 SVG 在微信图文中优雅排版复杂表格的方法





工具准备


主要用到的工具有:


  1. Adobe Illustrator

  2. 在线图像转换工具,如:

    https://convertio.co/zh/image-converter/




生成 SVG 格式的表格


使用 AI 转换格式。

用 AI 打开我们需要转换的 PDF 表格文档,如图:




点击“文件”→“存储为”,或者快捷键 ctrl+shift+s(苹果电脑按下 command+shift+s),将保存类型选定为 SVG。



在出现的如图“SVG选项”窗口中,将“CSS属性”这一项选定为“演示文稿属性”,然后点击“SVG代码”,获取其代码:



但是用 AI 直接打开 PDF 有时会因为文字编码的问题,在 AI 软件里出现乱码的情况,那么就要使用以下方法来避免这种情况。



 使用在线工具转换格式。


打开网站后,从电脑中选取需要转换的表格文档,注意将目标格式选定为 SVG (如红框内所示),点击“转换”,即可生成 SVG 格式的图片。将生成的文件下载




由此生成的 SVG 文档可以用任一代码编辑器打开以获取其 SVG 代码。如图,用的是 Sublime Text 




❸ 复制所得到的 SVG 代码。





将表格载入图文


进入微信公众平台的图文编辑后台,在 Chrome 浏览器内按下 ctrl+shift+c(苹果电脑按下 command+shift+c)打开开发者工具。



 找到所需要插入表格的位置,就可以把之前复制的代码粘贴过来,随后点击任意空白位置完成载入,效果如下:






注意事项


 使用在线转换工具需要注意的是,在进行转换时,它这只能将第一页的表格进行转换。如果你的 PDF 有超过一页的话,需要将其拆成只有一页的文件。



如果你不希望表格内的文字被随意复制,你可以在 AI 中将其轮廓化后再复制 SVG 代码。


轮廓化方法:

❶ 选中文字,点击菜单栏“文字”→“创建轮廓”,或者快捷键 ctrl+shift+o(苹果电脑按下 command+shift+o)

或者在 SVG 选项窗口中,将“文字”这一项选定为“转换为轮廓”,再进行导出即可。如图:



几篇范例:

复旦大学是怎么教新媒体的?

华南理工是怎么教新媒体的?

暨南大学是怎么教新媒体的?

西北大学是怎么教新媒体的?



那么以上就是在微信图文排版复杂表格的方法。其他高级排版应用,我们会在计划出版的图书中具体介绍。如有任何疑问,或需要定制高级交互图文,请致电:



021 37218818


Copyright © 丰城计算器学习组@2017