各位看官，扫一扫先睹为快吧！

一、Hi！脑洞

一个idea的诞生

       到了2016年底，大家手头事情都不多，所以就元旦这个节日，做个设计方面的小活动，丰富下逗比射鸡湿的生活，掉点节操，卖个萌，甩个锅！搞点事情！就以元旦为主题做个H5的小游戏吧～图样图森破，筹备ing…...

解构一下

       一个idea挖了个坑，这就马上铲土填坑！大家一致认为可以将元旦、UED（7人团队）两个部分进行解构重组。解构是一种把某种整体的东西分解为互不相干的碎片或零件的活动，具有“多元、破碎、凌乱、没有正确与否的对抗标准、随心所欲、自然流动、没有次序”等特点。

       我们对“元旦”“UED”利用解构思维的方式头脑风暴了几个回合，从讨论中发现通过这两个关键字大家联想到的信息还是很开阔的：

填坑—再设计

       脑暴了这么多关键词，难道都要用吗？那出来的设计稿肯定可以和如花姐姐媲美……因此，我们又再次从这些关键词中收缩范围，把这些包含UED与元旦的词，甄选、串联起来再设计。

       大家讨论认为，不防利用新年送贺卡的形式，完成UED的7人形象送用户贺卡，用户编辑贺卡转送其他用户贺卡的交互H5 ~

       那么，第一页可以用“元旦”中的新年、新的起点、鸡年开场，点出元旦主题；第二页可将7人形象以标签形式展现，用户可选择“人物”，观看该人物贺卡内容，并且选择以哪个人物形象向外送出贺卡。

       第三页以后就是各种人物形象内容啦！具体操作流程后面会说到，不过在开始执行的时候发现，7个标签好像有点多，手机的一屏幕又排不开，对于这种宣传互动的H5页面来说，向下滑动的体验会打折扣，so最终决定更改为5人形象，并且对形象特征又做了一点调整，往时下网络的个性标签进行了偏移~~

二、如此操作

操作逻辑

       我们把操作的逻辑画了一个简图，便于小伙伴合作做H5，开场动画自然少不了动画效果啦~至于交互，多采用按钮触发、跳转页面的方式，简图如下：

三、捕捉脚本

主题

       这次我们主要面向的是我司的无数程序猿与设计狮们，我司单身狗太多，我等忧心忡忡哈~2017的愿望就是赶快脱单，那H5对应“寻爱”主题，最是合适不过啦~~五个人物角色对应“五行缺爱”也是贴切的~

风格

       我们商讨出一些风格：温馨、酷炫、逗逼、幽默、小清新、线条、漫画、复古、写实、中国风。由于团队比较年轻化，大家都属意“逗逼”带点“污”风格，加上时下流行的网络用语，让我们开始污力觉醒吧！

文案

       文案包含三个部分：人物标签、贺卡文字、按钮动作。我们根据当下流行的词语、结合团队成员形象拟定了几个人物：经验丰富老司机、一只单身狗、大波儿大长腿（性感娇羞）、逗逼小宝贝（语气参考宋小宝）、国民妹妹（卡哇伊）、我是静静（别问我静静是谁）、高冷御姐。人物特征以弹幕方式呈现，包含职业标签、性格、口头禅；贺卡内容则是对用户的祝福，可以进行二次编辑~操作按钮内容是符合该形象的一种动作~选定了前5个作为人物角色~详细内容如下：

四、嘘！实现

设计

       手绘简约夸张漫画，展示逗逼的画风，线条、上色都比较随意啦！留个小悬念，就先展示展示开场和逗逼小宝贝的设计稿吧！ps：别怕辣眼睛，这样的小漫画画风你值得拥有哦~

开发

       我们采用的是H5开发平台来开发的H5~H5平台还是有很多的，有的H5平台有很多模板，有的可以自行做动画，编辑内容，很方便哟！小伙伴们可以交流下，互相种草，嘻嘻~~

       好啦，饭后消食娱乐的时间结束了，总结出这么一个流程，不知道对大家是否有帮助呢？由于这个元旦H5就是一个设计的小活动，大家自娱自乐消遣自己，不做商业用途，所以在画风上也是有一些参考，文案上面也是有一些大胆的哟，不过好歹还是注意节操的，碎成渣渣可就不好啦！来吧，亲，你也尝试一发，看好你！