微信SVG交互图文设计入门教程

作为一个十足的拖延症患者,我终于积蓄力量,准备放大招了。

但凡学习SVG的人,必定对其有所了解,所以,你们了解过的,我直接略过;不了解的,百度搜索:超级强大的SVG SMIL animation动画详解(置顶一篇即是)。

入门分四部分:

一、认识SVG

二、设计工具

三、设计流程

四、注意事项

一、认识SVG

1.SVG简介

举例:戳大鱼↓

通常我们说的 Web 动画,包含了三大类:

① CSS3 动画;

② javascript 动画(canvas);

③ html 动画(SVG);

因为微信并不支持前两种,所以在微信里做交互式动画的重任,落在SVG头上。

就是说,学SVG,也是在码!代!码!

2.SVG功能

①SVG排版:☞

查看案例

② SVG动态效果:☞查看案例☜

③ SVG交互效果:☞查看案例☜

其实难点并不在代码学习上,而是怎么搭配使用,用有限的代码实现丰富的创意。

二、设计工具

Illustrator

(AI)

①绘图;

②排版;

③生成SVG代码;

Dreamweaver

(DW)

①修改静态代码

②添加动态、交互代码

135编辑器

支持HTML代码模式

微信编辑器

不支持HTML代码模式

三、设计流程

1. Ai里绘图、排版:

所有内容设计、排版完毕,生成SVG代码。

AI生成SVG代码选项↑

2. Dw对生成的代码进行处理:

Dw代码处理页面↑

① 去掉头部HTML代码

② CSS样式转化成SVG样式

这是网页设计中的CSS样式,微信是不支持的,需要更改为,插入到相应的元素标签中。

③ 标签闭合

导出的SVG代码,默认元素标签是单标签,需要对此处理。

其他诸如:

等。

这个时候,Ai矢量图,已经整体代码化。

目前是静态代码,如果做动态和交互,需要手动添加代码。这一部分,后续教程再说。

3.拷贝到135编辑器(代码中转站)

因为微信自身的编辑器不支持代码模式,所以生成的代码需要拷贝到135编辑器,作为中转站,再复制到微信。

ps:有的朋友使用浏览器的开发者模式(审查元素),直接往后台拷贝代码,这样就跳过一步提高效率。

4.复制到微信后台。

四、注意事项

1. Ai设计

❶不支持位图

❷不支持渐变

❸不支持蒙版(尤其是常用的剪贴蒙版)

❹AI整体稿颜色不要过多,后期处理会累死

❺微信默认只支持"微软雅黑",其他字体需要创建轮廓,变成矢量元素,才能显示。也因此,可修改性特别差。

2.Dw代码处理

❶90%的标签需要闭合

❷不支持CSS样式表

3.SVG语言

微信支持的SVG元素和属性有限

所以,SVG的交互设计,是在有限的框架内,寻求创意突破。

代码量

微信后台能承受的代码量是有限的,1.2万行左右,再多会卡顿甚至无法拷贝到微信。

终端适配

不同手机终端显示的效果是不一样的,需要考虑和多做测试。

4.创意设计:

前期设计很重要,费脑子、掉头发、撕裂般抓狂;

5.交互逻辑:

创意设计的效果如何实现。这个也很重要,费脑子、掉头发、撕裂般抓狂+1。

#入门教程END#

以后会陆续出相关教程

欢迎大家关注、转发 ~

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180731G02LSX00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券