刷屏朋友圈的那些H5,做起来居然这么简单

Hello,早上好。

又见面啦,我是水韬。


上次写了一篇关于PPT动画基础知识普及的推文,有的小伙伴反映轻动画确实是工作型汇报中需要学的的内容,表示期待更多。


能够挖掘更多简单却实用的小技能,帮助大家在日常工作学习生活中,我个人非常开心。

相信大家都在微信朋友圈里看到过一些宣传招新活动之类的链接,大家点进去会发现每一页内容都是动态的,文字素材图片的出现都有各自的动画,通过手指滑动切换页面。


那么这种看起来很高级,阅读起来很舒服的链接,是怎么做的呢?


其实很简单,今天就和大家分享一下这个小技能——简易微信H5页面。


【01】H5页面


其实,外界简单的称呼它为H5页面,其实H5这个词涉及的知识远超动态页面这一说法,这一说法是不严谨的。


但是为了推文阅读理解,下文所说的H5页面就是指简单的微信动态链接页面。


-----------


许多小伙伴平时看到的动态页面,可能是这些曾经在朋友圈刷屏的H5页面。

宝马M2系列
吴亦凡入伍H5

像以上两个复杂案例,其实都是专业的团队花费一定的周期,投入代码/文案/美工等等完成的,整个的制作难度与成本都比较大,常用于大型品牌的活动宣传推广,传播效果往往也非常爆炸。


但是,今天推文要介绍的是,满足一般个人或工作室简单宣传招新展示为目的H5,而这种简单传播动态H5页面往往是这样的。

动态故事讲述
展会宣传H5 @姓谢的叔叔


这种以微信传播为主要渠道的简单的动态宣传H5页面,通过图片素材等将文案具象化,赋予了一定的动态效果,结合了BGM效果,使原本干巴巴的纯文字内容,寓于了鲜活的生命力,吸引了更多的点击与传播。


那怎么做呢?不着急,马上开始今天的分享,关于H5页面构成与常见平台推荐。


【02】页面构成


若要学习,必先拆解。


我们先来简单拆解一下一般H5页面上的构成部分,我们可以将其分为以下几个部分:

文字内容/图片素材/动画特效/转场特效/交互工具。


1,文字内容 + 图片素材

文字和素材是搭建整个H5页面的门面。

①素材运用需要与主题内容相符合

②内容需要经过二次的整理,将重点语提取出来着重展示。

来自兔展已购模板

2,动画特效

和PPT动画相似,在H5里动画同样包括进入/强调/退出三个动态效果。

在一般的H5平台中,动画种类一般都非常丰富,只需要选择合适的动画,设置好动画时间,顺序,就可以使整个页面动起来。


进入动画:

强调动画:

退出动画:

以上展示来自兔展,后边会介绍更多的平台供大家选择。


转场特效:

默认的转场是页面向下推动,如果我们想要其他切换效果,也可以进行设设置,不同平台的设置位置不同。

此处以Equb360为例,展示部分切换效果。

“众创杯”创业大赛 · 宣传H5 @水韬

3,交互工具

指的是制作H5的人,通过H5与观看者互动的过程,基础的交互主要是信息留存作用,主要包括链接跳转,表单功能,二维码,投票留言,地图功能等。


在此基础上,也可以研究研究更高级的玩法,例如h5小游戏,Layer容器,一镜到底,重力感应,走马灯等等。

意派 Equb360部分交互组件 · 界面

【03】平台推荐


平台推荐,以个人使用的体验出发,从动画功能,操作界面,花样玩法等因素上,将他们分为入门级/中级。


Ps.高级的这里不介绍…因为俺没达到。


一,首先是初级的


初级网站可以满足大多数小伙伴对动画页面的操作,通过套用模板,简单添加素材,替换文本,设置动画,简单交互等,比较容易制作出活动宣传,职位招聘,年终回顾等动态页面。


MAKA--http://maka.im/home

MAKA是我最早接触的一个H5网站,忽略迷一样的名字。


优点:操作比较简便,模板数量多,套用模板的话上手很快,素材库里能使用的素材也可直接替换。


缺点:高级玩法比较少,动画库相对不够丰富。


易企秀--http://www.eqxiu.com/

和MAKA一样,是一个基础入门的网站,素材同样很多,也比较适合新手直接使用练习。


缺点:官网版面很乱,操作不够舒适


秀米--https://xiumi.us/#/

很多人对秀米的第一印象就是:推文排版。


其实在秀米里,同样可以制作一些好玩的动态H5页面。

但是相比起前两个网站版面的布局,秀米的设置比较独立,没有专门的动画设置板块,所有设置都在点击素材以后才会出现相应按钮。


二,其次是中级的


挑战中级的小伙伴其实是追求原创了,在比较熟悉设计,至少是掌握了一定的设计水平,熟悉动画组合,有一定审美的小伙伴后,可以通过这些平台创建一些原创的H5页面。


这个时候我介绍三个功能比较全面的H5制作平台。


兔展--http://www.rabbitpre.com/


兔展这个平台的功能比较齐全,动画样式也比MAKA,易企秀多,交互组件也足够满足一般宣传。


特点:支持导入PSD文件,只需要将设计好的素材添加动画即可。


意派∙Epub360--http://www.epub360.com/


意派∙Epub360,是我使用得比较多的H5平台。


特点:动画多,进阶玩法比较多,例如重力感应,Layer页面等,这些玩法需要有一定的是动画设计与其他技能支撑~ 可以做出很多不错的效果。

动态流程图

PP匠--http://www.ppj.io/

PP匠名字就带了两个P字,想必也是与PPT有关了。


没错,利用这个网站,我们可以直接在PPT中放置好素材,设置好动画,然后直接在PP匠这个网站上传PPT源文件即可。


以下是一周的好朋友@杜老师(为卡姐)做的简易潮州美食攻略。

P.s: 除了以上介绍的H5制作平台以外,还有包括iH5,人人秀,木疙瘩等很多平台可以了解以下。


【04】结语


关于简易的动态H5页面,今天介绍了基本的页面构成以及相关的制作平台,在试着操作几个平台之后,相信大家会找到一个适合自己的制作平台。


在本期推文的最后留了一个小技能点:通过PPT制作H5页面


具体如何通过PPT制作,除了网站安利意外还有一些细节需要注意,由于文章篇幅有限,在今天卖个关子,暂时不做介绍。


分享完毕,希望有助。

----

写在最后:

其实,H5的功能非常强大。

在很多人的印象中,H5也许只是一个图文展示工具,最多加一些特效。实则不然,H5也能做游戏做测试做非常炫酷的效果,而且非常简单。

比如,很久以前大梦老师做过的一个小测试,就是用H5做得:

使用工具:iH5

扫码二维码文直接进入

▼▼▼

而且还可以自动生成测试结果、分数,只需要设置一个计数器就可以了。之后有机会详细写教程。

这样的例子在iH5上还有很多,也有很多用H5制作的精良游戏,比小程序好玩多了。

记得做测试题哦!

#你的小哥哥忽然出现#
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,884评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,347评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,435评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,509评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,611评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,837评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,987评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,730评论 0 267
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,194评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,525评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,664评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,334评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,944评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,764评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,997评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,389评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,554评论 2 349

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,792评论 25 707
  • 你好乔安经典台词_戚薇乔安经典语录, 电视剧《你好乔安》从乔安的好友倪好的视角出发,讲述两个女孩离开校园步入社会后...
    Melody小仙女阅读 233评论 1 1
  • 经历过风和日丽高山美景摩登城市,有些地方经常让人忘。 但那废墟中隐藏的魅惑,日日在诉说 时尚和废墟的冲撞,交织成美...
    轻浅vv时光阅读 369评论 0 0
  • “师者,所以传道、授业、解惑也”,为期四天的岗前培训,让我对教师这个职业的内涵有了更深一层的了解,我想“作...
    春夏AI阅读 1,653评论 0 9