后厂村日常学UI

UI / UI设计教程 / UI教程 /      

uimaker
UI设计师 / 江苏 南京

来源:网络   作者:佚名

关键词

后厂村路 , 一个在互联网圈迅速蹿红的名字。它的蹿红源于两点:其一,这仅仅是条地处京城五环外,长仅4公里的普通道路,但道路周边却盘踞着腾讯、百度、网易、新浪、滴滴、联想等国内知名互联网巨头;其二是这条不算宽敞的道路却是十多万“后厂村人”每天赖以通勤的马路,所以堵车也成为软件园上班族每天都需面对的难题,通过网络上流传的段子可以一窥这种状态:


“睡了半小时 车才挪了20米”

“有同事到了11点还在路上堵着,估计连公司的免费午饭都蹭不上了”

“强烈建议在后厂村路设一个打卡器”

后厂村日常



在每个工作日的清晨与傍晚,停滞不前的车辆、蠕动前行的行人,与路况地图上一如既往的黑红色细线一起形成了一道独有的风景线。在这里,怀揣梦想的互联网人在这个圈子里从早到晚、日复一日的扮演着自己的角色,有苦也有甜,ui,有笑也有泪。这里已然成为我们日常生活的一部分,它承载了我们琐碎的日常,也承载了我们对未来的希望。


YDC的设计师们决定借助2018年会节目的契机,把“后厂村”作为互联网圈的缩影,并以日常生活为载体,表达作为其中一员的我们对于事业、生活和未来的期盼。然而,离年会开始只有不到两周的时间,我们如何在不占用日常工作的前提下完成这个任务呢?




方案准备


项目初期,我们的想法是制作一个既与众不同,能体现设计师群体特色的节目,又可以完整的承载“后厂村人”生活状态,引起更多群体共鸣的节目。最终我们选择了以绘画作为节目的表现形式。但是作为年会节目,始终是要以观看的效果为前提,因此采用怎样的形式才能把静态的画面在舞台上进行动态的呈现呢?针对这个问题我们通过讨论与调研,最终在节目形式上,我们选择以“播放MV动画+合唱辅助”的方式呈现,并为整个动画确定以下几个关键词:


平凡  真实  忙碌  温暖  笑中带泪 


随后我们也根据时间和实际参与人员作出以下分工:

· UI设计师需要在2天内确定动画脚本,寻找合适的旋律并谱写歌词。

· 在确定脚本和歌词后,视觉设计师开始进入分镜绘制的阶段,并通过5天的业余时间完成分镜素材的绘制 (工作时间里还得苦逼的切图…)

· 完成分镜素材后提交给动效师制作动画,在所有分镜的动画完成后合成完整的动画。

由于时间紧促,在绘画风格和动效制作能完整串联故事和表达情感的基础上,尽量避免了过于复杂的细节,画面的播放以拉镜头往后推的简单动效为主。




项目实施 


脚本

由于这个动画是画给拼搏在互联网行业的人看的,所以我们将故事的地点落在了这个具有代表性的“后厂村”。我们以身边的同事为原型,塑造了一男一女作为故事的主角。为了能让更多的观众有代入感,我们没有对主角的职业做具体的定义,他们可以是设计、技术、市场、产品、运营…我们希望让每一个“后厂村人”有或多或少的共鸣。


我们按照时间顺序选取了多个典型的场景:班车、工位、会议、用餐、加班…故事开始于某个工作日的清晨,结束于深夜,从离开家门的那一刻开始,你的“后厂村日常”就开始了。

后厂村日常



选曲编词

基于已定下的“温暖、平凡、笑中带泪”的故事主题,我们选择了一首大家耳熟能详的歌曲——赵雷的《成都》进行改编。这首歌的旋律简单而温馨,歌词朗朗上口,每个细节都充满了画面感,真实而直接的表达出情绪,有很强的代入感,容易引起听者的共鸣。我们结合自己的日常,按照时间的顺序对歌词做出编写,同时考虑到动画的节奏,每一段歌词都是一个独立的大场景。

后厂村日常



绘制分镜

为保证动画整体风格的一致性,前期由一位视觉设计师完成所有分镜的草图绘制。在统一了配色与笔刷后,每位视觉设计师根据不同的画面进行上色与细化。我们希望在保证动画的流畅性外,它依然是耐看并且有细节的画面,因此每个分镜画面的元素尽可能的详尽。同时考虑到后续动效设计师做动效、推镜头,视觉设计师需要保证每个元素都是一个独立的图层,并把被遮挡的地方也绘制完整。

后厂村日常



动画制作

整个动画运用最多的动态元素是镜头的移动,为了使摄像机移动时场景有纵深感,需要将各个图层按层级排列后拉出距离,分出近中远景。以地铁门场景为例,学习ps,地铁的车皮和车门是离镜头最近的,其次是女主,最后是背景的人群和扶手等细节元素。


制作的过程中按空间分组排列,修正近大远小所产生视觉上的不协调。之后分别给镜头坐标轴(x/y方向)、车门做关键帧动画,根据节奏切换多个镜头,这一场的动画就完成了。这个案例呈现了类似的场景动画平面设计与动画交接的流程——PS分层绘制、AE分层排列制作动画。

后厂村日常


后厂村日常


音频录制

在市场部小伙伴的帮助下,我们从其它部门挑选了几名声音条件较好的同事,在一家专业录音棚进行正式的音频录制。考虑到男女声调的差异性较大,结合这首歌原本的音调,我们最后采用了男声合唱(并不是有道没有小姐姐哦~)

后厂村日常


视频优化

在后期的传播上,由于展示的平台不仅有舞台大屏幕,还可能变成以手机为主的移动设备屏幕,所以视频的很多地方都做出了一定的调整,包括视频比例、文件大小。同时考虑到不同场景的可读性,所有字幕的字体、颜色及大小都需要做出调整与优化。我们模拟用户的阅读时长来安排画面的节奏,对一些容易使用户感到乏味、有快进欲望的部分做出了删减。


前端开发

在视频制作完成后,配合前端开发制作相应的H5落地页、标题字、GIF与切图等工作。  




项目成果


最终版动画如下:点我直达

后厂村日常

后厂村日常

后厂村日常

截至视频上传24小时后,微信平台的点击量超过了10万,秒拍的点击量达到了150万,同时网易云音乐、网易有道的各系产品转发也有很高的浏览量。每一个上传的平台,评论里总能看见无数引起共鸣的人说出自己的感慨和故事。在确保日常工作的同时,我们利用业余时间在两周内制作出一个近5分钟的MV动画,整个过程充满了艰辛,也让我们每个人收获满满。每一个参与这个项目的小伙伴,都能在歌曲和画面上找到自己的缩影。




经验


字幕规划

在绘制分镜的初期,为了保持单幅画面的完整性与协调性,我们并没有对字幕作出特别的安排。在所有的分镜绘制完成后,我们才发现无论把字幕放哪里都达不到最满意的效果。我们意识到,对于一个故事性的MV动画来说,画面和文字都是同等重要的,这两者需要同时进行考量和安排。将字幕巧妙的融合在画面里,才是最精致而又聪明的设计。


视频压缩

一开始我们用AE导出了接受范围内最小分辨率和帧率的视频文件,即使如此,整个文件大小还是超过了30MB。考虑到我们的推广时间是工作日的晚8点左右,相当数量的观看者可能还在回家的路上,或是受网络条件的制约。因此,30MB意味着漫长的加载时间和过多的流量消耗,这必定会给体验与传播造成很大的影响。最终,我们在保持清晰度和流畅度的同时借助了一个压缩神器,成功的把一个接近5分钟的视频控制在了9MB以内。(通过留言或邮件参与互动即可获得压缩神器信息哦)


邮件地址:ydcgogo@163.com

 收藏