搜索

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

如何用PPT思维,做一个手机H5?

跳转楼层 0 777
Kaka
x0

发表于 2016-2-25 20:08:48 | 显示全部楼层 |阅读模式
| 什么是H5?
H5指的是第5代HTML编码语言
我们通常所说的H5,是指用H5语言制作的数字产品

640.webp (1).jpg

其实,H5就是你经常在朋友圈看到的那种一页页呈现和交互(多为竖屏上翻)的页面交互形式。
我们应该都见过有很多制作精良的专业级H5,但也见过很多恨不得秒退的H5作品,后者一般多为非专业公司自己制作的……

掌握用在线编辑器制作H5的技能是非常有必要的!大到横行职场,小到做私人相册,发朋友圈也很有面子!
操作简单,效果炫酷!最关键的是,只要你会用PPT,就可以搞定简单的H5制作,足以应对日常工作生活的使用场景!





如何用PPT辅以H5呈现?
我们先要了解H5的特点

PPT和H5有很多相似之处,显然,它们都是服务于沟通的工具,也都可以承载文字、图片、动效、声音等表现形式,力求引人入胜。
两者还同时具备“本地化”的特征。
“本地化”的意思是,解码器广泛存在于用户端。以PPT来说,之所以它能承载很多演示之外的功能,也是由于Office软件已经足够普及,所以我们做好的PPT可以发给大家查看。而H5的发展迅猛,是因为它的播放基于手机浏览器,比PPT还要“轻量化”得多……不仅保证了用户播放,还可以顾及多平台的兼容,电脑、手机、Pad全部通吃,以这点来说

H5的传播比起PPT的要方便了不知多少个量级


所以,H5在某种程度上可以承载PPT的功能,演示界也早已有了H5的江湖地位,
特别是伴随各种H5编辑器工具出现之后,全民创作H5也已变为可能。
640.webp (2).jpg
这是锐普陈魁在演示峰会上的一页PPT
提到了H5在演示界越来越重要的地位





面对不同的H5传播诉求,当然也要有不同的设计考量和侧重。
我前几天接到一个H5制作任务——为公司挂牌仪式制作邀请函。


Step 1. 确认设计风格,搜集素材

公司是省属直管的大型金融国企,考虑到国企背景和鲜明的地方属性,我认为水墨中国风是首选。
与PPT的制作流程相同,确定风格之后,要去搜集素材。我联系了执着于雕琢简历的H5高手——@有乐,他扔给我一个中国风的PPT,里面包含大量中国风元素。

640.webp (3).jpg
最终版的素材几乎都出自这个PPT

除了图片素材,还要构思文字内容、确定文案。
对于邀请函而言,最重要的信息是——
1、公司品牌、事由;
2、时间地点;
3、主要议程;

H5的加载时间与页面数量成正比,所以页面一定要少,如果是文字类的H5,我建议不要超过5页
此外,大部分人在划屏浏览H5页面的时候,每页的停留时间不会超过5秒,所以单页信息量要严格控制,这点与PPT制作一样!




Step 2. 用PPT完成页面元素的布局

PPT与H5的最直观区别,体现在页面尺寸上——PPT多为横屏,H5多为竖屏。
在我们用PPT设计页面之前,先调整幻灯片页面设置,@有乐建议将页面设置为宽17厘米、高27厘米

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


接下来的工作最需要设计感,也是与PPT制作最相似的——将页面中的元素有逻辑性、有美观度的进行组合。

640.webp (5).jpg

与PPT不同的是,H5的页面布局需要注意两点——
1、页面底部(至少是首页底部)要保持简洁,让观众看清下方的操作提示。

640.webp (6).jpg
看似是一个约定俗成的划屏操作,但很多人却get不到……
所以很多H5会用图标或者文字,单独在H5首页提示用户需要划屏浏览,这其实是很体贴、也是很有必要的做法

2、页面元素的着眼点,要控制在屏幕中间偏上的位置,否则就要考虑引进动效,为观众提供视线焦点。




Step 3. 构思动画效果、保存图片素材
为什么动画和素材要放在一个步骤里进行说明?正是因为对于H5而言,这两部分内容密不可分。
由于不同手机的机能限制,很多炫酷的效果无法完成,必须让包含动画效果的元素尽可能的少。

640.webp (7).jpg

以上边这页为例,三部分文字建议存成三张图片、设置三个动效,要将存图和动画一起考虑,把页面中相同的动画元素,以整体进行考虑。


将元素存为图片很简单,点击右键 - 另存为图片即可,需要注意下面几点——
1、H5编辑器没有丰富的字体样式,所以要把“文字”全部导出为PNG图片(以保证半透明效果)
2、有些图片可能需要拆成多个H5素材,可能需要用到裁剪功能,或者是借助“形状”对图片进行拆分(拆分可以参考这篇文章——那些有趣传神的字体是怎样炼成的?
640.webp (8).jpg

3、有些裁剪过的图片,导出后会被拉伸(推测是Office软件bug),保险起见可以把裁剪过的图片先粘贴为图片,再另存为图片。(有点绕,其实就是不要导出裁剪过的图片素材……)




Step 4. 前往在线编辑网站,制作H5


剩下的工作非常简单,把图片上传,排布好。
再为每张图片添加动作(就是动画效果)就好,与PPT不同的是,H5编辑器里的动画没有单击、之后的选项,全靠“延迟”控制时间。

640.webp (9).jpg

排布元素的操作,比起往PPT插入元素只是多了一个上传的过程,操作一次就会了解。
动效建议逐个尝试,了解每个动画的特性,才会有具体运用的想法。与PPT的动画效果相比,H5的动画有很多附加了弹性效果,比较细腻。





  把PPT水平拿出来,做个拉轰的H5,横行公司毫无压力!
我认为H5制作是PPTer一定要掌握的技能!
因为相比PPT的复杂程度,模板化的H5制作真心太简单,却占据了最重要的手机端传播渠道!



本文授权转载自 刘哲涛 公众号:涛说PPT
PPT_Tao.jpg