为腾讯新闻“给跪了，这一年”H5制作的插画以及动画组件，以互动方式总结2017年的热词和流行语。
可以记录推荐数据哦！
收录收藏夹
【H5插画】腾讯新闻“给跪了，这一年”H5
添加到收藏
没有新消息
创建收藏夹
公开(受欢迎的收藏夹将有可能选入站酷精选)
私密(仅自己可见)
分享给微信好友28513 条评论分享收藏感谢收起赞同 303 条评论分享收藏感谢收起告诉你，创意与设计一支H5的正确流程！
大家周一好，小站本周又要开始更新了！这次给大家带来的是最后小站后台询问比较多的一个问题，H5的设计流程究竟是什么样子的？
本次，小呆就用一篇文章来告诉你，设计一支H5的正确流程，本次内容较长，可能无法一次看完，如果内容对你有帮助，请分享与收藏！谢谢你对，我们小站的支持～
1.你一定要先了解项目的具体需求
每支 H5 的设计都有具体目的了～
当你拿到甲方、同事的项目需求文档，先要想清楚为什么咱们需要做这支网站？每个项目追求的目的都不同。例如说:新产品的发布、促销活动、为网站引流、还是说需要传播品牌形象等，这些都是我们常见的设计目的。
假如说，我们现在需要推广一次免费看电影活动，那么免费和电影就是特征了，而围绕免费我们可以发散出很多内容点，比如说“省钱、机会难得、很有意义” 等，它们都可以成为H5主打的方向。而这个方向，最好能兼顾自身产品的优势和活动的目的，就像是近期上线的H5《抖音-世界名画抖抖抖抖抖抖起来！》，作品一方面兼顾了抖音的产品特征，一方面又做出了一个非常有趣的内容展示，算是一个非常典型的案例了！
而这是开始设计最重要的 1 步，目的性模糊的 H5 项目的启动会很盲目，它会给你带来麻烦，即使作品刷了屏，你也会发现，要讲的卖点、诉求、内容都没讲清楚，而且你在项目结束后，也会很难评估项目结果。
下面我们再举 2 个商业案例，来看看什么是明确的方向:
2016 年新年期间，沃尔玛希望在这个契机做些品牌曝光，从而提升品牌知名度，请注意，是提升知名度！这就得到了一个设计方向: 这是一个轻营销而要好玩的项目需求。
沃尔玛最后推出的主题是 “为家人长脸”，那些在外地漂的人过年回家时是不是能为家人长个脸? (升值，加薪，买房，成功 ... 都可以给家人长脸 ) 围绕这个洞察点，品牌方推出了一支 H5 游戏，给你的家长长脸吧! 对于重参与轻营销的方向来说，它的方向是准确的。
2016 年暑期，故宫联合腾讯推出了在京举办的大学生创新大赛 NEXT IDEA，而设计H5的需求就是：希望能够吸引更多大学生群体来参与。
腾讯最后以《穿越故宫来看你》为主题，出品了一支带有调侃和穿越特征的古装说唱类 H5。可以说，“让传统文化活起来!” 的定位，以及整支H5的美术风格和叙述方式都考虑到了最初的诉求，年轻化、通俗化、娱乐化的方式来吸引低领的大学生关注传统文化。
而在2016年下半年我们又看到了很多跟风的H5作品，做的和它非常类似，但基本都跑偏了，原因也很简单，《穿越故宫来看你》的形式只是表象，真正让他成为这个样子的原因则在于他了解了项目真实的诉求，因为项目的诉求，作品才最后成为了这个面貌。
2.你要选择合适的表现形式
当方向明确后，下一步就要构思表现形式了，H5的表现方式非常多，并且还在不断创新：
是要讲故事卖情怀?
还是要强调功能，去陈述内容，做陈述?
还是说做个小游戏拼用户粘性?
在互联网公司，多数团队会采用头脑风暴来确定主题。 在这里，天马行空的想法固然重要，但能够落地实现的才是有效的，常规来说，这个形式一定是最能发挥内容特征和团队优势的，要去寻找合适的形式表现合适的内容。所以，参与形式的同学对于表现形式的认识和 web 网页技术的了解就必不可少了，他能办给你想出靠谱的形式。
如果你预算充足，项目又需要借助明星效应，我们可以采用拍摄视频+特效合成的方式来执行，像经典的吴亦凡系列 H5 作品。
当整个策划和创意围绕特殊节日，我们又可研发针对节日特性的新形式来丰富H5，像在 2016年情人节推出的《生成结婚证》，该作品是证件伪造类 H5 的第一支上线作品，由于它过于逼真的效果和较好的传播特征，也导致了该形式在 2016 年随后的 3-5 月份期间，引发了一场全互联网的H5 的 “装逼神器” 妖风。
当整个项目涉及到调查研究，我们的表现形式就可以围绕选择题来做文章了，例如下面的这支关于 90 后的生活报告。
这些只是众多表现形式的其中3种，未来还会有更多新颖形式出现，这些演示在形式上都有极强的针对性。在设计过程中，要选定合适的表现形式，来最大程度突出内容。当形式确定后，我们同时要设计出原型图，它会很类似于电影分镜头脚本，也可以被理解为是前期草图。
3.最为关键的设计表现
到了具体设计阶段，这就需要确定美术风格了。如果选择伪装朋友圈形式，那么必然你要奔着这个方向去做的更像朋友圈的页面，去研究微信内部的页面和 UI 细节，这样的执行就特别强调临摹和还原。
如果要走心故事，那么美术风格很可能会倾向插画，需要找到相应的参考来设计画面，在调性和内容上要符合主题，并且要寻找合适的配乐以及声效。
在这里，设计师需要判断用那种表现形式、需要什么调性、搭配何种元素、配乐和动效的跟进搭配究竟应该是什么样子?
所以，这个阶段对于设计的整体把控能力要求非常高，不是说你能做平面、能做 UI ，你就是H5设计师了，一个H5设计师需要综合能力，他应该能敏感的意识到多种表象形式，包括音乐、动效、甚至说视听蒙太奇的融合...
现阶段，由设计团队来产出优质H5比较现实。即使有专业动效师和音工团队与你配合作业，最终的所有内容还是需要一个专业H5设计师来统一。所以。对于设计师来说，学好H5相应的知识至关重要。
4.技术上的-开发上线阶段
很多人不清楚 H5 是怎么生成的，主要的方法有 2 种:
(一) 有代码实现
设计师把做好的分层图，这里包含了 psd 文件、png 切图、适量文件、mp3 音频、视频文件等等，一起打包给前端工程师，他会将这些内容放置到服务器，用代码编辑的方式将元素合并成我们平时看到的H5网页，前端也是H5的最终执行者，他们对设计效果的还原至关重要，一个好的前端往往决定了一个作品的最终命运，前端工程师可以说是设计师最好的行业导师。
整个 H5 网页在代码编辑完成和测试无误后，会上线推送到互联网。有时，前端工程师的工作量要远远高于设计，这取决于项目的具体表现形式和难度。
(二)无代码实现
无代码并不是说不需要前端工程师，而是因为目前互联网上有大量 H5 页面生成工具， 他们以网站形式出现，并且被冠名为第三方平台，专门为没有前端资源的设计师提供辅助。 你可以把设计好的素材上传第三方平台的服务器，自己编辑并发布，这个过程不需要和程序员打交道，可以节省人力成本，并且更为简单快捷!
但弊端是，这类平台功能单一，效果有限，普遍都是幻灯片翻页的形式，而通过工程师生成的H5页面是可以达到定制化效果的，现在在市面上这类平台非常多了。
但不管是第三方网站设计工具，还是前端工程师来生成 H5，都需要设计者清楚你想要做出的页面效果，前端工程师是否能够实现的出来。而与前端工程师的沟通，从项目一开始就要进行，要尽量避免一切设计都做好了，而前端无法实现的尴尬情况。
5.最后的数据总结阶段
数据总结阶段是H5特有的，各类数据会告诉你网站的受欢迎程度和不足之处，我们现在的数据统计已经比较强大了，服务器甚至能够监控到每一个页面各个位置的点击情况，即使数据没有那么详细，通过 pv、 uv 量和跳出率你也会对作品的效果有大概的认识。
你设计的创意和作品的表现形式好不好，推广到不到位，时间点掌握的恰当不恰当。数据的成绩单很快就能引导你接下来应该怎么调整战略和打法。所以，总结阶段比较关键，这是 H5 特有的属性，随着行业的发展，H5 设计对于数据层面的专业人员要求也将会越来越高， 这个领域目前仍然不够被重视，也是人们总会忽视的一个阶段。
如果你的 H5 走的是开发设计方式，那么你可以通过前端工程师来了解具体数据情况， 如果你使用的是 H5 工具，那么你可以在工具后台看到各项数据参数，现在所有的第三方工具平台都开放了相应功能，未来的设计肯定会和数据联系的越来越紧密，而H5只是一个开始。
最后特别为读者搜罗到了腾讯出品的H5移动页面用户报告，案例中详细归纳了目前H5网站在数据方面的特征。
总结整个H5设计流程的目的，是为了让不了解H5设计的读者能够形成完善脉络，对H5设计不会太过于陌生，通过观看具体案例，来让大家更容易理解H5设计中的诸多特点。而在整个设计过程中，创意和技术贯穿始终，而参与者随时可以打破小呆为大家展现的这个常规流程。
因为，对于一个新兴的事物来说，不存在完善的流程，只存在优秀的案例，而H5的设计流程，也会随着互联网的发展不断被完善，好了，这就是我们今天要给大家分享的内容了，我是小呆，咱们下期见！
本节内容选自《H5+移动营销设计宝典》，目前唯一一本H5设计相关图书，了解本书详情请长按下方海报图内的二维码，跳转小站书店：
责任编辑：
声明：该文观点仅代表作者本人，搜狐号系信息发布平台，搜狐仅提供信息存储空间服务。
今日搜狐热点794 条评论分享收藏感谢收起h5.miidol.com/campaign/uber/wyf/index.html?from=timeline&isappinstalled=0 (二维码自动识别)二、杜蕾斯：爱的密码说到杜蕾斯的营销方案，总会让我们在其中发现亮点，杜蕾斯这个H5在引导人们分享的时候是基于情感进行分享的，整个游戏设计环节是解密过程，让另一半有一种猎奇心理。同时，制作密码的人有一种好奇是他能不能获得通过密语，验证两人之间的默契度。在整个环节中都会有引导分享按钮，不管是成功还是失败都可以分享给其他人来进行游戏解密，来看看杜蕾斯给的H5方案。 (二维码自动识别)三、天天P图：我的小学生证件照六一儿童节前朋友圈慢慢刮过一阵怀旧小学生照片风，勾起了人们窥探自己童年照片的欲望，这个活动的初衷是为了引导参与者下载天天P图软件，这个测试游戏的小心机真不少，童颜、比美、比萌、想要得到赞美的虚荣心得到满足的同时，引导参与者下载他们的APP，来看看他们的效果展示。扫描下面二维码体验一下 (二维码自动识别)四、奥妙：谢谢，妈妈奥妙的H5营销的奥妙之处是，借助母亲节这个节日推出感谢妈妈的活动，通过为妈妈洗一次衣服来引出跟产品相关的营销，通过视频采访产生情感共鸣。奥妙本身就是做洗衣产品的，如果给妈妈洗衣就用奥妙这个产品，也表现了产品的情怀。同时，最后的祛除99种污渍表明了产品的特性，也给了大家选择奥妙的理由。这个H5有视频，大家请在WiFi下直接扫码感受一下吧 (二维码自动识别)五、红星美凯龙：前任撤回了一条消息……红星美凯龙进行O2O转型后了，一些线上的营销活动还是值得我们去研究一下的，针对6月9号-6月19号做的30周年回馈活动，他们通过一条前任撤回了一条消息顺利的引爆了整个网络的高潮点，并通过发现前任撤回的消息是做我的新欢来引起好奇。结果却又出人意料，引发人们对结果的吐槽，从而引起传播。最后还不忘在每件产品介绍页面把这件产品的特点表现出来，在最后还给大家发放了优惠券，更提高了他们去消费体验的兴致。最主要的是，没有前任的也会被帅哥美女撩到吧。扫描下面二维码体验一下 (二维码自动识别)六、有道云：这位职场老司机，请收下我的双膝有道云这个H5，更像是一个有道云产品使用流程演示，通过老板和客户不断的催促，一个职场老司机通过有道云的使用，轻轻松松解决了问题，在提升效率的同时，也展示了有道云的好用、实用和高效。给职场菜鸟提供提升工作效率的方案和入口。截图感受不到有道云的强大，扫描下面二维码自己感受一下 (二维码自动识别)七、腾讯游戏：不是10年老司机真心玩不了H5好像上半年都流行怀旧风，腾讯游戏这个H5的页面是为了宣传腾讯互娱平台在3月份的腾讯互娱年度发布会做的宣传推广，整个H5的设计都是引导用户去发现和探索的，更像是一个线上版的密室逃脱，引起用户的好奇并不断尝试去解密。扫描以下二维码，体验一下 (二维码自动识别)八、百度外卖：出来种太阳迟早要还的，送给不耐温的你8090后还记得小时候听过的《种太阳》那首歌吗？百度外卖总能找到人们善于分享和传播的点，这次百度外卖通过魔性的歌曲串烧来引导用户进行分享，同时贴近主题：这么热，不想外出吃饭就让百度外卖帮你送餐吧。起到了传播+营销的目的。搞笑原版，扫一下二维码，观看时请捂紧嘴巴 (二维码自动识别)九、红牛：考试季，红牛建了一个百万人参与的能量自习室进入红牛能量自习室互动页面，可以选择教学楼、图书馆、食堂等熟悉的场景，并根据旁边座位同学的头像选座。这对于用户来讲，或许是一个不错的兴趣点，毕竟能同时和天南海北的同学一起上自习的机会并不多见。在选好座位后，按下”开始自习“键，就安心的脱机自习吧。如果能坚持15分钟就会有一个小小的奖励，如果是45分钟，那就会有话费红包、视频网站会员卡等礼品，皆为大学生活必需品。考试季刻苦复习的主旋律在抽象层面吻合了红牛“你的能量超乎你想象”的品牌精神，同学们埋头苦读的场景同时红牛产品提供了用武之地——提神醒脑、补充能量，实乃考试自习、全神贯注之必备。一起来感受一下。以下是活动二维码，已过期，不过还是可以扫描进去的 (二维码自动识别)十、火影：纪念火影十六年 火影忍者这个大IP只要随便一摆，就能引来众多火影迷的围观。但是正因为是大IP，就注定其不会是一个平凡的H5。在《火影剧场版：博人传》上映期间，结合了H5一段段的动画+走心文案，直接就把各位火影迷带入了这些年的追剧时光了。在这青春重燃的瞬间，相信很多人还是愿意走进电影院观看这部“青春记忆”中。赞同 1456 条评论分享收藏感谢收起