2018年升级版攻略 | 零基础,如何入门学习H5设计

「意派科技」公众号整合了近三年的 H5 干货文章,涵盖了如教程技巧、行业资讯、设计干货等各方面的 H5 资料。

去年 4 月,「意派科技」公众号整合了近三年的 H5 干货文章,推出了广受好评的《100篇干货文章,带你全方位提升H5技能》,涵盖了如教程技巧、行业资讯、设计干货等各方面的 H5 资料。

 

一年时间过去,恰逢公开课活动的节点,许多新入门的派友对设计制作 H5 作品跃跃欲试,这时候,一套完整的 H5 手册,对全面、系统的学习 H5 设计是非常必要的。因此,我们在去年 100 篇的基础上,又新增了 52 篇文章,同时对栏目分类进行合理细分,总共 152 篇干货文章,分享给一直以来支持意派 Epub360 的小伙伴们。

 

 意派 Epub360 

 

不同于市面上的其他模板类工具,意派 Epub360 是国内第一款专业 H5 设计工具,在经过一年的迭代更新,特别是在动画交互、数据收集、特色效果的使用上,产生多支刷屏朋友圈的爆款 H5。

 

001.《1分钟了解意派Epub360意派》

002.《意派Epub360获TopDigitial银奖》

003.《意派Epub360产品设计背后的逻辑》

 

 H5 入门教程 

 

针对刚入门意派 Epub360 的派友,首先就是了解 H5 的制作流程。

 

004.《精心准备素材,H5制作第一步》

005.《页面组织管理,合理搭建H5》

006.《基础组件,这个是必须要掌握的》

007.《表单组件,这样才能收集用户数据》

008.《动画与动效,让H5会说话》

009.《触发器,与用户互动起来》

010.《高级组件,用好就能与众不同》

011.《微信组件,打造社交互动类H5》

012.《数据应用,抽奖/助力/社交游戏都能玩》

013.《逻辑组件,H5也能搞逻辑》

014.《发布推广作品,让更多人看到》

015.《查看访问统计,做到心中有数》

 

接下来,根据实际的 H5 案例操作学习入门视频教程

 

 H5 刷屏技巧 

 

从以下三个方面,分析总结 H5 刷爆朋友圈的方法技巧。

 

1、特色效果

 

① 一镜到底 *

 

016.《三步打造酷炫的一镜到底效果》

017.《回望过去 探索未来》(案例模版)

 

② 全景容器 *

 

018.《轻松完成3D全景H5》

019.《2017意派H5嘉年华 》(案例模版)

 

③ 走马灯 *

 

020.《酷炫走马灯效果抢先体验》

021.《给你一份旋转的中秋祝福》(案例模版)

 

④ 画中画 *

 

022.《网易画中画功能,你不想试试?》

023.《瞳孔里的世界》(案例模版)

 

⑤ 人脸识别 *

 

024.《个性趣味交互,人脸识别黑科技》

025.《你的颜值能打多少分》(案例模版)

 

⑥ 序列帧

 

026.《3个案例告诉你序列帧怎么玩》

027.《序列帧的玩法技能大全》(内附视频)

 

⑦ SVG

 

028.《3个酷炫作品实例让你知道什么是SVG》

029.《意派大神带你轻松玩转SVG路径动画》(内附视频)

030.《从SVG到逐帧动画,分分钟学会H5高级动画》(内附视频)

 

⑧  长页面 / layer

 

031.《4个H5长页面的制作要点》

032.《更自由的强制横屏玩法》*

033.《触发长页面滚动,指哪到哪儿》

034.《巧用layer制作虚拟全景H5》

 

⑨ 截屏组件

 

035.《用截屏轻松合成H5内容保存成图片》

036.《get三种图文合成H5的典型应用场景》

 

⑩ 陀螺仪

 

037.《陀螺仪让你的手机“飞”一会》

 

⑪ 状态组

 

038.《神奇的补间动画效果》

039.《状态组的常见应用场景》

 

⑫ 数据应用

 

040.《数据应用到底是什么》(内附视频)

041.《5个案例告诉你数据应用能做什么》

042.《数据应用太难不会用怎么办》

 

2、创意方法

 

044.《2017年最全H5刷屏技巧合集》

045.《10类易刷爆朋友圈的H5主题》

046.《4个提升H5逼格的设计细节》

047.《5种视频H5的刷屏案例技巧》

048.《3个套路玩转酷炫3D效果》

049.《测试题H5多种套路分享》

050.《4个提升H5转发量的小技巧》

051.《7种H5页面设计风格》

052.《H5文字常用动效》

053.《如何快速搞定微信群聊H5》

054.《如何理解H5的尺寸适配》

055.《如何解决H5卡顿闪退问题》

056.《如何选择H5背景音乐》

057.《如何给你的H5人声配音》

058.《创作H5时如何寻找灵感》 

059.《横屏 H5 vs 竖屏 H5》(内附案例)

060.《数据可视化常见动效》(内附视频)

 

3、实战经验

 

061.《如何制作横屏H5》

062.《如何制作答题类H5》(内附视频)

063.《如何制作360全景H5》(内附视频)

064.《如何制作趣味H5拼图》(内附视频)

065.《如何制作H5贺卡》(内附视频)

066.《如何在H5中涂鸦》(内附视频)

067.《如何制作碰撞、拖拽等高级交互效果》(内附视频)

068.《如何以正确姿势解锁微信H5分享》(一)

069.《如何以正确姿势解锁微信H5分享》(二)

 

 H5 经典案例 

 

1、意派精选 H5 案例

 

070.《意派Epub360十佳H5案例》

071.《2017年意派Epub360 优秀H5案例》

072.《2016年年度H5榜单》

073.《2015年年度H5榜单》

 

2、爆款 H5 案例解析

 

074.《百万PV的央广朋友圈H5是怎样炼成的》

075.《Prezi要你好看——快闪H5制作攻略》

076.《不福不行——H5贺卡四大特效解析》

077.《一支被施了魔法的哈利波特H5》

078.《视频H5制作中常见的4个坑》

 

3、常见 H5 案例

 

079.《微官网H5》(一)

080.《微官网H5》(二)

081.《企业邀请函H5》

082.《婚礼请柬H5》

083.《个人简历H5》

084.《企业招聘H5》

085.《游戏类H5》

086.《数据报告H5》

 

4、节日 H5 案例

 

087.《春节H5》

088.《中秋节H5》

089.《母亲节H5》

090.《六一节H5》

091.《感恩节H5》

092.《圣诞节H5》

093.《情人节H5》

094.《两会H5》

095.《十九大H5》

 

5、其他 H5 案例

 

096.《时尚H5》

097.《两会H5》

098.《文艺H5》

099.《七夕H5》

100.《恐怖H5》

101.《公益H5》(得奖作品)

102.《嘻哈H5》

103.《腾讯H5》

104.《职场H5》

105.《App H5》

 

 H5 模版案例 

 

意派模版专区全面上线了,更多模版请戳H5模版

106.《意派H5模版专区上线》

107.《2017年,最畅销的10个H5模版

108.《20个付费模板重磅来袭》

109.《双十一H5模版》

110.《中秋H5模版》

111.《圣诞H5模版》

112.《招聘H5模版》

 

 H5 行业资讯 

 

1、 H5 行业观察

 

113.《2018年刷屏H5案例盘点》

114.《2018年,H5还有的玩么?》

115.《2018年,H5该如何发展?》(深度)

116.《2016,H5的春天到了吗》

117.《HTML的影响力,将超出你我的想象》

118.《移动优先还不够,现在应该是H5优先》

120.《2016年,H5+、H5App也许是趋势》

121.《红利期已过,H5创意团队如何过活》

122.《除了H5,设计师还应关注哪些动态》

123.《交互式视频H5的4种刷屏形式》

124.《不懂用户如何做出爆红朋友圈的旅行青蛙》

125.《跳一跳H5游戏是如何刷屏的》

126.《网上下载的字体,怎么就侵权了呢?》

127.《这么些无聊的H5,谁要看啊!》

 

2、H5 职业方向

 

128.《浅谈平面设计师的转型之路》

129.《H5时代,平面设计师该有哪些转变》(上)

130.《H5时代,平面设计师该有哪些转变》(下)

131.《新媒体时代,如何让HR主动“勾搭”你》

132.《只凭一个H5简历,就被公司抢着要了?》

133.《如何给你的H5项目进行合理报价》

134.《如何从平面快速上手H5交互》

135.《H5设计三境界》

 

3、H5 行业专访

 

136.《dodo设计创意总监:李志》

137.《三人游创意总监:magic》

138.《JZ多媒体创始人:计育韬》

139.《知名摄影师张千里&左手夫妇》

140.《美晨互动设计师:吴静文》

141.《品牌设计师:邦小欠》

142.《品牌设计师:晗萧》

 

 H5 设计资源 

 

143.《H5素材资源哪里找》

144.《18个超实用素材网站》

145.《H5动画与交互合集》

146.《5种数据可视化方法》

147.《10款专业运营工具推荐》

148.《设计师必备的10大设计利器》

149.《设计师都知道的6个设计工具》

150.《4款专业开发小程序工具推荐》

151.《10本入门设计书推荐》

152.《10本运营书籍推荐》

 

 


关注更多H5设计、案例、资讯

10