QQ语音通话:一次关于人类对话历史的创想

起点学院产品经理365成长计划,2天线下闭门集训+1年在线学习,全面掌握BAT产品经理体系。了解详情

创想是什么?是一次传统的叛逆;是打破常规的哲学;是跳出庐山之外的思路。QQ手机版通过新手引导,与你探讨对话的可能性。

每一次的新手引导都是全新的QQ手机版与用户的对话。从无到有,从图片到动画,对话的载体在变,对话的方式也随之而变。我们在不断尝试,尝试让这种对话的方式更新颖、更亲切、更动人。希望 即便已经无比熟悉,但总会有新的惊喜带给你。

如果你下载了QQ手机版4.6最新版本,一定会看到这个开头动画。这是一部关于电话的发展史,也是一次关于人类对话的回溯。

对话是一次苦逼的过程

语音通话新手引导的设计前期是浑浊的,在多个方案被毙后转换思路,我们在设计总监的启发下展开了脚本细节画起了草图。草图随意在纸上作画是不能被满足的,在电脑上画出轮廓略明确的草图才能略显讨好。脚本草图被确认后,前期风格的走向亦是浑浊的,在同一个脚本上,换了一次又一次的风格方案,这时考验我们的不是专业技巧而是不断归零自净的心态。

语音通话新手引导的设计前期是浑浊的,经历了无数次的风格尝试。从电话的造型到质感、整体风格的写实与简约、最后视觉稿的确定,都经过了一个漫长而艰苦的过程。这时考验我们的不只是专业技巧,更是不断归零的心态。

2

主体造型的打磨

着手开始设计第一款电话时,从基本的造型,到琢磨电话与手部在画面的比例,再到优化电话底部的弧度和圆角,这些都经过了细致的考虑和多种方案的尝试。其中的变化是“品”的过程,就像是在做纸粘土一般,细细的打磨。

3

画面风格的确定

在整个画面的构成上,最开始的想法是将纯色剪影的电话造型放在白色背景下,整体风格简洁统一。但久看之后发现容易产生视觉疲劳,同时白底下的单色剪影造型似乎更加像图标而不足以构成画面。

4

在此之后我们尝试了多彩电话的版本,虽然加了更多的色彩,但是并没有达到画面更加多彩且丰富的效果,反而在电话与手的配合、以及画面的统一性上产生了问题。同时,剪影彩色效果加统一肉色的手会让人产生画面未完成的错觉。

5

最终画面定稿

最后的定稿不仅是结合了之前的经验,更融入了动画连贯播放的考虑。全幅色彩加上统一的深色电话,在统一性与画面的丰富性上都达到了要求。同时,多彩的画面切换更会在动画播放的过程中产生了独特的化学反应。

6

动画风格的研究

在动画制作中,最重要的有两点:一是动画的流畅性,二是每个动画不同的个性。因为握住每一部电话的角色的身份不同,除了视觉表现之外动作上也同样需要做区分。

动画的流畅性需要保证有足够的帧数,同时有合理的运动轨迹和符合自然的运动定律。从贵妇电话的关键帧截图中来看。手肘、手腕包括手指的运动并非是一条直线,而是保持弧线的运动。如下图所示,圆圈的位置为当前关节位置。

7

贵妇电话与军人电话的对比可以看出,贵妇的手臂与手腕动作明显更加柔软,从手指的细节到电话绳的动作都在体现贵妇的柔美与妩媚。而军人挂电话时,握住电话的手十分沉稳,手臂和手腕的动作也会相对“僵硬”,同时听筒触碰到电话底座时,弹性弱、下压时间久,以体现军人挂电话时的稳重与气势。

8

节奏的表达

要明晰地表达视频的主旨,需要鲜明易懂的画面构成也需要在动画过程中用不同的节奏构成整个视频的结构。变化的节奏不单能突出重点,也能带来更好地观看体验。

为了体现时代变化人们使用通讯工具也在变化的主旨,整个视频采用快速地切换的方式,用不同的背景色增强切换的效果。所有的动作都是由上至下,如同鼓点一般快速而有规律,以此来制造节奏与效果。整个视频的节奏先快后慢,由多彩的画面切换形成逐渐加快的节奏,最后语音通话的界面出现,与其他的画面做出区分同时放慢速度,突出整个视频的重点。

9

动画后期制作

将各个动画放入AE中拼接合成,加入附加动画,同时调整效果和节奏。之后与音效以及音乐配合,完成视听完整的体验。后期合成输出的视频以及配音的视频前后不知到底有多少稿,相信在这个不断修改与打磨的过程中坚强的不止是心灵还有自己的颈椎。

 最后,我们会继续努力,希望以后可以带给大家更加精彩的功能与眼前一亮的新手引导!

您的赞赏,是对我创作的最大鼓励。

评论( 0

登录后参与评论
加载中