搜索

论坛版块 MAKA学院 超神案例

案例说明,PPT与H5在适配/动画/交互等方面的异同

Kaka 发表在 2016-2-26 14:50 显示全部楼层 复制链接
跳转楼层 1 645
Kaka
x0

发表于 2016-2-26 14:50:00 | 显示全部楼层 |阅读模式
行业标签:
场景标签:

昨天写了H5为什么会流行,为什么需要花一点时间学习,以及用PPT制作H5的简要流程。(如何用PPT思维,做一个手机H5?)
今天来就适配性、动画、交互等几个方面,聊聊H5制作与PPT制作侧重点的异同。
这里仍需强调的是,本文所指的H5,是在线编辑器级别的作品,多数承载的是宣传文案、产品介绍等功能,
而非专业公司的现象级H5产品。

640.webp (1).jpg




适配性的差异
  什么叫适配性?简单的说,你做了一个作品,别人能否正常浏览?能否兼容不同的场合和设备?

以PPT而言,通常分为两种情况——
1、保证能够在某个特定场合能够演示
2、让尽可能多的设备能够正常播放
这里涉及到页面横纵比、字体嵌入等内容,看似简单的话题其实有很多内容可以聊,以后会单独做一期说明。

而H5需要考虑的是——
1、要适配多元化的手机屏幕尺寸
如果底色不是纯白,需要让元素比画板尺寸略大。
制作完成后,用大屏幕手机(iPhone 6 Plus)测试一下,重点观察四周有没有露出白边。

640.webp (2).jpg


2、兼容更多低配置手机,力求播放流畅
我做过的第一个H5,页面中用到了太多元素,有些手机机能受限,播放时会卡顿,甚至丢掉了动画效果……
所以在做H5作品时,动画效果和元素的切分要一并考虑,这与PPT在创作思路上就存在不同。
类似下图这种,华丽的PPT动画,用H5在线编辑器去实现的话,会非常卡顿……

0 (1).gif






动画运用的异同

我一直在强调的是——PPT动画要恰如其分、不要喧宾夺主
也就是说要适当收敛技巧,与场景相符。
==========   关联阅读   ==========


这些也应该体现在H5的动画效果中,包括换页动画和元素动画。
640.webp (3).jpg
H5编辑器会提供很多换页动画,慎用……

H5的动画制作有一个与PPT不同的特点,很多动画是带有弹性效果的,制作动画时可以善加利用。
0 (3).gif

让带有弹性效果的动画时间延长
让花瓣有了飞舞的感觉

0 (4).gif

大段文字的呈现,本不该用强烈的动画
但为了凸显嘉宾名单,还是这样做了





交互方式的不同

PPT是否可以让用户自行触发互动呢?
答案是可以的,请仔细观察动图中的交互——

0 (5).gif

而H5的交互,仅就在线编辑器的层面而言,我建议是越简单越好,只保留上划交互即可,甚至不需要循环轮播(毕竟大多数观众不想再看一遍)我在公司仪式邀请函的H5中,尊重领导的意愿,加入了一页表单,但我本人对这个做法是拒绝的……
640.webp (4).jpg

用户对这种在线搜集信息的表单非常敏感,我相信大家都不会愿意填写。
最终,我们的邀请函后台收到了5位用户提交的表单,这个页面完全失去了存在的意义……






多媒体运用的异同

在我做的这个邀请函H5中,一个小小的情怀,体现在了音乐上。
配乐是《浏阳河》,这对于湖南有着特殊的意义,音乐配器也非常有古韵,与地方金融国企挂牌的主题非常吻合
640.webp (5).jpg

PPT对于音乐文件没有限制,但H5对音频文件的大小有限制,可能需要借助软件截取声音片段,或降低采样率,以提高页面加载速度
音频截取时长建议控制在40秒左右即可(也要根据内容多少区别对待),可能还要对音乐结尾做淡出处理,推荐一款我用的最顺手的音频软件——GoldenWave,强大、易用!



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

1条回复
李碗LOL
x0

发表于 2016-3-9 16:53:57 | 显示全部楼层
诶,突然发现从外面看标题显示不全