搜索

论坛版块 MAKA教程 H5制作技巧

开讲啦第三期 | 如何把PPT转换成可以广泛传播的H5

跳转楼层 1 903
MAKA小助手
x0

发表于 2016-3-8 19:22:40 | 显示全部楼层 |阅读模式

2e4ed89718ad7485e5d81ad2840655bd_副本.jpg

>>每周我们会为大家请来H5行业和设计行业的大咖,为大家传道授业解惑……
>>课程主题包括但不限于H5行业经验趋势、那些超神的H5效果是如何做出来的、为什么我的模版竟然没通过审核、什么样的招聘模版卖得好等一系列帮助大家提升设计水平、把握H5动向、获得更高收益的课程分享。
>>上课方式:设计师QQ群、签约设计师微信群
>>上课时间:每周周四或周五




第三讲 | 如何把PPT转换成可以广泛传播的H5


▼目录
培训第三期 如何把PPT转换成可以广泛传播的H5——梁文蓓.png

● 认识H5,认识MAKA
● PPT模版与H5模版的异同
● 实操:把一个PPT变成H5


▼认识H5,认识MAKA
(可参考前两期课程,由于篇幅限制就不展开啦)
幻灯片13.png

其实,H5就是你经常在朋友圈看到的那种一页页呈现和交互(多为竖屏上翻)的页面交互形式。
我们应该都见过有很多制作精良的专业级H5,但也见过很多恨不得秒退的H5作品,后者一般多为非专业公司自己制作的……
掌握用在线编辑器制作H5的技能是非常有必要的!大到横行职场,小到做私人相册,发朋友圈也很有面子!
操作简单,效果炫酷!最关键的是,只要你会用PPT,就可以搞定简单的H5制作,足以应对日常工作生活的使用场景!


▼PPT模版与H5模版的异同
幻灯片14.png


▼相同点
幻灯片15.png

1. 都是服务于沟通的工具:可以承载文字、图片、动效、声音等表现形式,力求引人入胜。

2. “本地化”:解码器广泛存在于用户端。以PPT来说,之所以它能承载很多演示之外的功能,也是由于Office软件已经足够普及。

3. 排版四原则:对齐,亲近,重复,对比

4. 动静结合

5. 合理的配色



▼不同点
幻灯片16.png

1. 尺寸、排版不同:H5页面底部会有一个提醒用户上划的图标,构图时要尽量避开,以免遮挡。

2.页面着眼点不同: 一般是在手机屏幕的中上方,因此设计的时候需要注意元素的摆放位置

3. H5更利于传播:播放基于手机浏览器,不仅保证了用户播放,还可以顾及多平台的兼容,电脑、手机、Pad全部通吃

4.交互更丰富:H5中添加的表格可以用来收集信息、测试游戏可以根据用户的不同选择给出不同结果、更有最新的VR技术,让H5交互玩法多多。

5. 信息量不同:用户在浏览H5页面时,每页停留的时间很短,所以要严格控制页面中的信息量,文字不要太多。


▼实操:把一个PPT变成H5
幻灯片17.png


幻灯片18.png

幻灯片19.png
设置适当的页面大小的意义在于——可以更好的控制素材的输出,不会因为尺寸小而导致图片模糊,也不会因为尺寸过大而导致文件臃肿、加载过慢。

幻灯片20.png
1、页面底部(至少是首页底部)要保持简洁,让观众看清下方的操作提示。看似是一个约定俗成的划屏操作,但很多人却get不到。
2、页面元素的着眼点,要控制在屏幕中间偏上的位置,否则就要考虑引进动效,为观众提供视线焦点。


幻灯片21.png

将元素存为图片很简单,点击右键 - 另存为图片即可,需要注意下面几点:
1、H5编辑器没有丰富的字体样式,所以要把“文字”全部导出为PNG图片(以保证半透明效果);
2、有些图片可能需要拆成多个H5素材,可能需要用到裁剪功能,或者是借助“形状”对图片进行拆分
3、有些裁剪过的图片,导出后会被拉伸(推测是Office软件bug),保险起见可以把裁剪过的图片先粘贴为图片,再另存为图片。(有点绕,其实就是不要导出裁剪过的图片素材……)

幻灯片22.png
再为每张图片添加动作(就是动画效果),与PPT不同的是,H5编辑器里的动画没有单击、之后的选项,全靠“延迟”控制时间。
排布元素的操作,比起往PPT插入元素只是多了一个上传的过程,操作一次就会了解。
动效建议逐个尝试,了解每个动画的特性,才会有具体运用的想法。与PPT的动画效果相比,H5的动画有很多附加了弹性效果,比较细腻。


幻灯片23.png



幻灯片24.png


幻灯片25.png
H5在某种程度上可以承载PPT的功能,演示界也早已有了H5的江湖地位,特别是伴随方便简洁的H5编辑器的出现,全民创作H5也已变为可能。
相比PPT的复杂程度,模板化的H5制作真心太简单啦,却占据了最重要的手机端传播渠道!把PPT水平拿出来,做个拉轰的H5,一定会在MAKA的模版商城大卖的哟!




1条回复
天边一片霞
x0

发表于 2016-3-9 15:46:47 | 显示全部楼层
没有赶上,有录播可以听吗