用案例说明，PPT与H5在适配／动画／交互等方面的异同手机屏幕尺寸对照表「用案例说明，PPT与H5在适配／动画／交互等方面的异同」

　　昨天的推文中，提到了H5为什么会流行，为什么需要花一点时间学习，以及用PPT制作H5的简要流程。（如何用PPT思维，做一个手机H5动效页面？）

　　今天来就适配性、动画、交互等几个方面，聊聊H5制作与PPT制作侧重点的异同。

　　这里仍需强调的是，本文所指的H5，是在线编辑器级别的作品，多数承载的是宣传文案、产品介绍等功能，而非专业公司的现象级H5产品。

　　主要还是借助我上周制作的邀请函H5进行说明，希望能对各位有所启发。

如果你不知道这个邀请函长啥样，请识别二维码

适配性的差异

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

　　以PPT而言，通常分为两种情况——

　　1、保证能够在某个特定场合能够演示

　　2、让尽可能多的设备能够正常播放

　　这里涉及到页面横纵比、字体嵌入等内容，看似简单的话题其实有很多内容可以聊，以后会单独做一期说明。

◇

　　而H5需要考虑的是——

　　1、要适配多元化的手机屏幕尺寸

　　如果底色不是纯白，需要让元素比画板尺寸略大。

　　制作完成后，用大屏幕手机（iPhone 6 Plus）测试一下，重点观察四周有没有露出白边。

▽

　　2、兼容更多低配置手机，力求播放流畅

　　我做过的第一个H5，页面中用到了太多元素，有些手机机能受限，播放时会卡顿，甚至丢掉了动画效果……

回复10可以查看，引以为戒吧……

　　所以在做H5作品时，动画效果和元素的切分要一并考虑，这与PPT在创作思路上就存在不同。

▽

　　类似下图这种，华丽的PPT动画，用H5在线编辑器去实现的话，会非常卡顿……

回复年会获取这两页PPT，可能你这几天就用得上

动画运用的异同

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

▽

　　这些也应该体现在H5的动画效果中，包括换页动画和元素动画。

H5编辑器会提供很多换页动画，慎用……

▽

　　H5的动画制作有一个与PPT不同的特点，很多动画是带有弹性效果的，制作动画时可以善加利用。

让带有弹性效果的动画时间延长

让花瓣有了飞舞的感觉

大段文字的呈现，本不该用强烈的动画

但为了凸显嘉宾名单，还是这样做了

交互方式的不同

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

这页PPT，回复图片可以获取

　　这个交互动画的使用场景是，作为内训课程的预告，发到了学员们邮箱。时值2012年底，所以是世界末日的老梗……

　　用到了动画中的“触发器”功能，有兴趣的同学请对照PPT源文件自行尝试，其实就是为动画添加了触发条件，真心比你想象中的要简单很多。

▽

　　而H5的交互，仅就在线编辑器的层面而言，我建议是越简单越好，只保留上划交互即可，甚至不需要循环轮播（毕竟大多数观众不想再看一遍）。

　　我在公司仪式邀请函的H5中，尊重领导的意愿，加入了一页表单，但我本人对这个做法是拒绝的……

　　用户对这种在线搜集信息的表单非常敏感，我相信大家都不会愿意填写。

　　最终，我们的邀请函后台收到了5位用户提交的表单，这个页面完全失去了存在的意义……

多媒体运用的异同

　　在我做的这个邀请函H5中，一个小小的情怀，体现在了音乐上。

　　配乐是《浏阳河》，这对于湖南有着特殊的意义，音乐配器也非常有古韵，与地方金融国企挂牌的主题非常吻合！

　　PPT对于音乐文件没有限制，但H5对音频文件的大小有限制，可能需要借助软件截取声音片段，或降低采样率，以提高页面加载速度。

版权声明：本网信息来自于互联网，目的在于传递更多信息，并不代表本网赞同其观点。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，并请自行核实相关内容。本站不承担此类作品侵权行为的直接责任及连带责任。如若本网有任何内容侵犯您的权益，请及时联系我们，本站将会在24小时内处理完毕，E-mail：xinmeigg88@163.com