header_v0.7.32

Epub360平台三十支免费优质H5模板,拿走不谢

190天前发布

原创文章 / UI / 资讯
意派 原创,如需商业用途或转载请与意派联系,谢谢配合。

选用的大多是比较有共性的基本款,比较适合H5初中级者学习,除了制作方面,更期待在思路上给大家带来一些启发!

03b658ca51bfa801219c77bad231.jpg


截止3月10日,Epub360官网“作品版块”免费精选模板有160+,小派对这些模板就“常见应用场景”和“Epub360特色功能”两个角度试着进行了分类整理和精简,最后共三十支。


H5不在炫技,选用的大多是比较有共性的基本款,比较适合H5初中级者学习,除了制作方面,更期待在思路上给大家带来一些启发!


注:点击作品名称(超链接),即可感受相关模板或内容。复制模板请前往桌面端浏览器打开相关作品链接,比如http://epub360.com/manage/book/41wttg/present/,或者前往Epub360作品版块桌面端检索,点击“拷贝”按钮即可免费复制。


一、常见应用场景(16支)


1.产品展示(5支)


简约动画加些趣味交互应该是产品展示H5常用招数,下面分享一些大图缓动、幻灯片、360度等优质模板。


时尚类产品展示模板(联动,视差滚动)

zara 2015女装春夏新款发布(大图缓动)

波尔餐厅(拖动触发,幻灯片组合)

ORANGINA(渐现放大,组合动画)

百达翡丽Aquanant系列(360度,擦一擦)


2.H5邀请函(1支)


H5邀请函一般包含行程图、地图和表单。


科技感的行程图比较流行用SVG路径动画,卡通类型的可以试试曲线运动+直线运动组合。SVG路径动画后面有一个专门模板案例,下面分享的是一支曲线运动+直线运动组合的模板。


双11模板


至于地图和表单,这两个是偏功能型的,可以直接使用Epub360组件。当然,如果想体验好点,颜值高点,里面有一些小窍门的,比如若完成“微信公众号信息设置”,地图组件的导航功能会自动调用微信导航,功能更为丰富;表单可以设计个样式背景,背景输入框上可再覆盖上Epub360输入框组件,这样表单的颜值也许会高一些。


3.H5贺卡(3支)


贺卡大家见的比较多,我就不细说了,大家直接感受下面的模板吧!


感恩节海报(手写,图片合成)

趣味照相馆(趣味贴纸,图片合成)

你有一份新年快递,请签收(年味,自定义祝福语)


值得一提的是,除了视频H5,图片合成也是让H5变轻的良好形式,图片合成也常用在自动生成个人代言式的邀请函卡片上。


4.微杂志


有些设计师喜欢把以前平板电脑上流行的互动杂志风格移植到手机H5里,我感觉并不是很合适,杂志图文内容比较多,H5比较适合用来单点营销的,适合轻量化内容,用响应式网站来承载也许更佳。


当然如果是那种美文心情类的就另当别论了,美文心情类的微杂志感觉没有太多套路,主要是图文和配一些音乐和动画,Epub360平台U课堂(原名:mr.u)的《料儿》系列微杂志是很好的学习范例。


菜单应该算微杂志的标配,关于菜单模板,见后面的官网类目。


5.H5简历


优秀的H5简历一般是创意很赞,比如Epub360平台访量问过万的《李志的简历》、《唐仲龙:流浪设计狮》、《王高高:新媒体人的简历长什么样》。对于H5简历,小派感觉也没有什么套路,所以这块暂时不分享模板了。


6.招聘H5(1支)


招聘H5里面一般包含招聘职位和职位要求等,下面分享一支基本款。


招聘模板


7.微官网(1支)


对于微官网,我的观点和微杂志有些类似,觉得不适合用H5来搭建内容较多的微官网,微官网模块内容不能被搜索引擎抓取,我觉得这也是其很致命的缺点。


菜单应该算微官网的标配,下面分享一支汉堡菜单模板。


远酒店


8.数据可视化(1支)


在数据可视化设计里,动效除了吸引眼球,也能表现增长、位移等实际变化。下面分享一支模板,里面总结了五种数据可视化常用动效。


数据可视化常用动效


9.小游戏(2支)


小游戏如果和品牌结合的好,我觉得是很好的营销类型,比如游戏互动类型的知识介绍,下面分享两支小游戏入门模板。


抢馒头(碰撞,计时器)

拆拆拆(逻辑判断,考眼力)


在制作方面,H5小游戏相对传统的动画交互类H5主要是增加了逻辑判断,设计师们可能会产生畏难情绪,其实大家前期策划时理清状态和逻辑关系,会使用我们Epub360封装好的逻辑组件,制作H5小游戏也不是很难的。我们Epub360前段时间推出了“应用市场”,也是想进一步帮大家摆脱数据逻辑。关于应用市场详情,见后面相应介绍。


10.测试类(2支)


测试是H5里比较火的类型,不过风险(被微信封禁)很大,大家在策划和传播时,多加小心,下面分享两支常见类型模板。


H5研究院测试题(判断测试)

你是我的知己吗(出题测试)


二、特色功能(14支)


下面从Epub360特色功能角度分享十三支模板,很好的H5制作进阶资源喔!建议大家先复制学习,然后不看原作设置和教程,自己试着临摹出来。


1.动画控制(4支)


SVG描绘动画:Epub360-SVG描绘动画全国首发

序列帧动画:我们之间就一个字

轨迹动画:嗨,我是Epub360

状态组:Epub360状态组功能演示


2.交互设计(7支)


拖拽交互,关联控制:Epub360交互小课堂

交互序列帧:在这里,跨年很温暖

陀螺仪、3D:Epub360陀螺仪功能演示

位置触发(锚点)动画:H5研究院大事记

长按触发视频:听,西安(安卓暂不支持)

视频嵌入:穿越故宫来看你

交互表单+统计列表:你是谁


3.Epub360应用市场(3支)


『Epub360应用市场』是一个基于H5应用的交易平台,而应用是由一个或多个数据应用型H5封装而成。在『Epub360应用市场』里购买应用后,只需在应用配置里简单的改改数字换换logo就行。


下面分享三支需求比较大的H5应用。


抽奖:幸运大转盘

上传照片+排行榜:随时拍PK

画板+排行榜:你画我猜


注:复制应用请前往Epub360应用市场。


上面小派整理的三十支模板,派友们还喜欢吧?这个模板集后面还会不断完善,期待大家的宝贵建议!


Epub360平台模板由我们Epub360官方和热心派友制作,特别感谢其中的U课堂、Never、晗萧TEL、absocial、seebug等派友。


由于篇幅有限,Epub360官网作品版块还有许多免费优质模板,欢迎大家前往探索!

4
    意见反馈
    没有新消息
    密码登录
    短信登录
    微信二维码登录

    提示文案

    提示文案

    提示失败
    提示成功