如何用PPT思维，做一个手机H5动效页面？_涛说PPT_传送门
如何用PPT思维，做一个手机H5动效页面？
什么是H5？H5指的是第5代HTML编码语言我们通常所说的H5，是指用H5语言制作的数字产品　　其实，H5就是你经常在朋友圈看到的那种一页页呈现和交互（多为竖屏上翻）的页面交互形式。　　我们应该都见过有很多制作精良的专业级H5，但也见过很多恨不得秒退的H5作品，后者一般多为非专业公司自己制作的……　　掌握用在线编辑器制作H5的技能是非常有必要的！大到横行职场，小到做私人相册，发朋友圈也很有面子！　　操作简单，效果炫酷！最关键的是，只要你会用PPT，就可以搞定简单的H5制作，足以应对日常工作生活的使用场景！如何用PPT辅以H5呈现？我们先要了解H5的特点　　我在这篇文章的标题中卖了个萌，虽说是“用PPT思维制作H5”，实际上我制作的H5页面屈指可数，在制作过程中，也是真心离不开PPT……　　PPT和H5有很多相似之处，显然，它们都是服务于沟通的工具，也都可以承载文字、图片、动效、声音等表现形式，力求引人入胜。　　两者还同时具备“本地化”的特征。“本地化”的意思是，解码器广泛存在于用户端。以PPT来说，之所以它能承载很多演示之外的功能，也是由于Office软件已经足够普及，所以我们做好的PPT可以发给大家查看。 　　而H5的发展迅猛，是因为它的播放基于手机浏览器，比PPT还要“轻量化”得多……不仅保证了用户播放，还可以顾及多平台的兼容，电脑、手机、Pad全部通吃，以这点来说，H5的传播比起PPT的要方便了不知多少个量级。▽　　所以，H5在某种程度上可以承载PPT的功能，演示界也早已有了H5的江湖地位，特别是伴随各种H5编辑器工具出现之后，全民创作H5也已变为可能。这是锐普陈魁在演示峰会上的一页PPT提到了H5在演示界越来越重要的地位　　面对不同的H5传播诉求，当然也要有不同的设计考量和侧重。我前几天接到一个H5制作任务——为公司挂牌仪式制作邀请函。▽Step 1. 确认设计风格，搜集素材　　公司是省属直管的大型金融国企，考虑到国企背景和鲜明的地方属性，我认为水墨中国风是首选。　　与PPT的制作流程相同，确定风格之后，要去搜集素材。我联系了执着于雕琢简历的H5高手——@有乐，他扔给我一个中国风的PPT，里面包含大量中国风元素。最终版的素材几乎都出自这个PPT▽　　除了图片素材，还要构思文字内容、确定文案。　　对于邀请函而言，最重要的信息是——　　1、公司品牌、事由；　　2、时间地点；　　3、主要议程；　　H5的加载时间与页面数量成正比，所以页面一定要少，如果是文字类的H5，我建议不要超过5页。　　此外，大部分人在划屏浏览H5页面的时候，每页的停留时间不会超过5秒，所以单页信息量要严格控制，这点与PPT制作一样！▽Step 2. 用PPT完成页面元素的布局　　PPT与H5的最直观区别，体现在页面尺寸上——PPT多为横屏，H5多为竖屏。　　在我们用PPT设计页面之前，先调整幻灯片页面设置，@有乐建议将页面设置为宽17厘米、高27厘米。　　设置适当的页面大小的意义在于——可以更好的控制素材的输出，不会因为尺寸小而导致图片模糊，也不会因为尺寸过大而导致文件臃肿、加载过慢。▽　　接下来的工作最需要设计感，也是与PPT制作最相似的——将页面中的元素有逻辑性、有美观度的进行组合。　　与PPT不同的是，H5的页面布局需要注意两点——　　1、页面底部（至少是首页底部）要保持简洁，让观众看清下方的操作提示。　　看似是一个约定俗成的划屏操作，但很多人却get不到……　　所以很多H5会用图标或者文字，单独在H5首页提示用户需要划屏浏览，这其实是很体贴、也是很有必要的做法。　　2、页面元素的着眼点，要控制在屏幕中间偏上的位置，否则就要考虑引进动效，为观众提供视线焦点。▽Step 3. 构思动画效果、保存图片素材　　为什么动画和素材要放在一个步骤里进行说明？正是因为对于H5而言，这两部分内容密不可分。　　由于不同手机的机能限制，很多炫酷的效果无法完成，必须让包含动画效果的元素尽可能的少。　　以上边这页为例，三部分文字建议存成三张图片、设置三个动效，要将存图和动画一起考虑，把页面中相同的动画元素，以整体进行考虑。▽　　将元素存为图片很简单，点击右键 - 另存为图片即可，需要注意下面几点——　　1、H5编辑器没有丰富的字体样式，所以要把“文字”全部导出为PNG图片（以保证半透明效果）；　　2、有些图片可能需要拆成多个H5素材，可能需要用到裁剪功能，或者是借助“形状”对图片进行拆分（拆分可以参考这篇文章——）　　3、有些裁剪过的图片，导出后会被拉伸（推测是Office软件bug），保险起见可以把裁剪过的图片先粘贴为图片，再另存为图片。（有点绕，其实就是不要导出裁剪过的图片素材……）▽Step 4. 前往在线编辑网站，制作H5　　目前有很多在线H5编辑工具，例如Maka、易企秀……操作方面基本一样，我用的是Maka，只因已经习惯……　　剩下的工作非常简单，把图片上传，排布好。　　再为每张图片添加动作（就是动画效果）就好，与PPT不同的是，H5编辑器里的动画没有单击、之后的选项，全靠“延迟”控制时间。　　排布元素的操作，比起往PPT插入元素只是多了一个上传的过程，操作一次就会了解。　　动效建议逐个尝试，了解每个动画的特性，才会有具体运用的想法。与PPT的动画效果相比，H5的动画有很多附加了弹性效果，比较细腻。　　把PPT水平拿出来，做个拉轰的H5，横行公司毫无压力！我认为H5制作是PPTer一定要掌握的技能！因为相比PPT的复杂程度，模板化的H5制作真心太简单，却占据了最重要的手机端传播渠道！　　明天谈谈H5的其他制作细节，包括动效、配乐、交互菜单等等……▽　　本次H5邀请函的制作，还要感谢有乐同学的大力帮助，他呕心沥血制作了一个H5参赛作品，从形式到文案雕琢了一个通宵，H5本身是关于Office和Office365的区别，点击阅读原文即可查看，推荐给大家！
觉得不错，分享给更多人看到
涛说PPT 微信二维码
分享这篇文章
1月24日 23:40
涛说PPT 最新文章小编：之前给大家分享过移动端的H5页面分析，有没有瞬间觉得H5的高大上之处呢？，一个H5页面设计品质的出众与否，会直接影响其传播效果，甚至影响到用户对品牌形象的认知。今天，就来学习一下由分享的那些过目不忘的H5页面。本文聚焦于基于微信传播的H5页面的视觉设计，通过一些案例分析来谈谈设计思路与方法。
从引爆朋友圈的H5小游戏《围住神经猫》，到颠覆传统广告的大众点评H5专题页《我们之间只有一个字》，从2014下半年起，各种H5游戏和专题页纷纷崭露头角。“H5”，这个由HTML5简化而来的词汇，借由微信这个移动社交平台，正在走进更多人的视野。本文聚焦于基于微信传播的H5页面的视觉设计，通过一些案例分析来谈谈设计思路与方法，希望与大家进行交流探讨。
功能与目标
首先从功能与设计目标来看， H5专题页主要有以下4大类型：
1.活动运营型
为活动推广运营而打造的H5页面是最常见的类型，形式多变，包括游戏、邀请函、贺卡、测试题等形式。与以往简单的静态广告图片传播不同，如今的H5活动运营页需要有更强的互动、更高质量、更具话题性的设计来促成用户分享传播。从进入微信H5页面到最后落地到品牌App内部，如何设计一套合适的引流路线也颇为重要。
大众点评为电影《狂怒》设计的推广页便深谙此道。复古拟物风格的视觉设计让人眼前一亮，富有质感的旧票根、忽闪的霓虹灯，配以幽默的动画与音效，恨不得每个选项都点一遍。围绕“选择”这个品牌关键词，用引人入胜的测试题让用户把人生当作大片来选择，选到最后一题引出“大众点评选座看电影”，一键直达App购票页面。即使明知是软文也忍不住带着“矮油不错，这个页面有点diao噢”的心情点击了分享。
2.品牌宣传型
不同于讲究时效性的活动运营页，品牌宣传型H5页面等同于一个品牌的微官网，更倾向于品牌形象塑造，向用户传达品牌的精神态度。在设计上需要运用符合品牌气质的视觉语言，让用户对品牌留下深刻印象。
伴随着浪漫的钢琴旋律，《首草先生的情书》以一位男士的口吻娓娓道来在成长历程中对妻子的爱与愧疚，最后引出“首草——滋阴圣品，爱妻首选”的宣传语。设计上采用回忆般的黑白色调，简单的照片加文字，配以花瓣掉落、水面涟漪等轻动画，渲染出唯美优雅的气氛。“首草”这个全新的高端养生草药品牌，用H5打出了一副走心的情感牌，让用户记住了“半生只为你”的爱妻品牌形象。
3.产品介绍型
聚焦于产品功能介绍，运用H5的互动技术优势尽情展示产品特性，吸引用户买买买。
这一类型的H5页面多见于汽车品牌，LEXUS NX是其中的优秀代表案例。精致和极富质感的建模、细腻的光效营造出酷炫的视觉风格。用手指跟随光的轨迹切割画面揭开序幕，通过合理优雅的触碰、摩擦、滑动等互动形式带领用户一同探索产品的7大特性，宏观和微观都照顾周全。
4.总结报告型
自从支付宝的十年账单引发热议后，各大企业的年终总结现也热衷于用H5技术实现，优秀的互动体验令原本乏味的总结报告有趣生动了起来。
《京东的十大任性》用10张横屏页面讲述了京东在2014年的十大成就，视觉设计上采用简洁的扁平风插画，加入纸面质感形成复古卡片拼贴感。不同页面间通过手指滑动实现流畅的视差滚动效果，最后还有刘总这个小彩蛋。一口气看完后大概就了解2014年京东都干了哪些大事。
二．形式为功能服务
在确定了专题页的功能目标之后，接下来就是关键的设计阶段了。如何有的放矢地进行设计，需要考虑到具体的应用场景和传播对象，从用户角度出发去思考什么样的页面是用户最想看的最会去分享的。以下列举几种常见的H5专题页表现形式：
1.简单图文
简单图文是早期最典型的H5专题页形式。“图”的形式千变万化，可以是照片、插画、GIF等。通过翻页等简单的交互操作，起到类似幻灯片的传播效果。考验的是高质量的内容本身和讲故事的能力。
滴滴打车这个案例就是典型的简单图文型H5专题页，用几张照片故事串起了整套页面。视觉简洁有力，采用整屏黑白照片，点缀以滴滴的品牌橙色。每切换一张图片，文字就渐隐浮现，没有其他互动形式，让观众聚焦于内容，通过陌生人之间的真情联系来塑造品牌的正能量形象。
也有不甘平淡的精彩案例。在除夕夜全国人民疯狂抢红包的时刻，微信推出了《从此看尽中国人的名与利》这样一个专题页。第一眼就被镇住了，好亲切的RMB~每个页面都是一张人民币风景局部放大图，创作者加入巧妙的创意元素与微动态进行细腻刻画，带观众走进了人民币的微观世界。每一张钞票图案配合发人深省的文案，在推广微信红包的同时呼吁人们重新审视人情与名利的奥义。
2.礼物/贺卡/邀请函
每个人都喜欢收到礼物的感觉，抓住这一心理，品牌推出了各种H5形式的礼物、贺卡、邀请函，通过提升用户好感度来潜移默化地达到品牌宣传的目的。既然是礼物，那创意和制作便是重要的加分项。
AKQA创意营销公司在圣诞之际献上了一份厚礼——梦幻水晶球。通过移动手机，镜头从水晶球外不断摇晃推近，渐渐走进水晶球的微观世界里。通过手机环顾四周，可以360度欣赏水晶球里的全景，摇一摇雪花便漫天飘洒。写下你的祝福并分享给朋友，相信一定会惊艳到对方。这个H5页面使用了重力感应、3D等技术，文字与BGM的使用也十分讲究，给用户带来了完美的互动体验，值得细细品味。
Evernote在过年期间也别出心裁地推出语音贺卡，通过公众号引导用户对其发送一条语音消息，然后把这条祝福语音结合中国风动画做成一张独一无二的语音贺卡发送给朋友。整体色调也是以Evernote品牌色为主，同时蕴含着一丝优雅的年味，十分讨巧。
3.问答/评分/测试
问答形式的H5页面也屡见不鲜了，利用用户的求知欲和探索欲，一路选选选，看最后到底是什么成绩。一条清晰的线索是必要的，最后到达的结果页也需要合理不突兀，如果能辅以出彩的视觉和文案，弱化答题的枯燥感那就再好不过了。
与本文开头一样也是大众点评的项目，这次是为姜文的电影《一步之遥》做持续推广，让用户为姜文的代表作评分。视觉设计依旧出彩，开脑洞的创意和动画设计令人叫绝（一定要扫一扫体验下！）。延续了怀旧大字报风格，字体、文案、装饰元素等细节处理也十分用心。问答形式的H5页面能做到这个份上也是蛮拼的。
从 “围住神经猫”、“看你有多色”等单纯小游戏再到杜蕾斯“一夜N次郎”（即山寨版“别踩白块儿”）等品牌植入式小游戏，H5游戏因为操作简单、竞技性强，一度风靡朋友圈，但创意缺乏和同质化现象导致用户对无脑小游戏逐渐产生了厌倦。品牌要在游戏上做到成功传播，需要在玩法和设计上多下点功夫。
Same在圣诞节推出了一款名为《圣诞老人拯救计划》的H5小游戏，操作非常简单，只需用手指交替上滑，把角色的脖子向上拉到无限长，游戏会记录你拉的最高距离，跟朋友比一比谁比较长。界面清新可爱，与Same的招牌画风一致，游戏角色也是Same的品牌角色，通过幽默恶搞的游戏向用户传达Same独到有趣的产品文化。
三．为设计加分的4个要点
一个H5页面设计品质的出众与否，会直接影响其传播效果，甚至影响到用户对品牌形象的认知。在这里总结出以下的设计要点：
1.细节与统一
要成就高品质的用户体验，必须考虑到细节与整体的统一性。复古拟物的视觉风格，那字体就不能过于现代；幽默调侃的调调，那文案措辞就不能过于严肃；打情感内容牌的，动效就不能过于花哨。
大众点评姜文电影推广系列的《九步之遥》H5专题页便牢牢抓住了这一点。从二维码入口到性感的loading页，再到最后分享提示的设计，包括文案措辞和背景音效，无不与整体的戏虐风保持一致，给到用户一个完整统一的互动体验。
尤其关注“分享提示”这个细节设计，比起一个简单的箭头和一句冷冰冰的“点这里分享”，用心的细节设计带来的高品质和好感度是显而易见的。再贴几个精彩案例：
2.紧跟热点，利用话题效应
想要你的H5专题页一夜爆红，第一时间抓住热点并火速上线，借机进行品牌宣传也不失为一条捷径。
天天P图抓住武则天热播的契机推出了风靡海内外的媚娘妆，同时《全民COS武媚娘》的H5互动页也第一时间上线，操作简单易上手，一键上传照片就能立刻完成媚娘妆，与万千媚娘们进行PK，娱乐了大众又推广了产品。
网易娱乐在武媚娘剪胸风波的风口浪尖上推出了名为《神还原武媚娘被剪胸真相》的H5专题页，放下节操用极富想象力的粗旷草图风向广大观众“还原”了真相。一时间被疯狂转发，网易娱乐也算是顺势自我宣传了一把。
3.讲个好故事，引发情感共鸣
不论H5的形式如何多变，有价值的内容始终是第一位的。在有限的篇幅里，学会讲故事，引发用户的情感共鸣，将对内容的传播形成极大的推动。
LEVI’S新年优惠活动专题页以第一人称的口吻，用小时候简朴却热闹的新年与长大后富足却乏味的新年做对比，用手绘风渲染出亲切的怀旧氛围。最后引出“这个新年，把压力和束缚打包扔掉，用新鲜的眼光感受生活，一起活出趣”的品牌推广slogan，代入感极强的故事无疑是驱动分享的源动力。
4.合理运用技术，打造流畅的互动体验
随着技术的发展，如今的HTML5拥有众多出彩的特性，让我们能轻松实现绘图、擦除、摇一摇、重力感应、擦除、3D视图等互动效果。（有兴趣的话可以点击这个网站http://fff.cmiscm.com/几乎有所有H5动态效果的展示）。相较于塞入各种不同种类的动效导致页面混乱臃肿，我们更提倡的是合理运用技术，用心专注于为用户提供流畅的互动体验。
典型的案例是淘宝在双12推出的预售推广H5专题页。在浏览过程中我只使用了一种向上滑动的手势，而页面呈现出来的效果却犹如一个流畅的动态GIF。设计师巧妙利用图形设计与组合，在滑动过程中营造出一种丰富的视差滚动效果，单个图形元素的遮罩、旋转与整体页面的动势配合极为默契。
随着手机硬件的升级、HTML5技术的发展以及微信平台的开放，HTML5的跨平台、低成本、快迭代等优势被进一步凸显，这对身处于移动互联网大潮的企业主、品牌、设计师和开发者来说，都将是一个最好的时代。未来必将涌现更多优秀的H5页面，让我们拭目以待。
原文地址：
原作者：鱼小干
转载请注明： &
学UI就上学UI网！越努力，越幸运！
“学UI网 ”最值得关注的UI学习平台！ 每天发布高质量的设计教程和分享设计经验，服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课（），给大家提供更多免费学习的机会。想成为设计师的你快来关注吧！
【特色推荐】
” 海量APP截图，让你灵感爆发！国内最好的APP截图站。
“” 每一个作业题都尽量配有教程，交作业就有大神免费帮你点评作业，爽歪歪！
“” 专为UI设计学习者打造的资源＋学习，双用途的网址导航站。亲爱的，你收藏了吗？
你可能喜欢的：168被浏览22,904分享邀请回答0添加评论分享收藏感谢收起如何将ppt做成h5_百度知道
如何将ppt做成h5
我有更好的答案
上下浮动12.2cm，左右浮动7.2cm当H5设计在PPT中制作完成后，导入PP匠（&PP匠&）客户端可以生成，各有特点;）或者炫课（ 中国第一款HTML5微课工具，课程制作&nbsp给你介绍一个超赞的操作方法：用PPT制作H5时，尽量将PPT的尺寸设置为竖版16cm*26cm（相当于建立一个640*1040的页面），并设置参考线
人的一只手
将ppt上传到91速课网一键生成H5课件就OK了。
2条折叠回答
为您推荐：
其他类似问题
您可能关注的内容
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。【图文】H5页面微场景制作入门教程_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
H5页面微场景制作入门教程
登录百度文库，专享文档复制特权，财富值每天免费拿！
你可能喜欢