小程序开发和H5制作
小程序开发和H5制作
小程序开发和H5制作
小程序开发和H5制作
小程序开发和H5制作
扫一扫
小程序开发和H5制作
小程序开发和H5制作

回到顶部

微信公众号SVG交互设计方案

SVG交互设计 2021年01月12日

现在有很多公司都开通了微信公众号,并在微信公众号上通过推文做产品推广,一些企业甚至还使用SVG 交互动画来提高文章的阅读体验,而不再像之前那样跳转到H5。那么您知道微信公众号SVG交互设计的技巧和方法是什么吗?下面就让我们来一起了解一下吧!

一、微信公众号需要用到SVG交互设计的原因

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

主要原因有两点:

H5制作成本高,需要一定的开发周期和服务器支撑。

从正文页跳转H5页面多了一个步骤,容易造成用户流失。

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

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

微信公众号SVG交互设计

二、所适用的场景有哪些

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

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

【汽车宣传】点击车子后,车子移动,经过某个位置显示某个特性或地点名称文案。

【心理测试】点击某个选项后,出现选择结果。

【拆红包】一层一层拆掉红包,显示最里面内容。

【密码解锁】点击指定的几个数字后,显示解锁内容。

【猜灯谜】点击后显示内容,类似翻牌。

三、素材选取与制作

1、SVG素材

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

2、背景图片

使用PS等软件设计SVG的背景图,建议宽度为640px~750px,也可以更高,但文件大小也会增加。

3、导出SVG

由于编辑软件不允许嵌入 <style><script>标签,所以通过AI导出SVG的时候要进行一下设置:

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

通过上述内容的概述,想必大家对微信公众号SVG交互设计有了更深入地了解,如果您有微信公众号SVG交互定制设计的需求,可以和蓝橙设计团队做进一步地沟通。

相关阅读:

《微信H5页面设计技巧》


更多服务:贵阳H5开发|长春H5定制|沈阳小程序开发|哈尔滨H5开发|昆明微信开发|青岛H5制作公司|杭州H5制作|南京H5定制|厦门H5开发|合肥H5制作公司|南昌H5制作|天津H5定制公司|西安H5游戏开发|郑州H5定制|石家庄H5制作|南宁H5制作|长沙H5开发|太原H5制作公司|三亚H5定制|H5案例分享

H5案例赏析

NEWS

让您了解更多关于H5案例信息

网店详情页设计如何引发用户消费

个网店的产品介绍如果没有详情页作为支撑,那么它在内容方面就会显得很空洞,如此一来,网店详情页转化率就会很低,所获取的流量也会逐步减少,倘若不能提高用户转化率,那么这家网店势必会被平台所淘汰。

2021年03月11日

微信小程序设计理念及功能需求

现在的互联网营销模式逐渐从PC端移动到了手机端,而随着手机端应用范围逐渐广泛,现在的智能手机上也有不少的APP和应用型小程序,那么您知道小程序与APP之间存在哪些区别吗?

2021年03月11日

企业如何通过官网设计提升用户体验

现在的企业,无论大、中、小,都会有属于自己的官方网站,这也从侧面反映出了官网设计这个行业竞争压力也是逐渐增加,因此,我们若是想要通过官网设计来吸引用户,首先就要从提升用户体验角度去出发,

2021年03月10日

平面设计公司如何寻找客户源

平面设计在当下应用是十分广泛的,如果您正在运营一家平面设计公司,那么您一定要知道如何为自己寻找客户源,这样您才能有成单的可能性。并且我们发现一些公司在遇到客户咨询的时候,总是很机械地回答客户,这也会导

2021年03月10日

企业官网设计如何推广企业品牌

企业做官网设计的目的就是为了推广自己的品牌,因此我们在设计的过程中,一定要将自己的产品合理展示在大众的视野中,这样能够让用户快速了解我们是做什么业务的,我们的产品是什么?

2021年03月09日

一款优秀的微官网设计费用是多少

微官网设计需要多少钱,这是很多客户在咨询网站设计公司时,都会询问的一个话题,但由于现在的网站设计公司在设计技术层面上是良莠不齐,规模大小不一,因此微官网设计所需的费用也是不一样的。

2021年03月05日

网店设计|网店图片设计方法汇总

随着电商行业的发展,现在做网店的商家也是逐渐增多,再加上现在的人都喜欢在网上购物,因此网店的市场前景还是十分明朗的,但网店这么多,您要如何才能让用户去关注您的网店呢?

2021年03月03日

原型设计的基础认知和理念分享

在做ui设计时,我们会用到各种设计类型,而原型设计究竟是什么呢?很多人在做原型设计的时候,通常会进入到一个误区,那就是认为原型设计就只是为他人工作,而自己只负责实现,实际上,这种想法并不利于自己的成长

2021年03月03日

APP设计如何拓展线上营销

在做完APP设计之后,我们要如何才能吸引更多的用户,并留住客户,让他们觉得我们的产品很好?当有用户来了解我们所设计的APP时,那么我们的APP才能具备营销效果,现在是智能时代,大多数商家都实现了线下到

2021年03月02日

UI效果图设计应用场景有哪些

UI效果图设计,顾名思义,就是指成品的效果,一个好的成品能够有效提高用户体验,从而吸引大量用户的关注,现在做UI设计的行业不少,那么您知道UI效果图设计应用场景有哪些吗?

2021年03月02日

企业如何进行产品原型设计

在进行UI设计的时候,我们首先要考虑的是,作为企业,我们要如何才能让自己的产品原型设计图受到客户的青睐,只有客户满意了,我们的设计才具有营销价值。

2021年02月26日

企业官网设计如何为用户带来需求

现在不管是什么类型的企业,只要是做线上营销推广,那么势必会搭建企业官网,而在设计企业官网的时候,要如何才能给用户带来需求呢?

2021年02月25日