想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
 现在我们可以通过行为改变元素的填充颜色以及元素的边框颜色.

演示地址： http://cn.mugeda.com/animation/edit/a604a6ac

首先在页面上绘制两个图形以及两个对应的行为按钮,，一个按钮用来改变对应图形的填充色，另一个按钮用来改变对应图形的边框颜色。



然后分别给被改变填充色和边框颜色的两个图形分别命名。





然后分别给下面的两个按钮绑定上行为。







然后在作品里点击这个按钮，对应元素的填充色就会变为行为里所选择的颜色。




改变元素边框颜色的行为操作与之类似，选择另一个按钮,，然后点击改变元素属性，点击编辑。

想要了解更多Mugeda功能？>>>猛戳我，学习更多教程

为了方便设计师更好的编辑内容，防止内容在设备上超出可见显示范围（安全框），木疙瘩支持显示屏幕适配范围辅助线。在IDE中舞台的右上角，可以通过选择屏幕适配方式和设备类型来在舞台上显示屏幕适配范围辅助线。



选择后，物体上会出现一个方框指示指定设备的可见范围（安全框）。如果舞台上添加的内容超出了指定设备的安全框，方框会显示为红色以提示设计师调整元素位置。如果没有元素超出安全框，方框会显示为绿色。


 

要了解更多Mugeda功能？>>>猛戳我，学习更多教程​
通常我们在制作作品时，涉及到用户在传播过程中累加计数的功能时就会用到计数器。
如图，我们点击计数器工具在舞台上添加一个计数器，设置默认值和计数值。



我们先在舞台上添加相关按钮素材。如图，添加两个文本框分别命名为“显示计数”“获取计数”



为“增加计数”按钮添加“增加计数”行为
数据服务→增加计数→触发条件：点击→设置参数 
计数器名称：“计数器1” 
显示计数元素：“显示计数”





同理，为“获取计数”按钮添加“获取计数”行为。可点击预览观看效果。
双击舞台上的计数器弹出“计数器”对话框，点击“管理实时数据”，可以修改当前数据。


 

想要了解更多Mugeda功能？>>>猛戳我，学习更多教程

编辑地址：http://prerelease.mugeda.com/a ... 15485
预览地址：http://prerelease.mugeda.com/c ... 15485

为了支持更加灵活的编辑运动曲线，关键帧动画增加了“自定义运动曲线”的功能。



选择“自定义运动曲线”后，可以点击编辑对运动曲线进行编辑。以一个包含有2个关键帧的基本动画为例，打开“编辑运动曲线”对话框后可以在左侧点击选择想要编辑的运动曲线，即可在右侧显示出运动曲线并可进行编辑。



第一次打开时，默认曲线是线性，并且显示为半透明，表示还没有指定任何曲线。可以从“预置曲线”中选择一个曲线类型，这时候，曲线会显示为实线。运动曲线的横坐标代表时间，纵坐标代表运动进度（即0%指100%)。每一段运动曲线由首尾的两个绿色节点表示，左下角的绿色节点代表对应关键帧动画段的开始时刻和运动进度0%，右上角的绿色节点代表对应关键帧动画段的结束时刻和运动进度100%。运动曲线可以通过拖动红色控制节点进行编辑，实现不同运动特征的运动。



添加了运动曲线后，左侧对应的的属性列表会显示一个关闭按钮，表明该属性已经指定了一个自定义的运动曲线。每一个列出的属性（例如宽度、透明度、滤镜等），都可以定义自己独立的运动曲线。如果没有指定，对应的属性就会采用默认属性的运动曲线。如果没有指定默认运动曲线，则会采用线性运动曲线。

如果关键帧动画包含有多个关键帧动画，运动曲线会显示为多段。每一段都由首尾两个节点来分割。其中，显示为绿色的为当前正在编辑的关键帧动画段。点击任意曲线段可以切换当前编辑的动画段。如果想要只显示当前动画段，可以切换曲线上方“显示所有关键帧”选项。



运动曲线编辑目前支持关键帧动画和变形动画，并支持如下参数的动画曲线定制：

x偏移量
y偏移量
宽度
高度
透明度
旋转角度
滤镜（阴影、模糊、灰度、亮度、对比度、色调等）
变形动画参数（字体大小、字间距、行间距、填充颜色、线条颜色等）

下面是2个常见的运动曲线的例子：

自由落体：自由落体可以由在水平方向上的匀速运动和在垂直方向上的加速运动来模拟。其运动曲线类似下图：



缓动进度：这是一种常见的进度显示方式，即一个减速移动，连接一个匀速缓动，再连接一个加速移动。其运动曲线类似下图：



上述提供的演示地址包含了这两种运动的实现方法和效果。

在连接多段运动曲线时需要注意，由于控制自由度的限制，有时候为了实现平滑的多段运动，需要调整关键帧的位置或者每一段运动的位移数值，以便对运动速度进行微调，实现想要达到的运动效果。

想要了解更多Mugeda功能？>>>猛戳我，学习更多教程

编辑地址（第4页）：
http://beta.mugeda.com/animation/edit/d76c44f6
演示地址：http://b13b5c18.u.mgd5.com/cam ... .html

变形动画新增对文本的支持。即：可以为文本添加变形动画， 并在关键帧上设置文本的属性进行变形动画。目前支持的文本变形动画的属性有：

字体颜色
字体大小
行间距
字间距
滤镜效果

要了解更多Mugeda功能？>>>猛戳我，学习更多教程​
 设计师可以通过实时数据管理的功能，用来管理投票、抽奖的当前数据(被投票对象的当前票数,奖品剩余数量以及领奖码剩余数量).

演示地址:http://cn.mugeda.com/animation/edit/ed60ab32

以投票为例：
现在舞台上已经生成了一个标准的投票组件以及给一个按钮绑定了抽奖的行为，当用户发生投票行为时，被投票目标的票数会在当前基础上+1,，假如现在有北京，上海两个投票对象，假如北京目前所得票数为100，现在我们想把北京所得的票数改为50，通过实时数据管理即可轻松修改。



首先点击管理实时数据，会弹出如下对话框。



我们现在想要把北京改为50票，只需要把北京后面的输入框内的数值改为50，点击确定即可。



保存以后，打开作品，会发现北京的票数由原先票数改变成了50票。



同样的,通过抽奖组件的实时数据管理，可以去修改奖品的剩余数量以及领奖码的剩余数量。


 

想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
 动画导出器在动画导出的时候做一层检测，当用了首页作为加载的时候，符合条件的时候会将动画的首页在服务器上做静态的导出。静态导出的首页后，当用户打开动画，可以在第一时间看到首页，减少了以前黑屏的时间。

目前符合条件的动画特征：

组件只包含文字、图片、形状、元件、组

填充效果只支持纯色填充、图片背景填充

动画支持关键帧、形状、变形的线性变换

支持组件的2d定位

所有使用的图片的总面积不大于某个阈值

支持新的预定义文字——加载进度，取值0到100

文字组件支持非云字体

屏幕适配支持默认

不含有交互特性（如行为、预置动画）

动画在导出或者发布的时候，如果上述条件满足，则自动将首页作为加载做静态导出。可以观察到的特征是：
导出：在导出包里出现了新的文件msl.js。
发布：查看msl.js链接的存在性。例如：发布地址是http://xxx.xxx.xxx/xxxx/xxxx/index.html，查看http://xxx.xxx.xxx/xxxx/xxxx/msl.js的存在性。

要了解更多Mugeda功能？>>>猛戳我，学习更多教程​
 编辑地址：
http://beta.mugeda.com/animation/edit/d76c44f6
演示地址：http://b13b5c18.u.mgd5.com/cam ... .html

目前支持如下滤镜：

灰度 Grayscle
亮度 Brightness
对比度 Contrast
饱和度 Saturation
色调 Hue
模糊 Blur
阴影 Shadow
泛黄做旧 Sepia
负片 Invert

为了给元素添加滤镜，选中元素后，在属性面板选择想要添加的滤镜效果，然后点击“+”图标即可将指定的滤镜效果添加到元素上。



根据需要，可以添加1个或者多个滤镜效果。每一个添加的滤镜都可以通过调节滤镜参数来调整滤镜的渲染效果。例如，模糊滤镜可以调节模糊程度。其中，阴影滤镜包含有多个参数，可以将鼠标移动到阴影效果上显示参数并编辑。



如果不想要使用一个已经添加的滤镜效果，可以通过对应的滤镜效果右侧的删除按钮移除。



滤镜效果也支持动画。即：在关键帧上添加的滤镜效果，可以在关键帧动画时进行插值，实现滤镜效果的动画渲染。在动画插值过程中，如果某个关键帧上没有添加指定的滤镜，那么将会采用默认滤镜效果参数进行插值。例如：

如果第1个关键帧添加了100%的灰度，而第2个关键帧没有添加灰度滤镜，那么在动画过程中，第二个关键帧将会用默认灰度(0%)进行插值；

如果第2个关键帧添加了8像素的模糊，而第1个关键帧没有添加灰度滤镜，那么在动画过程中，第二个关键帧将会用默认模糊(0像素，即没有模糊）进行插值；

其它的以此类推。

目前滤镜效果的局限是，由于安卓和iOS手机上仅支持CSS滤镜，不支持Canvas滤镜，
因此手机上需要用Canvas进行渲染的部分（例如遮罩和截屏）暂时不支持滤镜，这一
点在使用中需要注意。

要了解更多Mugeda功能？>>>猛戳我，学习更多教程​
 辅助线的作用于photoshop里的辅助线功能类似，开启辅助线后，设计师在拖拽物体至辅助线时，物体会自动停靠至辅助线位置,，辅助线仅仅在ide内可以看到,，渲染后的作品看不到辅助线。



具体使用方法
1、绘制一条辅助线
按住alt键不要松开，然后在舞台上拖拽鼠标左键至某个方向(上下左右)，即可绘制出一条辅助线。



当鼠标移动至辅助线附近时,即可拖动辅助线,同时显示鼠标所在辅助线的坐标.

2、隐藏\显示辅助线及删除辅助线的几种方法

拖拽辅助线的时候,，和pshotoshop一样，将辅助线拖拽至舞台之外即可删除辅助线。





也可以通过视图菜单中的删除所有辅助线进行删除。





点击工具栏中的辅助线工具，即可快速显示\隐藏所有辅助线，也可以通过视图菜单中的辅助线选项，来进行显示隐藏。
 

要了解更多Mugeda功能？>>>猛戳我，学习更多教程​

 下面我们介绍用Mugeda导出GIF动画的方法：

1.序列帧动画导出GIF动画

如图，以序列帧形式添加几张图片至舞台，使其形成一个整体的动画效果
导出GIF动画步骤：文件→导出→GIF动画注意：所有导出只支持导出第1页



可修改舞台大小改变导出的GIF动画大小



2.关键帧动画导出GIF动画

同时，我们也可以在第1页制作一个关键帧动画，点击文件→导出→GIF动画，同样可以导出GIF动画



3.元件动画导出GIF动画

我们制作一个车轮360度旋转的元件动画



将该元件放置舞台第1页（对齐小汽车元素合适的位置），同时在舞台上制作一个小汽车从左到右移动的关键帧动画效果



点击：文件→导出→GIF动画，同样可以导出GIF动画
注意：舞台帧数大于等于元件内帧数



4.曲线变形动画导出GIF动画舞台上的曲线变形动画可以导出GIF动画，元件内的曲线变形动画则不可以导出



5.进度动画导出GIF动画

如图，我们将需导出的进度动画移至第1页，点击：文件→导出→GIF动画，导出GIF动画



以上列举了一些支持导出GIF动画的几种形式，如下图，是一些不支持导出GIF动画的形式


 

要了解更多Mugeda功能？>>>猛戳我，学习更多教程​
 本案例的原理是用陀螺仪控制舞台上的图片或视频。
 
在讲解本案例之前，我们首先需熟悉陀螺仪旋转轴的原理，如下图解释了陀螺仪控制手机如何绕X、Y、Z轴旋转的情况。



上传视频素材
注意：为防止视频在不同手机的不兼容性，我们在制作案例前可先将视频导成序列帧的形式再上传进编辑页面


 
在舞台上添加一个陀螺仪，选择旋转类型，如下图为“绕Y轴旋转角”，同时将其命名为“Y”



设置关联属性

选择视频素材，点击其“左”属性右边的“关联”按钮，设置关联属性：
参考物体：“Y” 
参考属性：“文本取值” 
关联方式：“控制点插值”
 主控量：“-40” 
被控量：“0” 
主控量：“40” 
被控量：“-1198” 
（注意：具体数值可提前在手机上观察得出）


 
同时添加另外一个陀螺仪，设置其类型为“绕X轴旋转角”，为其命名为“X”。



选择视频素材，点击其“上”属性右边的“关联”按钮，
 
设置关联属性：
参考物体：“X” 
参考属性：“文本取值” 
关联方式：“控制点插值”
主控量：“20” 
被控量：“0” 
主控量：“80”
被控量：“-173”


 

 要了解更多Mugeda功能？>>>猛戳我，学习更多教程​
 
设置首页
如下图，点击“导入Photoshopshop(PSD)素材”按钮，将PSD格式内的图片素材原位置“分层导入”编辑页面



可为每个素材添加预置动画效果



将“点击”图标右键转换为元件，双击在元件页面为其设置一个放大缩小的动画效果。点击回到舞台后可重新为其添加一个预置动画效果。



设置长图元件动画

新建图层，在第3帧插入帧，插入关键帧，同时添加进长图背景素材



将背景图片右键转换为元件，进入元件页面。
新建图层，分层导入其他图片素材。



为所有素材图层插入关键帧动画，分别设置素材的动画效果，例如给人物素材设置放大缩小动画，为“向左滑动”图标设置向左滑动动画效果。



回到舞台，补全所有图层的帧数，为长图元件添加预置动画，如图为“向右移入”



如下图，为“点击”图标添加“点击跳转到第3帧并停止”的行为。同时新建图层“行为层”，添加矩形，为其添加一个“出现即暂停”的行为。注意随时保存作品。



选中长图元件，在其属性栏内设置“拖动/旋转”为“水平拖动”



设置点击出现提示效果
新建图层“提示层”，在第4帧插入空白关键帧，同时导入原先预备好的提示素材。可为其添加预置动画效果等。



新建两个按钮层，分别在一个图层的第3帧放置“分享”按钮，在另一个图层第4帧提示页面放置一个“返回”按钮。



补全“行为层”及其他图层帧数，为其中一个需提示介绍的人物素材添加“点击跳转到第4帧并停止”的行为



为第4帧的“返回”按钮添加“点击跳转到第3帧并停止”的行为。即为第一个人物素材设置好了提示出现和消失的动画，同理可为接下来的人物素材设置提示出现消失的动画。



设置分享动画的提示：如下图，新建“分享”图层，添加分享提示的素材，命名为“分享”，将其移至舞台之外。



为“分享”按钮添加“改变元素属性”行为属性控制→改变元素属性→触发条件：点击。 设置“参数” 元素名称：“分享” 元素属性：“左” 赋值方式：“用设置的值替换现有值” 取值：“0”





同理为“分享”素材组合添加“点击改变其左坐标为‘1000’”的行为，即点击将其移至舞台之外。


 

想要了解更多Mugeda功能？>>>猛戳我，学习更多教程​1. 制作科技感走线动画（进度动画）

如图，我们可以选择曲线工具、节点工具在舞台上画一个折线，同时可以调节折线的颜色等属性



然后在时间轴上右键→插入帧→右键→插入进度动画
即可制作出一个自动绘制折线的炫酷动画



我们新建5个图层，分别在每个图层上绘制一条直线



为第一条直线的某个时间段插入进度动画：右键→插入进度动画→（在特定帧数上）右键→插入关键帧




同理分别为其他几条线插入进度动画，制作出直线一条条绘制出来的炫酷效果



也可新建图层，在合适的位置添加相关图片素材等



2. 制作酷炫logo动画（进度动画）

同理，我们也可以用进度动画制作相关logo的绘制效果。
如下图，我们使用曲线工具、节点工具在舞台上绘制一个Mugeda的logo图形



为其添加进度动画



3. 制作酷炫酒瓶走光动画（遮罩动画）

我们先用曲线工具绘制一个酒瓶形状，同时新建图层2，将酒瓶复制粘贴进图层2




选中图层2，将其物体的填充色去掉，只剩下边框



在图层2下面新建图层3，添加一个矩形，在其属性栏的填充颜色内选择“线性”，制作白色光亮效果



为所有图层添加帧，为图层3的光亮物体制作一个从上往下移动的动画效果



选中图层2，将其转换为“遮罩层”



我们可先将图层1的物体移至最后一帧以防其阻挡走光效果。
最后可点击预览效果。

想要了解更多Mugeda功能？>>>猛戳我，学习更多教程​
 1.制作元件动画

如图，添加一张图片素材，调整舞台大小使其符合素材大小，同时右键将图片素材转换为元件，双击元件进入元件编辑页面



如图，在元件第20帧插入帧，插入关键帧动画。
选中变形工具，按住Ctrl键将中间的控制原点移至舞台右侧中间位置



分别选中第一帧、最后一帧，改变其“Y轴旋转”为“-90”“90”





可点击“预览”观察元件动画的效果

同时我们在帧数的中间位置（图片正居舞台）插入关键帧，调整“透视度”为“50”



如下图，我们新建多个图层，复制图层0上的所有帧，分别粘贴进每一个图层内



如下图，在图层8上，删除除第一帧之外的前半部分帧数，同时修改第一帧的“Y轴旋转”为“0”





同理，分别删除图层7、6、5、4前半部分的一些帧如下图，分别修改图层7、6、5、4第一帧“Y轴旋转”角度为“-18”“-36”“-54”“-72”



移动图层2、1、0上的关键帧如下图位置，即在前面分别插入2、4、6帧



新建图层9，在与图层0第一帧相同帧数上插入一个矩形，调整颜色如下图，制作一个光韵矩形。



如下图为光韵矩形也设置相同的翻页动画，调整其第一帧关键帧的“Y轴旋转”为“-90”，调整其最后一帧关键帧的“Y轴旋转”为“0”，同时在最后插入一个空白帧。



如下图，隔图层复制光韵图层及帧。



之后，可双击元件每个图层的物体，分别进入各自的组，添加相对应的素材。
即做好一个元件动画。



2.制作“左右滑动预览”动画

回到舞台，新建一个图层，添加“左右滑动预览”指示图标、一个文本框、两个定时器
分别为文本框、两个定时器命名为“关联数值”“加”“减”



改变文本框数值为“10”。点击其“添加/编辑行为”按钮，添加两个行为：

属性控制→设置定时器 →触发条件：出现 →设置“参数”：
定时器名称：加
设置状态：暂停记时器





属性控制→设置定时器 →触发条件：出现 →设置“参数”：
定时器名称：减
设置状态：暂停记时器



为“加”定时器添加行为
属性控制→改变元素属性 →触发条件：属性改变 →设置“参数”：
元素名称：关联数值
元素属性：文本取值
赋值方式：在现有值基础上增加
取值：0.01





同理，为“减”定时器添加行为
属性控制→改变元素属性 →触发条件：属性改变 →设置“参数”：
元素名称：关联数值
元素属性：文本取值
赋值方式：在现有值基础上增加
取值：-0.01



设置元件的动画关联如下图：
关联对象：关联取值
关联属性：文本取值
开始值：10
结束值：0
播放模式：同步



为元件添加六个行为，分别为
“向左滑动‘加’定时器继续计时”
“向左滑动‘减’定时器暂停计时”
“向右滑动‘减’定时器继续计时”
“向右滑动‘加’定时器暂停计时”
“点击暂停‘加’定时器”
“点击暂停‘减’定时器”



为文本框添加两个控制定时器的行为：

属性控制→设置定时器→触发条件：属性改变→设置“参数”
定时器名称：减
设置状态：暂停记时器
执行条件：检查元素状态
元素名称：关联数值
参考属性：文本取值
逻辑条件：小于等于
参考值：0





属性控制→设置定时器→触发条件：属性改变→设置“参数”
定时器名称：加
设置状态：暂停记时器
执行条件：检查元素状态
元素名称：关联数值
参考属性：文本取值
逻辑条件：大于
参考值：10


 

想要了解更多Mugeda功能？>>>猛戳我，学习更多教程​
 
1.制作缩放动画
 我们先在图层1添加第一张图



在图层2添加第二张图，将第二张图放大，使其放置第一张图的画面大小符合舞台（即与图层1第一张图大小画面重合）



如下图为两个图层第50帧位置上插入帧，在图层1上第二帧插入一个空白帧使其只出现在第一帧上，为图层2插入关键帧动画，在最后一帧关键帧上调整第二张图片的大小使其符合舞台



如图我们新建图层3，在最后一帧插入空白帧，添加进第三张图片，调整图片大小使其放置第二张图的位置大小符合舞台（即与图层2最后一帧图片大小画面重合）



同理我们在三个图层第100帧位置上插入帧，为图层2、3插入关键帧动画，分别在其最后一帧关键帧上缩小图片，使第三张图的大小符合舞台



同理新建图层4添加第四张图片，制作动画效果，此处不详述。



2.制作“长按按钮播放动画”效果

如图，新建图层，添加一个按钮元素



新建“行为层”添加一个矩形，设置矩形“出现即暂停”行为，同时在该图层第二帧添加一个空白帧，使该行为只使用在第一帧



为按钮素材添加两个行为：
动画播放控制→播放→触发条件：手指按下；
动画播放控制→暂停→触发条件：手指抬起。
 
 

想要了解更多Mugeda功能？>>>猛戳我，学习更多教程​
 本案例将讲解“长按手指播放动画、手指抬起动画暂停”的动画效果

1.控制舞台动画
我们首先在舞台上添加一个矩形，设置“出现即暂停”的行为



选择最上图层,在舞台需手指按住的位置上添加一个矩形，设置其透明度为“0”



随后为该透明矩形添加两个行为：
动画播放控制→播放→触发条件：手指按下；
动画播放控制→暂停→触发条件：手指抬起。



2.控制元件动画
首先，我们可在舞台上添加一个元件动画，如下图，为其命名为“麦穗”



回到舞台，继续为控制矩形添加两个行为，即“手指抬起即暂停”“手指按下即播放”



分别在这两个行为的“参数”对话框内设置“作用对象”为“麦穗”



3.控制提示元素
如下图，在舞台上添加一个“要一直按住才会播放哦”的提示语，为其命名为“提示”



为控制矩形再添加两个行为：
1.属性控制→“改变元素属性”→触发条件：手指按下→设置参数
元素名称：提示
元素属性：透明度
赋值方式：用设置的值替换现有值
取值“0”





2.属性控制→“改变元素属性”→触发条件：手指抬起→设置参数
元素名称：提示
元素属性：透明度
赋值方式：用设置的值替换现有值
取值“100”



这样，一个“长按手指控制动画播放”的效果已做好。

经过一个月的作品征集，第2季木疙瘩H5模版设计大赛收到了众多优秀的模版作品，感谢大家的热情参与！每个模版作品都让评委眼前一亮，品质很高，我们先给参加此次模版大赛的小伙伴们鼓个掌！
 
一、评选进程
在专业评审激烈的评选后，共有40个优秀作品成功入围复选，以下是入围作品名单：

1. 复选时间
复选时间是8月15日—8月26日，网络投票与专业评审打分同步进行

2. 评分规则
总分=专业评审平均分*60%+网络投票权重*30%+模版可套用性*10%
（按照总分排名分配奖项）
 
二、如何投票
扫描二维码即可参与投票（或在Mugeda公众号回复“投票”）
【扫码投票】
未关注Mugeda公众号的朋友，扫描关注后，点击自动弹出的投票信息即可投票。
进入投票页可观看所有入围作品
 
三、获奖公布
模版大赛获奖结果将于8月27日—8月31日进行公示，进入复选的小伙伴有木有很激动呐！快来投票吧！
 
四、关于奖项
第2季木疙瘩H5模版设计大赛共设置5个奖项，分别是一等奖1名，二等奖2名，三等奖3名，人气奖1名，优秀奖20名。
具体奖项可进入大赛官方页面查看。
 
【进入大赛官方页面】

快来pick你最喜爱的模版作品吧！
 

【通知】180807木疙瘩版本更新

1、优化模板页面，增加模板套餐等服务；

2、支持微信登录；

3、优化了网站页面和工作台动画作品的UI设计；

4、IDE（木疙瘩编辑器）增加了新手制作动画的引导；

5、IDE元件列表中支持定位舞台元件位置（可通过“选择元件实例“查看）；

6、IDE支持通过点击”控件图标”选中控件；

7、优化了IDE中多种情况下出现的选取框线的默认值，看起来更美观；
 
8、修复了导出内容包可能失败的问题；

9、修复了编辑内容时，可能导致数据保存异常的问题；

 

立即购买

活动咨询QQ：3024076303，电话：400-101-6190
 
温馨提示：奖励发放将通过系统消息通知，敬请留意右上角的【消息通知】。
 
本活动最终解释权归北京乐享云创科技有限公司所有。

刘燃，木疙瘩模板征集赛二等奖获得者，火星时代教育成都校区学员。
获奖作品：《端午节你并不孤单》   观看模板>>
指导教师：边晓庆
专家评语：一个很走心的作品，配合文案，看完的用户很感动。 交互方式可以丰富一下。 

>>>进入火星时代教育空间>>>

>>>观看视频专访>>>

Q1：从事这个行业多少年了
前前后后大概有4年的时间了。

Q2：为什么做设计？
起初是因为爱好吧，喜欢写写画画，到后来应该算是一个目标吧。想要把设计做好。

Q3：众所周知，设计师对美是有追求的，请您谈谈您对美的独到的见解？
见解谈不上，就我个人而言的话，我觉得一切自然的表现都是最美的。

Q4：在设计中融入怎样的理念/想法可以有很好的用户体验？
要让一个设计有很好的用户体验我觉得要做到两点：站在设计师的角度去创造，站在用户的角度去感受。

Q5：工作、生活中比较高兴、心酸的事？
工作生活中比较高兴的事就是看见自己的付出有所反馈，心酸的话，都还挺好，主要是心态摆得比较正。

Q6：您能谈谈您的设计灵感来源于哪里吗？您是通过什么方式捕捉时尚前沿信息，获得创作灵感的？
方式的话就是多看，各种网站，各种领域，以及国内外的各种优秀作品。跟他们相比，我要学习的东西还太多太多。

Q7：您认为一个好的设计师应当具备哪些特质和能力？请分享一下您的经验？
除开设计师必备的基础技能以外，我觉得一个好的设计师，更应该懂得去体验自然，体验生活，当自己的眼界以及认知提升了，才能创造出多元化的事物。摄影是个不错的选择。
 

奚俊生，木疙瘩模板征集赛二等奖获得者。
获奖作品：《端午游戏-欢天喜地吃粽子》   观看模板>>
专家评语：创意、平面和动画都不错，游戏体验不错。如果游戏时长缩短，下落物体种类丰富一些，并添加吃掉时的加分特效就好了。
 
>>>进入设计师空间>>>
 
>>>观看视频专访>>>

Q1: 自我介绍
大家好，我是设计师奚俊生，用户名叫小西大人，广东揭阳人，从事设计行业已经10年了，目前在广州从事UI设计工作，很高兴也很荣幸能参加本期的【你好，设计师】栏目专访！

Q2: 为什么做设计？
因为从小喜欢画画，对完美的画面呈现有着极致的追求！

Q3: 设计之路上，哪种风格对你影响最大？
我觉得半扁平化设计的表达方式是对我影响最大同时也是我最喜欢运用的设计分格！

Q4: 众所周知，设计师对美是有追求的，请您谈谈您对美的独到的见解？
其实每个人对美的追求都是大同小异，什么才能算美，我觉得，美只是一个不断去探索不断去学习的过程，没有哪种设计是能说最美的！

Q5: 您做过最满意或者印象最深刻的作品是哪个？或者别人的作品？
我近期设计了一个父亲节的作品，叫《父亲节-记得给他打电话》，随着我们年纪的增长，背井离乡，各种忙忙绿碌，经常会忽略家里的父母亲，他们才是最爱最想我们的那个人，呼吁一下大家有空常常回家，平时多打电话！

Q6: 在您的从业经历中，是否有哪一个转折性的事件或者项目，令您记忆犹新？对此有哪些感受和体会？
2010年广州亚运会和残奥会的时候，作为唯一 一个设计志愿者，每天早上5点多去坐公交，两个半小时的车程，虽然那段时间很累，不过还是收获了很多难得的东西！

Q7: 您能谈谈您的设计灵感来源于哪里吗？您是通过什么方式捕捉时尚前沿信息，获得创作灵感的？
平时多看一些主流的设计分享平台，如花瓣、站酷等，学习目前主流的设计趋势及视觉表现方式等！

Q8: 您认为一个好的设计师应当具备哪些特质和能力？请分享一下您的成功经验？
个人认为，一个好的设计师应该是具备洞悉主流设计趋向，熟练与灵活运用各大设计软件并能把控全局，不断的优化，把细节做到完美、做到到极致！
 

欢迎参加木疙瘩HTML5模板设计赛（第二季）！
 
小伙伴们一定想知道，如何设计一个好模板，在众多作品中成功突围呢？
本宝典包含五大成功秘籍，收好不谢～
 
秘籍一
评委亲授视频教程，10分钟读懂《好模板是怎样炼成的？》   马上观看>>
 
秘籍二
明确大赛主题——模板，模板可用性是评分标准之一
做一个合格的模板就能成功一半，查看图文教程《木疙瘩模板制作规范》
 
秘籍三
参赛作品为5个主题任选，下面是每个主题的深度解析，点击查看：
1、模板深度解析——图文展示新闻
2、模板深度解析——答题测试类
3、模板深度解析——游戏类
4、模板深度解析——邀请函
5、模板深度解析——企业/产品宣传
 
秘籍四
本季大赛新增网络投票环节，所有入围作品将进行网络投票。
偷偷告诉你，投票分数占比30%，投票第一名将获得「人气奖」
发动你的朋友圈投票吧～
 
秘籍五
评委亲授视频教程，《详解模板如何制作》   马上观看>>
 

企业宣传、产品宣传是常用的模板类型，用于企业和品牌宣传、产品推广营销等。
 
此类模板要注意的是：
1、放置企业信息：如logo、企业名称、二维码等
2、图片易于替换：尤其是产品图片
 
下面来欣赏几个示例：
 
1、科技风企业宣传        观看模板>>
很通用的科技风模板，适用范围非常广。动画不算复杂，恰巧适合小白用户修改。

 
 
2、耳机产品宣传         观看模板>>
比较时尚、炫酷的产品宣传模板，围绕耳机产品做了各部分的介绍。中间的各部分解析页、图片切换页都是常用的表现方式，可以借鉴。

 
 
3、智炫汽车宣传          观看模板>>
一个汽车产品宣传，内容页很多，排版样式多变。制作多种排版效果，将产品文字、图片填进去，再配以适合的动画效果。好模板就这样完成了。

 
 
4、企业通用宣传            观看模板>>
这个风格是不是也很通用？此类模板就是需要适用范围广的风格，不需要太具个性，用户范围才广。
中间企业大事记采用了关联交互动画，很有意思，是模板的亮点。

 
 
5、交互性企业宣传           观看模板>>
这叫「长图拖动关联动画」，是常用的交互展示类型。通过上下拖动画面，控制动画的播放和页面的位置，效果很好。
感兴趣的同学可以学习一下。

 
看了这么多，总结2点：
1、风格要通用
2、用户好修改
 
如何做到模板好修改？看这个：
>>>查看模板制作规范>>>
 
 
 
 

邀请函模板非常普遍、通用，通常用于会议、活动、婚礼等。
 
内容要符合邀请函特点，通常必备信息有：
首页“邀请函”字样；
内容页放背景介绍、活动信息、日程表、嘉宾等；
结尾页包含活动地址、时间，提交表单（姓名、电话、参与人数等）。
 
下面就要认识一下邀请函模板～
 
先从一个简约版邀请函开始，简约、大气的风格，适用于多种场景，并满足了邀请函的基本需求。   观看模板>>

 
想做一个吸引眼球的邀请函，酷炫的视觉效果必不可少，这个模板就是以视觉取胜的：   观看模板>>
有AE基础的童鞋，可以制作特效序列帧导入木疙瘩，效果成倍翻～

 
下面的模板是前一阵超级火的抖音风邀请函：  观看模板>>
追赶热门的画面风格、交互形式是做模板的必杀技，这种模板短时销量最高。

 
纯展示的H5难免审美疲劳，用特别的交互方式能激活用户的神经：     观看模板>>
这个模板用水平拖动的交互方式，配合卡通场景和有趣的元素，将按钮放进太空场景中，点击后弹出邀请函的信息点，很有意思。

最后这个邀请函有震撼的视觉效果，以及高级的交互体验：    观看模板>>
长按手指开启太空穿越的动画，用计数器展示启动嘉宾数量，进入邀请函后，用长图拖动关联功能查看内容。

 
此外，还有婚礼邀请函这个方向，主要体现在设计风格和内容的不同：    观看模板>>
 
 
邀请函风格各异、动画形式丰富、交互方式更是多种多样，大家可以尽情发挥创意～
 
注意要符合模板制作规范～
 
>>>查看模板制作规范>>>

游戏是H5的一种高级应用，木疙瘩支持无代码制作很多种游戏，消除游戏、接物游戏、连连看、换装、竞速、找茬儿等等。
 
制作游戏模板要注意：
1、选用逻辑简单、用户好理解的做法
2、增强可用性：将修改说明文字放在画布外，注意为元件、图层命名，行为要添加描述。
3、添加logo、公司名称等信息，最好把logo或产品图片融入游戏之中。
 
来看一下具体示例
 
1、数羊游戏    观看模板>>
超简单的催眠游戏，H5也能数羊了。用户只需不停的向左滑动屏幕，就能数一只羊。制作时需要做一些数羊小动画，再更改文本值即可～

 
2、连连看    观看模板>>
再熟悉不过的小游戏，特别适合嵌入产品宣传图片，所以商家百用不厌。这个模板在赢得游戏后，才能打开邀请函，创意不错。

 
 
3、划龙舟吃粽子游戏      观看模板>>
游戏形式很常见，坠落接物型。用龙舟来接粽子的创意，让节日氛围很浓。而且小动效也很不错。

 
4、消除类游戏：CP消消乐      观看模板>>
创意很不错，适合情人节、光棍节营销。泡泡中依然可以嵌入产品图片，适合商家推广活动。最后生成排行榜。

 
5、场景布置游戏：你儿时房间什么样子？     观看模板>>
最近超级火爆的H5形式，无代码即可制作。通过拖拽物体布置房间，最终生成图片分享到朋友圈。

 
制作游戏类模板，一般要有些逻辑基础，不需要写代码，但思路要清晰。
 
>>>查看模板制作规范>>>

答题测试类模板最容易刷爆朋友圈，答题后将测试结果生成图片，再分享朋友圈，是时下最热门的营销手段。
 
制作答题测试类模板要注意2点：
1、内容有趣：有意思的内容才会促进用户分享
2、形式特别：文字题、图片题、音频题、视频题可以结合起来
 
接下来介绍几种常见的形式
 
第一种，极简型      观看模板>>
输入姓名，随机出结果。只要文案有趣，就有人分享～

 
第二种，文字题     观看模板>>
简单的二选一答题，优点也是足够简单，动画很可爱，用户易修改。

 
第三种，图文结合型     观看模板>>
这个模板技术含量较高，根据答题计算分数，算出是哪个年代。
每个年代都有独特的风格装饰，并把用户照片调整到这个年代的风格，非常好玩。

 
 
第四种，音频题       观看模板>>
作品内容知识量很大，根据声音选择是哪首古诗，选择后可查看该诗图文解析。

 
 
第五种，生成图片型      观看模板>>
这是类似网易说明书的模板，根据用户答题结果，计算出该用户的软件版本和安装指南。
最终生成图片，可分享到朋友圈。是目前最为火爆的形式之一。

 
 
答题测试的模板类型还有很多，只要你脑洞够大，不用担心没创意～
 
好的模板一定要让用户能用，注意要符合模板制作规范哦
 
>>>查看模板制作规范>>>
 

图文并茂的展示新闻内容，图文排版形式多样，物体动画形式多变。
模板内容自由发挥，可以将网上的图文新闻套入。注意选题要通用一些，这样受众用户多。
 
选择图文展示新闻的小伙伴，要注意把媒体信息放进模板中哦！
通常首页会放媒体logo、“某某新闻新媒体中心出品”字样，结尾页会放媒体logo、二维码、制作人员信息等，如：
策划：XXX
记者：XXX
设计：XXX
制作：XXX

那么，新闻模板到底长什么样子？

下面来结合示例分析：

首先，看一个基本的图文展示新闻模板。  观看模板>>
每页的平面版式都差不多，但平面上添加了跟多装饰元素，做动画时就有了一定的发挥空间，设计师做了很多的出现动画，每页定格后都有循环的元件动画，选用的运动方式都很恰当，整体视觉效果非常好。

 
接下来这个模板，注重展示形式的设计。    观看模板>>
平面很下功夫，每页排版、内容形式都不同，使用了不少异形图片。

 
除了分页展示图文以外，还有很多动画和交互形式可以发挥我们的创意！下面看一个创新形式：            观看模板>>
用手指滑动来控制汽车行驶，每到达一个目的地，都可以点击道路两侧的热点来查看文字，是不是很赞？

 
最后分享一个特别的交互形式，利用陀螺仪操控画面：      观看模板>>
开头添加了操作提示界面，非常注重用户体验。用户左右转动手机，就能看到所有内容，点击按钮查看图文详情。
创新的形式总能让人印象深刻～

 
看到这里，是否对图文展示新闻类模板有了自己的认识呢？
其实，只要有策划、有创意就不愁好作品。
大家可以将预置动画、关键帧动画、路径动画、遮罩动画结合起来，可以实现非常多优秀的动画效果。
此外，交互设计也有很大发挥空间，木疙瘩有点击、滑动、摇一摇、擦一擦、陀螺仪等超级多的交互形式，就等你来解锁哦～
 
>>>查看模板制作规范>>>