腾讯实战案例！设计师如何从零开始做一款H5？

扫一扫
官方手机版

扫一扫
AI创作程序

扫一扫
木子公众号

扫一扫
AI公众号

随着消费升级的步伐，商家总结出在带动消费能力上小孩>女人>宠物>男人的规律，爸爸们作为商家最不重视的一个角色，该如何在父亲节以爸爸为主角制作一款 H5 呢？

一、项目背景

手机充值作为一个日活数千万的工具型产品，亲密充作为多号码充值的首要场景，对话费充值的生态与成长起到至关重要的作用。未来，在新用户增速放缓环境下，发挥亲密充功能沉淀的用户充值关系，将成为我们新的探索方向。

所以此次在父亲节进行发力，制作一款可以对手机充值亲密充有拉动作用的 H5 品宣。

相对于每年母亲节的声势浩大，但是一到父亲节世界就都安静了。这是机会也是挑战，机会在于因为父亲节平均声量较小，所以产出较容易被大家所看到，同时也面临着关注度不够的客观情况的挑战。

二、创意来源

这个用户的状态反映了许多人父亲节送礼物的常态，送来送去好像什么都不合适，最终还是充了一笔话费，这恰好也是此次话费充值父亲节品宣的落脚点。此次品宣的雏形就初现了，一个在老家缺少关心的空巢父亲与一个在外地工作费尽心思送礼物的儿子，他们之间发生的火花。

但若单单如此，则略显单调，如何增加趣味性与可玩性呢？

• 趣味性：配音的趣味性来源于剧本的趣味性与声音的趣味性，剧本的趣味性可以在剧本中增加各种各样的梗，声音的趣味性可以联想到各地的方言。那么选择哪些地区的方言显得尤为重要，为了覆盖更多的地区，我们选择了中国较有特色且差异较大的地区的方言，分别是江浙沪、两广、陕西、东北、中原、四川，这些地区的方言既有识别性，又有一定的喜剧效果。
• 可玩性：在采用选择题的互动方式，模拟儿子为父亲选择礼物，让用户深度参与其中。

确定了主题后开始具体着手项目具体制作，由于第一次制作剧情动画、配音与答题三者相结合的故事性交互 H5，下面会每一步说明，我们在这些地方都是怎么做的。

三、剧本编写

剧本是故事性交互 H5 的重中之重，也是其对用户是否吸引的关键因素，若缺乏吸引力用户则无法到达最后看到品牌曝光，一个剧本最基本的需要一个通顺且合理的剧情，更高的要求是要充分利用用户好奇心，获取用户注意力，完成品牌与功能的曝光。按照写文章的方法，一个饱满的剧本需要有三部分组成。

• 虎头：通过一个最常见也是最能引起共鸣的场景——也就是爸爸给儿子打电话，引出剧情；
• 猪肚：用搞笑与接地气的父子对话持续吸引用户，同时选择题带给用户参与感；
• 凤尾：通过剧情引导出，一个父亲的日常状态，对孩子的要求无非是想要日常的关心已足够，最后引出品宣 slogan 点题，同时曝光亲密充入口，引导绑定与充值。

四、剧本配音

具体的配音工作交给配音外包商就好，我们要做的就是对最后效果的把控。

• 配音剧本：需要提前写好剧本，方便演员配音，同时增加可控性，六种方言需要找相应的方言同学在普通话剧本的基础上一一编写成方言剧本；
• 音效剧本：BGM 风格、按键音、铃声音效等等，可以用表格列出交予外包商也方便后期核对；
• 挑选演员：有些年轻配音演员可以配出老年音色，但是整体语感不及年龄较大的配音演员来的自然和谐。

五、配音与动画相匹配

首先要了解匹配原理，为了节省开发时间与资源，六种方言动画全部采用同一种帧数与时间，所以需要精确匹配每一句的配音时长。

配音时长可以通过三种方法控制：

• 在剧本阶段，控制每句话的内容与字数保持大体一致。
• 在配音阶段，备注配音演员进行时长控制。
• 在后期阶段，通过后期软件的加减速对每句话时长进行精确匹配。

六、人物风格设定

确定好玩法流程后，进入视觉阶段，这次整体的设定是不同区域的爸爸形象，要表现出各区域的特色，结合好配音，才会达到比较理想的效果。

在人物的刻画上，视觉是有很多表现形式的，但会根据整体方案的气质去选择合适的视觉呈现。由于这次的方案会有人物配音，为了使整体效果更自然，更接近用户的想象，加上对产品用户群的定位，我们摒弃了低龄卡通的设计方向，在人物设计上选择了写实的设计风格，更符合用户心理对父亲这个严肃、严谨的心理印象。

结合对话的内容以及动画的表现形式，在细节刻画颜色搭配上增加复古的味道，使人物更活泼不呆板将字体图形化设计，结合中国元素，提炼各省市的简称加上有特点的人物设计，能更快速的帮用户选择以及增加亲切感，以下就是各区域的爸爸形象设计，有没有一款打动你呀。

七、主视觉风格设定

人物的设定出来后，主页面的视觉风格就比较好把控了，复古的老式画报风格，是一个很好的选择～既能突出人物形象，又能把内容很好的划分整合。

板式设定：

主页面整体视觉风格确立以及版式布局，画面主体还是以人物形象为主，配合动画让整个画面更有动感，强调打电话的动作，更贴近产品。

在动画的设计上，也是遇到了很多困难，因为6个区域人物分为独白、对话、听电话3个部分的动画，而为了防止图片过多文件过大每个动作都要控制在6/7帧的范围内，又要保证形态的自然有趣，又要能对上字幕配音。

这里的难度非常非常的大，需要每个步骤都配合的刚刚好，非常感谢开发哥哥耐心打磨，最后的呈现还是很满意的。

动画效果，页面过多就选一部分进行展示：

八、活动效果

最后整体数据效果还是比较理想，用户完成全部选项占比整体 UV 34.89%，说明 H5 内容对用户吸引度较高，能够用内容本身吸引用户到达广告落地页，完成运营目标。也带来较高的亲密充数据，相较平时有显著提升，给亲密充带来绑定与充值。

九、结语

第一次制作配音动画相关的运营 H5，制作初期既期待又紧张，中间也遇到了几次看似无法逾越的难题，最终呈现结果也还较为满意。

这么好玩的 H5，还不快来看看。扫码体验：

欢迎关注「腾讯FITdesign」的微信公众号：

「H5设计好文」

• 《工作复盘：从四大角色带你了解H5制作流程》
• 《新人想要入场视频类H5 设计？你需要了解这些》
• 《让H5不止于自嗨！打造一款百万级传播HTML 5的技巧（附案例）》