聊聊豆瓣APP5.0开屏设计
细心的同学不难发现豆瓣APP从4.0版开始都会设计一个开屏动画。从上个大版本4.0的水果清凉到这次5.0版动画，我们力求每个大版本更新后，打开豆瓣APP都会呈现全新的面貌与体验。
好啦，废话少说，先放出设计动图给大家先睹为快！
风格表达
这次5.0版迭代主要更新的是首页，页面中将之前复杂的类别模块改为固定内容入口，使页面更加易读纯粹。可以说是种化繁为简的做法。而新版本正逢夏季，夏日的阳光缤纷艳丽给了我们灵感。而色彩的运用也能够表现出整个豆瓣产品以图书、电影、音乐为主导的丰富内容。所以整个动画造型简洁色彩多样。
动画的主线想表达两个含义。第一是向我们亲爱的用户say 声Hey，新的版本新的心情，不Hey一声怎能行！所以打声招呼是必须的。第二就是品牌露出了，动画播放完后，画面会停留在等待界面。细心的同学不难发现，虽然是停留，可画面的细节部分依然在动哦！这也是得益于Airbnb Design开发的Lottie这个强大动画插件的功劳。关于插件，后面我会细说哈。
字体设计
Hey! 一个愉快又不失礼节的招呼，就如同它被连贯的播放出来一样，每个字的颜色都可以在今夏的季节中寻觅到。字体的设计参考了英文的铜板体，铜板体俗称花体，是装饰感很强的字体，曾经被广泛应用在书信当中，因为装饰感强，笔画总是在打转，所以也较为繁琐。
那么问题来了，如此繁琐的字体在书信中并不难认，而在动画中就会存在辨识度的问题了。文字从出场到消失只有短短的几秒钟，在这么短的时间里文字笔画应该越简练越好。所以我将笔画做了简化。同时把部分笔画做了修改，使字母间首尾相接。
文字的出现动画使用了双色填充，第一遍为深色，第二遍为彩色。深色的带出感很强，重点为强调字的轮廓，而第二遍彩色是最终颜色。双色错落的出现也是为了丰富动画的层次感。三个字母依次出现，填色首尾相接，使动画更流畅。
动画分镜
聊完了文字，还有一个重要的部分是分镜。整段动画分为了四个部分，就像电影剧本一样我把它罗列出来吧。
1、红黄蓝三个颜色的球出场。红黄蓝代表了夏天的多彩与豆瓣内容的丰富。
2、三个球变形成文字Hey。
3、Hey字拆解并还原成红黄蓝三色球。
4、三色球相融合变成了豆瓣Logo，结束。
整个动画都是以三色球来贯穿始末的，期间经历过三次变形。下面依次是这三次变形的局部动画。为了方便观看，我将动画设成了3倍速。
贴了这么多动图是不是眼睛都看酸了？那就来点带感的音乐感受下动画的节奏吧！
最后说下Airbnb Design开发的Lottie工具。它完美的解决了动画与实现之间一直存在的问题。设计师在AE中用Bodymovin插件将动画生成出.json文件后交给开发同学就可以上线了。省去中间复杂的沟通环节和实现偏差。对动效感兴趣的同学一定要试试。
此开屏动画使用了两个.json文件，第一个是主动画文件，包含了完整的动画内容。第二个是等待动画文件，就是文章开始所说的主动画播放完后在等待界面中局部还会有细微变化效果，这是个循环播放文件，它的使用增加了动画的细节。
好啦，动画就聊到这里。最后感谢我们的设计师圈圈同学在前期对Lottie工具的探索！我们也会将动效更多的应用在产品设计中。
