美团UED
每人每天仅限5票，快给你心仪的作品鼓励的一票。
投票
0.0°
一、项目流程
二、项目背景
目前活动专题类型模式越来越单一，参与入口也只有到团购客户端才可以进行参与，对于那些不经常关注团购活动的用户来说，一个可以在朋友圈传播的H5想必能把这部分用户的注意力带入到我们的活动中，也就促使了这个H5项目的诞生。
三、需求讨论
在开始之前设计师们一起欣赏了一些H5案例，分析这些成功案例的创意手法营销方式。
最后脑爆出了几个方案：
第一种：情怀类
国庆假期出去旅游演变成看人山人海，所以我们想把用户往国庆回家和陪伴家人的情节上引导，让多数人能够产生情感共鸣，把团聚这个意义融入在H5之中。
电影放映机播放设定的剧情，回家路、老照片、家门钥匙希望可以将用户带入一幕幕熟悉的场景。
第二种：趣味类
围绕“吃”字展开联想。一群小动物偷吃了一个饼，设定线索和步骤让用户参与进来寻找这个小动物，最终由这个小动物把用户引导到国庆活动专题，整个过程贴合活动专题核心又趣味生动。
拿着以上两种方案和产品开会讨论，产品觉得趣味类的从用户参与和情节设定比较有趣，选定第二种风格开始执行。
四、开展设计
1.结构梳理
把最初的思路优化整理，定下情节和主线结构。
2.草图整理
按照最新的框架重新画了草图,大致页面形态基本都呈现出来了。
3.风格设定
风格走的是单色线条的四格漫画风，重点内容用色彩来突出，单纯的静态画面展示在表现力上还是差点意思，就想到把漫画做成动态似乎更生动有趣一些，有了这些就开始继续下一步。
4.编写文案
因为把情节类型定义为趣味类，就想在文字内容方面可以诙谐幽默一些，再有一点贱贱的特点在里面。
5.出稿
先把动画最多的一个页提前完成了，效果还是很符合我们最初的设想，其他页面也是跟着这个风格继续往下走的。
第一稿：
全部页面：
五、制作实现
有了确定稿我们就开始做分镜头动画，让画面生动起来，看着只有几秒长度的动画都是设计师几帧几百帧动手画出来的-!T_T!
我们希望可以把最细腻的一面呈现给用户。
整个动画都是使用Hype3完成的，设计师把动画做好，工程文件拷贝给开发就可以直接使用，中间省去很多开发时间，很容易上手太多细节就不多说了，网上有很多实例教程。
动画成品
最初设想是会给H5添加很多音效和配乐，但由于排期等原因没能添加上，成为了一点小遗憾。
六、最后总结
看着这个H5从无到有，对我们来说是一次很好的尝试和锻炼，整个过程中设计师不只扮演一种角色，我们想流程、写文案、制作动画还有剪辑音效，做了很多也收获很多。尽管也有遗憾和不足，相信下一次我们会把更好的设计呈献给大家。
这里跟大家分享一些收获的经验：
1.一个好的工作流程非常重要
合理分工发挥每个人的特长，执行过程中随时沟通，流程利用得好会节省很多设计资源浪费。
2.提前跟负责开发的同学进行沟通
提前把活动方案跟开发同学核对一下，确定哪些效果是实现不了或者耗时较多，以便让开发知晓整个设计预估开发时间。
3.养成平时收集案例的习惯
对于没有多少H5设计经验的设计师来说，平时多收集精彩案例，在开展设计任务的时候可以获取更多的灵感和方向。
扫描二维码查看我们的H5哦:）
全部评论：15条
-
-
柴和妞小妹
2016-03-04 16:33从静态画面到动态画面，从生硬式的大促销到小清新的趣味感，的确提升不少。但是逻辑乱，画面乱，看完之后并不知道在说什么，若不是看了解释，都不知道这个跟国庆活动相关。在酷炫的创意也要跟国庆主题挂钩。具体的可以参考qq元旦和春节红包的h5，同样的游戏趣味性，同样的节日类运营。
-
-
-
-
-
-
-
-
-
-
-
-
-
更多作品
发表评论