这一天，QQ钱包精英团队与厘米秀合作，特意为H5献上了《白色和宝贝橙520:520的正确 *** 作方法》。作为这个新项目的参与者，本文的创作者将在这里分享他们在写作H5的整个过程中的一些经验。
你还记得几天前你在520干什么吗？你是蜂拥在微信朋友圈相亲相爱，浪漫求婚，领结婚证，拍照，还是一边吃狗粮一边被太阳晒瞎了眼？这一天，QQ钱包精英团队与厘米秀合作，特意献上《白色与宝贝橙520:520的正确 *** 作》H5，以最恰当的态度，帮你过一个快乐的520。
先给H5在线详细地址，看看小白和商业橘猫这一天是怎么玩的:
接下来，我在这里和大家分享一下我写《H5》整个过程中的一些体会。
第一，主题
中国情人节要做什么？除了吃饭、逛街、购物、送礼物去看歌剧，自然少不了给Ta发一个充满感动的大红包。趁着520节，一个人性化的H5 *** 作，既能增加用户的兴趣，又能促使对方发QQ大红包表达好感。为什么不试一试？所以，我有大家的写作计划。(其实这是跟着一群单身汪深深刻意的，呵呵！)
二、艺术创意和方案策划
而早期的产品运营大脑迸发了很多艺术创意，出了很多版本的故事线和呈现方式，最后发现日常更感人，于是大家用日常一般的琐事生成情侣之间结构三个场景:
王者荣耀拿到四杀的时候，不得不调用另一半。好吃的零食要主动给另一半。是的，最好的情人礼物就是给对方发一个装满感动的大QQ红包。
从这个场景来看，提醒情侣的恰当的520 *** 作方法就是明白要为另一半考虑，要给对方惊喜。最终可以在登陆页面给喜欢的Ta发红包，领取厘米秀装修设计，用小动作和表情撒狗粮。以猫的视角来描述故事，看起来更加生动有趣，并且在每一个关键时刻都给予用户 *** 作的选择，让他们感觉更加生动，对 *** 作方法得当的主题印象深刻。
三、设计方案写作
在明确了艺术创意之后，接下来就是室内设计师写作的全过程，可以概括为:人物的制定、场景的分割、设计风格的确定、绘图。以下逐一详细介绍:
1.人物角色表述
室内设计师根据这个问题，画出了主人公白和朱。以大家的猫作为小故事的主人公，用猫的好处首先可以模糊性别的定义，然后自然而然的，可爱！早期画过各种小胸。
试了几个方向，最后选定了关键人物:白色和橙色。
(被大家取笑的白如狗。。变化后)
2.绘图镜头和必要元素
这幅画相当粗略，因为之后还会继续修改。只需要确立必须画哪些元素，有哪些场景就可以了。
3.找很多参考资料，定义设计风格。
4.根据设计风格、手稿，开始绘图。
四。动画开发与设计
有了草图，接下来就是写动画和交互了。这部《H5》长期由短篇动画翻译而成，如何做好这部动画是最关键的问题之一。这里我想到三个方案:纯H5CSS3，视频，动画cccreatejs。经过一番考虑，我认为开发设计的最佳方式是使用animatecccreatejs，原因如下:
H5CSS3的方法应该是纯编码的，不够形象化和抽象，不适合制作这种题材生动、时间长的动画。
视频体量很大，用户习惯在有wifi的情况下观看，不方便传播，也无法在整个播放过程中展现互动 *** 作(每个场景结束时，用户可以 *** 作如何解决各种困难)，所以不适合；
Animatecccreatejs实际上解决了上述方案的各种缺点:可以可视化的制作动画，体积比视频小很多，可以完成各种交互 *** 作和逻辑求解，更符合这个动画的要求，所以应用这个方案也就顺理成章了。
其实animatecccreatejs的完成动画的方法有很多好处。这里有一个简单的例子:
1.数据可视化完成。
制作的时候可以直观的看到实际效果。
2.组件化的定义使得动画组织清晰。
即使有各种修改需求，也可以对整体目标部件进行修改，以免全身受到影响。这可以通过融入面向对象编程的编程思想来理解。如下图所示，三个场景都转换成组件机制，可以很好的将管理方法中每个场景的内容解耦，而不是将场景的动画内容铺设在同一时间轴上，避免前面内容被更改，后面动画濒危。
场景可以进一步解耦，每个姿态都可以再溶解，可以组件化，方便了机制和管理方式，在换素材图片的时候可以尽量避免换点。比如玩游戏时，上下握手的姿势被组装成一个连续循环系统的一部分，放在主场景中。当主场景有其他变化时，时间轴发生变化，不会危及这种手抖实际效果的显示。
3.用animatecc制作动画可以完成一些在H5上很难完成的实际效果。
比如面膜的实际效果，从一个图案逐渐变化到另一个图案的实际效果，一路上健身的实际效果等等。，大大提升了写字间空。
4.createjs展示了丰富多彩的动画交互方式。
开发者可以用自己知道的js写逻辑。与animatecc相比，动作脚本必须应用于求解逻辑。学习和培训的成本进一步降低，上手也容易很多。
然后简单介绍如何使用animatecc完成H5常见的迁移变换、大小变换和旋转变换。
从动态图可以看出，这种实际效果非常容易完成，制造效率远高于编号。
五、主要表现的细节
效率高了，就会有大把的时间去打磨细节。虽然开发设计时间还是很着急，但是大家还是努力让动画在细节上更加生动。下面介绍几个方面:
1.加载页面的详细信息主要显示
加载页面开始，两只猫相继探出头来。黑猫看到白猫，会翻白眼偷看他。在最初的计划中，他们会躲着猫，黑猫会去白猫的地方。然后瞄准白猫后又跑到其他区域，循环系统如此。之后我想起用狗爪子开门的方法主要是表现装载的进度，于是就把两种艺术思路融合在了一起。
2.主要展示手机游戏场景的细节。
玩游戏的时候，有了三杀和四杀，手的姿势会越来越大，显示屏的发光会越来越讨厌，以此来主要表现玩游戏的兴奋，为后面的另一半突然不知所措打一个更明显的空档效果。
3.人性化 *** 作的细节主要表现在
当用户 *** 作狗爪子进行选择时，可以拖拽狗爪子，点击整体目标部分进行选择。对于喂鱼场景，狗爪子左侧很多空缺失的部分也可以拖动狗爪子，方便各类习惯性 *** 作的用户。当用户不 *** 作时，会显示信息提醒箭头符号，引导用户 *** 作。
4.主要显示短篇小说时间和地址提醒的细节。
所有场景都是利用屏幕分区开闭转换，充分考虑不必要的无用界面。于是，进入游戏场景前的屏幕隔断被画成了白色的房子，进入幽会和吃鱼场景前的屏幕隔断被换成了酒店，通知大家小故事生成的地址；把QQ聊天场景前面的屏幕分区改成晚上，告诉大家小故事时间改成晚上。
此外，屏幕分区上还有一个时间震颤，表明短篇的时间变化使短篇更有凝聚力。
5.主要展示聊天场景的细节。
在这个场景中，我们使用了真实的QQ聊天页面，让用户了解红包的按钮部分，起到了课堂教学的效果。
大家模仿真实QQ聊天中的对话泡泡和由外向内进入的方法，提高真实感和画面感。聊天内容改成对方说快自己说慢的方式，说明对方等不及大红包了。
6.噪音的细节主要表现在
当有音效出来时，会适当降低音乐背景音，音效结束后再恢复原声，以模拟真实手机声音的实际效果。
7.思考错误选择的细节
当用户做了一个不好的选择时，最初的艺术创意就是回头看看两只猫过去的爱情回忆，然后再做一个好的选择。复习的时候觉得这让H5越来越拖沓，越来越迷茫，就把回忆删掉了，改成了很形象的“想单身吗？”最好是为了他。“这种提醒，除此之外，还加快了看似拖沓的动画特效，让H5最终看起来更加紧凑有节奏感。
8.结果页面的详细信息主要显示
在QQ聊天场景中，当你选择发一个红包，马上做一个好梦的时候，你会各自去一个不同的结果页面。网页上有与商品橙相配的开心/寒心的倒影，狗爪子会晃动指向底部的红包按钮。红包按钮还会有一个轴的效果，会变大，会震动，从而吸引用户的注意力，引导用户点击按钮应用红包功能。根据以往商业主题活动数据的统计分析，无论有无动画效果，这类按钮的转化率差异都相当显著。
不及物动词写作时需要注意的地方
在整个写作过程中，大家踩了很多坑，耽误了一些时间，也找到了一些提高工作效率的好方法。这里有一个列表。方便大家圈坑:
1.理清剧情和逻辑
一定要在开头理清剧情，把逻辑点连接起来，不然一有难题就很可能把整套都推倒。
2.材料图片要整理出来。
因为动画素材图片比较多，所以最好用不同的文件目录组织方式对素材图片进行分类，这样可以减少查找时间，也可以让素材图片的更换变得更加容易和容易。同样，设计图的psd也要把不同材质的图片分门别类的排列起来，方便在网页上剪图。在动画中，最好将画面转换成组件，便于复用、替换和管理。
3.将动画计时模式设置为RAF
设置createjs。Ticker.timingMode创建js的模式。英国皇家空军..默认设置为RAF_SYNCHED，视频动画会按照animatecc中设置的fps播放，会在低功能的安卓手机上换卡。当设置为createjs时。Ticker.RAF，会改成requestAnimationFrame播放视频动画，在安卓手机上也能流畅播放视频。这样做的缺点是帧数将是不确定的，requestAnimationFrame的响应速度将用于确定视频回放速率。解决方法是在制作动画的时候将fps设置为60fps，这和requestAnimationFrame解决的帧数差不多，这样你就可以按照自己想要的速率制作动画了。
4.声音不一定要放在createjs提出的preload方法上。
因为没有缓存文件，音频文件预加载会严重拖慢加载速度。之后大家立即根据新音频加载音频文件，并把主BGM的音量控制在500K以内，音效控制在几十k以内，解决后主BGM可以播放视频，音效也可以立即响应动画。使用audio的另一个好处是，你可以用几个audio在手机上播放其他几种声音，而使用createjs在iphone上只能播放一种其他声音。因此，建议在声音处理级别使用音频。另外，还要记录下声音每个时刻的播放视频，以防隔音后再次打开声音时不清楚播放的是什么。
七、释放实效。
那么，我们来看看这个H5发布后的诸多统计数据:
1.用户粘性
从数据信息中可以看出，用户对这部《H5》非常感兴趣，大部分人在看完第一幕后会再看第二、第三幕。
2.点餐红包频率220多万元，转化率42.2%，较上年有较大增长。分享率16.4%，远超目前H5在市场上3.93%的平均分享率(平均分享率数据信息来源于腾讯大数据发布的移动网页个人行为报告)。
此外，H5还被百度收录为H5案例，推动了QQ钱包和厘米秀的推广和策划。在微信朋友圈，室内空，也看到很多盆友分享。很多爱猫人士也表示，这两只猫超级可爱，萌。
八。未来前景
因为开发设计时间比较着急，有一些未来前景和艺术创意还没有尝试。如果将来有类似的机会，我们会再试一次:
可以在手机通话时增加震动手机实际效果。在手机游戏中加入双屏互动交流，情侣之间可以一起玩，最后还可以查看对方在游戏中做出的选择。人体骨骼动画的应用是用在猫手的姿势上。虽然是QQ的主题活动，但是可以讨论如果在微信上打开，是否所有动画都可以在微信上播放视频，然后在发QQ大红包和领厘米秀装饰设计的时候跳转到QQ。那样的话，在微信上的传播范围应该会更广。九。摘要
如何做好一个新的人性化管理项目？一、短篇小说方案的策划需要从日常生活中考虑，这样才能在日常生活中引起共鸣。第二，动画要顺利完成，大家可以按照animatecccreatejs高效率的开发设计动画；三个细节的感觉都是打磨出来的，在正确的 *** 作引导、真实性、变换场地、音效等方面都要仔细考虑用户的认知。另外，生动有趣的小故事内容能吸引用户一直去感受，想应用整体目标功能，提高转化率，实现整体商业目标。
在此，感谢各位朋友的辛勤付出，也感谢身边的大师们宝贵的感受和建议。向所有尚未合上这一页的严肃读者致以最美好的祝愿。还没谈恋爱的人，会在七夕遇到心爱的另一半，过上幸福的生活。恋爱过的，2020年就赶上母亲节了。也可以在评论留言板留言，也许这就是缘分吧，朋友们！
创作者:熊
资料来源:https://isux.tencent.com/qq520redpacket.html
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）