一、项目流程

二、项目背景

目前活动专题类型模式越来越单一，参与入口也只有到团购客户端才可以进行参与，对于那些不经常关注团购活动的用户来说，一个可以在朋友圈传播的H5想必能把这部分用户的注意力带入到我们的活动中，也就促使了这个H5项目的诞生。

三、需求讨论

在开始之前设计师们一起欣赏了一些H5案例，分析这些成功案例的创意手法营销方式。

最后脑爆出了几个方案：

第一种：情怀类

国庆假期出去旅游演变成看人山人海，所以我们想把用户往国庆回家和陪伴家人的情节上引导，让多数人能够产生情感共鸣，把团聚这个意义融入在H5之中。

电影放映机播放设定的剧情，回家路、老照片、家门钥匙希望可以将用户带入一幕幕熟悉的场景。

第二种：趣味类

围绕“吃”字展开联想。一群小动物偷吃了一个饼，设定线索和步骤让用户参与进来寻找这个小动物，最终由这个小动物把用户引导到国庆活动专题，整个过程贴合活动专题核心又趣味生动。

拿着以上两种方案和产品开会讨论，产品觉得趣味类的从用户参与和情节设定比较有趣，选定第二种风格开始执行。

四、开展设计

1.结构梳理

把最初的思路优化整理，定下情节和主线结构。

2.草图整理

按照最新的框架重新画了草图,大致页面形态基本都呈现出来了。

3.风格设定

风格走的是单色线条的四格漫画风，重点内容用色彩来突出，单纯的静态画面展示在表现力上还是差点意思，就想到把漫画做成动态似乎更生动有趣一些，有了这些就开始继续下一步。

4.编写文案

因为把情节类型定义为趣味类，就想在文字内容方面可以诙谐幽默一些，再有一点贱贱的特点在里面。

5.出稿

先把动画最多的一个页提前完成了，效果还是很符合我们最初的设想，其他页面也是跟着这个风格继续往下走的。

第一稿：

全部页面：

五、制作实现

有了确定稿我们就开始做分镜头动画，让画面生动起来，看着只有几秒长度的动画都是设计师几帧几百帧动手画出来的-!T_T!

我们希望可以把最细腻的一面呈现给用户。

整个动画都是使用Hype3完成的，设计师把动画做好，工程文件拷贝给开发就可以直接使用，中间省去很多开发时间，很容易上手太多细节就不多说了，网上有很多实例教程。

动画成品

最初设想是会给H5添加很多音效和配乐，但由于排期等原因没能添加上，成为了一点小遗憾。

六、最后总结

看着这个H5从无到有，对我们来说是一次很好的尝试和锻炼，整个过程中设计师不只扮演一种角色，我们想流程、写文案、制作动画还有剪辑音效，做了很多也收获很多。尽管也有遗憾和不足，相信下一次我们会把更好的设计呈献给大家。

这里跟大家分享一些收获的经验：

1.一个好的工作流程非常重要

合理分工发挥每个人的特长，执行过程中随时沟通，流程利用得好会节省很多设计资源浪费。

2.提前跟负责开发的同学进行沟通

提前把活动方案跟开发同学核对一下，确定哪些效果是实现不了或者耗时较多，以便让开发知晓整个设计预估开发时间。

3.养成平时收集案例的习惯

对于没有多少H5设计经验的设计师来说，平时多收集精彩案例，在开展设计任务的时候可以获取更多的灵感和方向。

扫描二维码查看我们的H5哦:）