设计师就业衔接班！45天 PS、AI、AE 从入门到入行 详情戳>>>
随着消费升级的步伐，商家总结出在带动消费能力上小孩>女人>宠物>男人的规律，爸爸们作为商家最不重视的一个角色，该如何在父亲节以爸爸为主角制作一款 H5 呢？一、项目背景手机充值作为一个日活数千万的工具型产品，亲密充作为多号码充值的首要场景，对话费充值的生态与成长起到至关重要的作用。
看完本文，前端能快速开发一些 H5动画，设计师也能高效地制作出合自己心意的动画来让别人高保真还原，希望能给大家带来一点帮助。前言说起动画H5，作为一个前端，可谓是「又爱又恨」。
网络成本的降低促使承担推广作用的 H5 越来越多的使用视频呈现的形式，但迈过初期朋友圈视频给用户带来巨大新鲜感的时代之后，想要继续通过视频类 H5 争夺用户注意力，变得越来越难。饶是如此，在过去半年中亦是涌现了《番茄炒蛋》《Julia系列》等视频的现象级刷屏，继而带来巨大的推广红利。
有什么方法可以极速适配iPhone X ？今天这篇好文腾讯设计师以QQ空间H5的项目为例，给大家分享最快的适配方法！
编者按：腾讯的设计师用王者荣耀的H5 页面案例，帮你学会给iPhone X 做适配。腾讯ISUX ：目前的 H5 页面可以分为通栏页面和非通栏页面两种，每种页面都可能有底部操作栏，具体如下：一. 通栏页面顶部通栏某些业务的一级页面多数使用了顶部通栏 banner 的效果，由于 iPhone X 在状态栏增加了24px的高度，对于现在通栏 banner 规范的内容区域会有遮挡情况。
Janilychen：以往做一些H5的运营项目，都是动画设计师使用Animate cc（原来的Flash）先设计好动画原型，然后交给我们UI开发来实现。做过动画开发的童鞋都知道动画开发都是比较耗费时间精力的，而且还要高质量的还原动画设计师设计好的动画，来回沟通成本也非常高。
编者按：那个刷爆互联网的H5 从诞生后已经有上百篇分析，但今天这篇不同，是背后这群创作者针对H5的设计构思以及动画设计进行的细致分享，全部干货，一起来收膝盖。剥壳使&鱿鱼哥：不知大家有否见过这样一个H5：这则名为《薛之谦2个月没写段子，结果憋了个大招》H5在微信上发布3小时左右，PV已经突破120W…
2016年末，各路APP也纷纷展开一轮轮的数据厮杀，从不同的视角阐述过去一年的精彩故事。而坐拥庞大用户数据的QQ空间，在这个既难忘又不舍的2016年，用户的故事将会被如何演绎，在寒冬带给用户怎样的温暖回忆呢？
无酱：在这个日新月异的时代，想要立于不败之地，摆脱被淘汰的命运，只有迎头赶上，不断创新。在过去两年的时间内，H5经历了从全民兴起 – 爆发 – 沉淀到再爆发式增长的过程，以层出不穷的新面孔一次又一次展现了惊人的生命力。
H5划页动画，相信大家已再熟悉不过。随着越来越多H5生成工具不断出现和各自功能提升优化，H5制作成本已越来越低，周期越来越短。
编者按：慎用向右滑动操作、慎用横屏展示效果、按钮原理页面底部、使用SVG格式做矢量图…… 以上提到的技巧全都出自今天这篇好文，简单小巧但实操性很强，作为设计师，也要尽量避开这些坑。1、交互上，慎用向右滑动的操作方式。
编者按：用软件快速生成的H5和设计师精心打磨过的有什么区别？看今天这篇就知道了。
田田：一套操作界面，合适的动态交互反馈能给用户带来更好的操作体验；一个H5运营宣传页，炫酷的动画特效定能助力传播和品牌打造。近两年，小到loading动画，表单动效，大到各式各样H5运营页的炫酷展现，“动效设计”一词可谓是火遍大江南北，而动效设计早已成为一名合格设计师必需有所知晓的领域。
大家好，我是腾讯TGideas的动画师二娃，有幸参与这次联合《小王子》电影推出爱消除小王子游戏版本的世界观推广H5，同时我们还做了另一版，作为游戏内嵌世界观，分别在国庆长假后，在微信、手Q、以及公关传播等平台推广，数据反馈也很棒，下面给大家分享这个痛并充满爱的过程。一、前期创意1. 目的：天天爱消除与《小王子》电影合作，推出小王子游戏版本，需要一个预热推广H5。
小宝：腾讯游戏HTML 5实战案例！在这次朋友圈广告的设计过程中，遇到了好多拦路虎，有惊喜有郁闷，但在这个过程中我收获到了很多关于设计的经验和对项目的理解。
编者按：今天腾讯的何六六同学把最近做的一个超赞的H5总结笔记分享出来，将设计动效、具体实现方法、踩到的一些坑都完整梳理了一遍，全文高能干货，强烈建议学习哟！前言最近火热的有声娱乐平台 APP，企鹅 FM（编者注：此处绝非广告），在8月28日鬼节前夕，联合《盗墓笔记》推出了“勇敢者的游戏”活动。
编者按：在国内Html 5势头正猛的时候，国外同行也不甘示弱。今天精选的这5个Html 5案例，甲方都是不差钱的企业，宝马、阿迪达斯、宝洁等，作品质量无出其右，有没有差距，体验就知道。
Lavali：早上一睁眼，朋友圈被吴亦凡入伍的H5刷屏，创意受到了广泛的关注，很多人开始找到我了解创作背景，有恭喜的，有质疑的，也有各种分析的。既然火到这个程度，我就借着热度还没有过去，说说团队创作这个H5创意的完整过程。
编者按：今天@大明白儿 继续为同学们分享Html 5的精选案例，风格多样，励志感动搞笑传奇无一不包，从文案到视觉都非常打动人心，值得每个人来好好体验下。本文为作者授权优设发布，未经作者本人授权请勿转载，谢谢 ：）作者微信公众号：H5广告资讯站，欢迎关注唷。
现在市面上有一大批HTML5页面模板制作工具，虽然方便了很多非专业设计师制作HTML5页面。但是不得不吐槽的是，很多模板工具平台上的作品大部分还停留在左飞入右飞出的初级境界，想感受真正精妙的高级特效，这10个专业人士的作品不得不看咯。
刚升级体验了~~非常期待微信输入法~~现在的输入法全是广告流量入口，文中提到的广告问题其实是输入法做的，其实挺恐怖的~~
但我觉得 Figma 之所以会受到大家的追捧，更多原因在于它的免费计划以及 Sketch 软件对操作系统的限制（Sketch 仅适用于 Mac），但我也理解为什么没有多少人愿意承认这些原因。这句话说得太对了
这么好的文章竟然没有评论！
如何吸引用户注意力： 1.人性化：尽量不要传达系统消息感，可以考虑用人物对话等更有温度的形式来包装 2.个人IP：头像在互联网世界中，如同现实世界的名字一样，都是属于个人形象IP的一个标志，更容易被用户关注到
讲的非常好，很感谢，但是文章中有一点点小问题，比如说文章中有一处是长边完全显示，写成了短边完全显示，会加长阅读的时间。不过也无伤大雅，总之很感谢！
刚升级体验了~~非常期待微信输入法~~现在的输入法全是广告流量入口，文中提到的广告问题其实是输入法做的，其实挺恐怖的~~