微信SVG在微信官方与广大开发者的配合下，玩出了许多了新花样，虽然无法拥有像H5那样强大的功能，但是简单的游戏以及互动播放效果还是能够完成的。公众号推送的视觉交互效果一下子获得了巨大的提升，各大品牌都在通过SVG排版发布营销推文。但是微信SVG制作效果也是参差不齐，下面蓝橙小编就给大家分享一些制作要点。

一、微信SVG交互设计要点

微信SVG交互设计是用户在阅读推文时所触发的互动过程。SVG的交互功能有一定的缺陷，仅仅能够实现点击和滑动两种交互操作。不过用在公众号推文上倒也足够了。微信SVG交互设计包含以下几点：

1、操作引导

操作引导可以让用户进入交互图文之后知道该如何去进行点击、滑动等交互操作。否则就会造成一滑到底，很多隐藏、折叠内容没有被查看的情况，无法达到既定的效果。

2、操作反馈

操作反馈可以让用户知道自己进行了这项操作，同时操作反馈做好了可以有效提升用户的阅读体验。操作反馈效果和反馈时间是设计的关键点。

3、触点面积

有些SVG交互设计会出现难以触发的问题，其实就是设计上的缺陷，我们在进行微信SVG制作时，为了增强用户的互动体验，往往会在交互触点上添加一个透明图层，增加触发面积，避免出现用户完成了交互操作之后无法触发互动效果的问题。

4、防止误触

在互动效果触发的过程中，为了避免出现二次触发，影响当前效果，在效果结束后，都会禁止元素再次触发。

5、优化代码

微信后台支持的代码量是有限的，优化代码的目的是为了防止出现无法保存发布或者图文卡顿的情况。目前优化代码最佳的方式就是减少路径。采用缓动函数可以让交互动作丝滑不生硬

6、终端调试

不同手机终端的分辨率是不一样的，在涉及位置移动的时候显示的偏移位置也不同，非常人头疼；而且安卓和苹果手机，在部分滑动、点击交互操作的时候，会有不同的反应，需要针对性的优化。

二、微信SVG视觉设计要点

1、界面形式

公众号推文主要是推送给手机端用户，而手机的屏幕又是空间是有限的，所以想要向用户介绍更多的信息我们就需要制作连贯的长图。所以我们看到的微信SVG推文主要有两种，那就是横版长图和竖版长图。制作长图时要注意，自上而下和自左向右的浏览方式，是最符合人体结构和用户习惯的。

2、页面风格

微信SVG推文主要是用于发布营销推广信息，常见的有新品宣传推文和品牌营销推文，新品宣传推文一般采用图文搭配的形式，通过滑动点击等方式查看新品介绍信息；而品牌营销推文则是长图文插画故事，通过故事插画设计带领用户了解品牌。所以SVG的画面风格一般可分为两种，那就是图文宣传类型和故事插画类型。

3、页面配色

想要让用户拥有沉浸式的交互体验，可以采用深色调的画面配色风格，搭配晚上8-9点黄金推送时间发布是最好的。当然，具体的画面配色还是要根据内容的需求以及品牌的设计风格来决定。

4、动效模拟

由于微信SVG推文的交互操作无法像H5那样丰富，所以许多的交互设计都无法完成，但是我们可以通过模拟动效的形式来弥补这一缺点。所以在用户进行点击、滑动等交互操作时，可以通过播放一段动画来模拟互动操作，提升视觉交互体验。

以上就是关于微信SVG视觉、交互设计的详细介绍内容了，总的来说，SVG推文与常规的推文不同，它属于一种代码形式，想要做好微信SVG设计，需要结合视觉和交互设计两个方面。所以SVG推文多采用定制开发的形式，如果您有微信SVG定制需求的话，可以联系专业的开发公司蓝橙视觉。