首发 | 微信SVG交互图文设计新思路[2018]

自JZ团队帮助微信制定AttributeName白名单后网页顶部该做多大，微信交互图文火炸天，作品呈现井喷的趋势。

不过，伴随着越来越多的设计需求，市面上的交互图文越发同质化，重复设计严重，用户逐渐失去兴趣。

所以你会发现，2018年下半场，微信SVG交互图文拼的不是技术，而是设计和创意。下面分享一下在设计过程中，总结出来的交互图文设计新思路。

「SVG可以融合其他设计思维」

❶

网页设计

大学期间做过一年半的网页设计，所以细心的小粉丝会发现，公众号初期的作品，大多有网页排版布局和设计的影子。

PC网页:banner是最重要的设计，也是整个网站的门面。转移到公众号，打开链接的第一满屏设计，就是核心。所以我一般很少做微信顶部的窄栏设计，而是选择满屏设计。

web-banner设计 ↑ 可以适配手机尺寸↓

适用：微信图文第一满屏设计。

移动端网页（H5）:竖版整体设计，从上到下无与伦比的连贯性。这是移动端网页设计非常大的优势，过渡和谐、整体连贯。如果想做微信竖版图文，优秀的移动端网页是非常不错的参考。

参考：手机厂商移动端官网

作品：

适用：微信SVG 竖版图文

❷

平面设计

平面在前几年一直是设计的主流，这里尤指是海报设计。一张平面海报，往往可以转化成一篇优秀的SVG排版图文。

在大神把排版布局、配色、字体等等都搭配好了之后，你只需要照葫芦画瓢，便能轻松生产出一篇非常有设计感的图文。

作品：

适用：微信SVG图文排版。

❸

UI图标设计、LOGO设计

图标和LOGO一直是小元素设计和灵感的聚合体。但是，只有静态设计的时代正在过去。

传统LOGO先靠边，动态LOGO嗨起来！

Dribbble有非常多大神做的动态作品，每一个可以细致拆分，转化成一个SVG动效创意。

适用：SVG动态元素（LOGO、图标、校徽）。

❹

H5

跟移动端网页H5不同，这里的H5设计更灵活自由，充满趣味，也增添更多的交互效果。比较适合企业就节日、活动等即时性非常强的主题做设计。

参考：2017年拉勾之夜 | 年度盛典

适用：微信SVG交互图文（节日、活动）

「SVG可以做不同风格设计」

❶

2.5D立体插画

这两年最火的莫过于2.5D立体插画了，APP启动页广告、网页banner、商业插画、主题海报等等等等。

微信图文采用立体插画，整个页面秒变小清新。同时它在信息可视化、增强画面、给用户留下深刻印象等方面，作用也十分突出。

前段时间刚刚学完立体插画，结合SVG做了篇“”，效果还挺可爱的。

（强行自夸

）

❷

三维立体

之前只想到2.5D立体，脑补了下三维元素用SVG做翻转的样子。没想到计大大已经深入研究了，鉴于自己小白一只，C4D也没用过，就不吹牛批介绍了。反手一个。

基于三维元素设计周期长，后期适配微信需要做较多处理，尤其在设计水平没能同步跟进的情况下，三维立体排版还需要一段时间才能火热，未来半年仍然会以2.5D为主。企业想标新立异做一篇炸天图文，三维设计倒是不错的选择~

❸

平面中的特殊风格：

线条风、波普风

最近比较痴迷波普，喜欢重口味大色块，一改往昔简约线条性冷淡风。

「SVG跨界“打劫”」

❶

SVG&艺术二维码

艺术二维码设计正在成为设计行业的新品类，越来越多的地方能见到其身影。

尤其是立体插画二维码，更适合SVG矢量设计。

可以实现超清、交互、动态等效果。SVG作为一种技术手段，可以在GIF基础上平添交互性和趣味性。

比如，你可以设置一个开关按钮。

点击按钮，打开建筑大楼内的灯光。同时，因为像素点由深色变成浅色（编码识别由1到0），二维码变得可识别。

想想都是炸天的操作。

不过难点在于：

根据识别率控制可变换像素点的数量；

以及矢量二维码无法长按识别的问题。

关于解决方式，敬请关注后期作品和教程。

❷

SVG&立体插画

已介绍，略略略略

❸

SVG&CSS特效

这个不算跨界，SVG和CSS原本就是前端设计的语言，用于微信交互图文也很少分开。

但是特意的组合在一块，还是能实现非常棒的效果。

左右滑动，找对象

「平常我做啥设计？」

平常喜欢收集创意网页顶部该做多大，然后通过设计释放创意，比如

特效模拟:、、、；

游戏模拟:、吃鸡（ing）；

好玩样式:、节日样式（见第三方编辑器）；

因为不喜欢风格僵化，所以公众号内的玩法和创意层出不穷，粉丝小可爱打开一篇就是一篇惊喜，永远处在剥(la)洋(yan)葱(jing)的状态

。

补充：关于「yiwebsite」名字由来

经常被吐槽，公众号名字好难记，一串英文。其实是「yi & website」的组合体。

大学设计个人网站，原本打算用简短好记的域名，但是已经被注册了。所以退而取名「yiwebsite」，该名字也延续到公众号上。

目前该站，一直放在我校服务器上，每到暑假都要顺带被黑一次，所以数据恢复时只上传了静态页。加之PC平台的衰落和工作繁如牛，2016年之后便不再更新。

·····

「福利预告」

❶

以后推送的SVG图文

转发到朋友圈，后台发送1小时截图

可以获取该图文的ai设计稿

比如目前支持：

❷

陆续制作小教程和小样式

伴随着高龄老电脑的退休

色盲卡顿墨迹病，通通治好了

「撒哇子嘞」

我都开始搞事情了

你不关注波儿~~~