赞助商
立即赞助

跪了!揭秘「网易云音乐2018年度听歌报告」刷屏背后的动效设计

UI设计3年前 (2021)更新 流光
3.3K 0 0

作2019第一爆款刷屏 H5 项目,「网易云音乐2018年听歌报告」除了走心的案、精美的页面,包含了有意思的效。大应该想到,这些效的设计是自我们设计团队,但你可没想到的是,实现这些效的前端代码有一大分是设计师「写」的哦。据全统计,可有上万行之多,为么会这么多,看章就知道了。这个大项目有「听歌报告」和「一歌一遇」两分,本要聊聊「听歌报告」。

让我们先回顾一下,也可以网易云音乐app 里搜「听歌报告」:

跪了!揭秘「网易云音乐2018年度听歌报告」刷屏背后的动效设计

因每用户的数据不一样的,的页面可能展示的听歌报告里,下面的录屏全部的页面:

△ 网易云音乐2018年度听歌报告

情感化的设计

「报告」是个听起来枯燥词语,我们希望能过设计,让文和数据不那么冰冷严肃。我们采用了阳温暖配色,造了唯美新场景,和穿着小红裤裤闷骚你。这些物和场景所搭配动效也是有温度,体基调不是酷炫狂霸拽,不是宅萌骚浪贱,我们个页都是柔缓又惬意,慵懒新。基于这个思路,这些动效要简单合理、看着舒服不跳戏,个动作为传递用户情绪要和体视觉氛围致,例如这个页:

跪了!揭秘「网易云音乐2018年度听歌报告」刷屏背后的动效设计

缆前进,如是远景山移动效是常死板。回想下自己坐缆时感受,是四平八稳是摇摇晃晃?于是我们加上缆线和音符体缓缓交晃动,以及缆线上高亮斑,个页生动了许多。画背后我们想传情绪是你在轻松愉快地度假,过段温馨旅程来回顾这年里在云村滴滴。你感受到了吗?

跪了!揭秘「网易云音乐2018年度听歌报告」刷屏背后的动效设计

夜晚是孤寂冰冷,我们相信喜欢深夜听歌你绝不是那么冷酷情,耳边旋律如天透出,照亮了夜,温暖了你,而你也在这束里衣袂飘飘自在飞翔,似是拘束,又好像在追寻着什么。画里我们让线明暗变化,身体微微浮动,飘动衣服和头发让物如迎风飞翔,希望能引起夜猫子们些许共鸣。

跪了!揭秘「网易云音乐2018年度听歌报告」刷屏背后的动效设计

样是骑,不场景、不骑法传递情绪也是不。这个页关键词是「专」,我们设计场景是你选了这条路,算是山坡也会走下去。开始我们参考真实场景,上坡嘛用力蹬(草稿,忽略物细节)。

跪了!揭秘「网易云音乐2018年度听歌报告」刷屏背后的动效设计

是这个费力感觉真是我们要传递情绪吗?专情于首曲子应该是「享受」而不是「忍受」,最终我们选择了这个乍看不太符合现实规律动作——先快速蹬几下,再滑段。这骑法会让有「爽快」感觉,至于上坡怎么也那么轻松?那说明你已经轻熟路了,这条路足够「专」嘛。

跪了!揭秘「网易云音乐2018年度听歌报告」刷屏背后的动效设计

类似问题在这个页也遇到了。开始我们参考了真实提琴演奏动作,这看起来似乎也像在提琴,觉有不太舒服地。

 

经讨论,我们现它的问题就在「」而「引不适」。尤其是个手臂颤抖,让人得他拉琴拉得很费力,而我们的场、BGM 是很轻松的,所以我们最还是让它归平缓。

不喧宾夺主

每一个页面不光有图、动效,最重要的其应该是文字和数据。所以我们的动效不仅要考虑不看,还不能让它诱惑,得适当的让用户的注意力聚焦到文字信息上。

例如这一页,之前的版本:

跪了!揭秘「网易云音乐2018年度听歌报告」刷屏背后的动效设计

猫咪十分脱,小尾巴甩的飞起,单看画面还挺可爱的。但是在整个页面里已经有了波浪起伏的夜幕、远交替的手臂,再上猫尾巴,视觉焦点十分分散,户的注意难聚焦,很容易就忽略掉案。

跪了!揭秘「网易云音乐2018年度听歌报告」刷屏背后的动效设计

于是最后我们还是子静点,做一只静的夜猫子,整个页面没那么乱了。

跪了!揭秘「网易云音乐2018年度听歌报告」刷屏背后的动效设计

这个页面一开始是想做的真实一点,我们把每个指节都拆来做作,结果发现如果要像现实中的翻绳游戏那么玩,作复杂、制作周期长说,户在看到这个页面时的注点都在手上,字信息可都给忽略了。

跪了!揭秘「网易云音乐2018年度听歌报告」刷屏背后的动效设计

于是我们做了抽象和简,只添了简单的「松弛 – 紧绷」作,并控制好节奏降低频次,平衡了信息呈现的需求。

锦上添花的小细节

我们为这些场景添了很多小细节,整个页面更丰富生。

跪了!揭秘「网易云音乐2018年度听歌报告」刷屏背后的动效设计

如报告的封面,晃手机可看到背景的星空,星球元素是会跟着的,我们一个简单的视差效果丰富了背景的层次。

跪了!揭秘「网易云音乐2018年度听歌报告」刷屏背后的动效设计

又如这个页面,当秋千往荡的时候我们给小人设计了一个仰头的作,把身体舒展开,看着这个秋千荡的爽~

跪了!揭秘「网易云音乐2018年度听歌报告」刷屏背后的动效设计

他还有时时飘的页面,眨眼睛等小细节,希望这些点点滴滴给你带来了舒适的体验。

与研发的对接

这是一个经被忽略又挺重要的话题,在设计之初我们就和研发简单沟通了一,综合效果、开发成本、资源大小等因素,效要会 CSS 代码来实现。

什么不用 GIF?GIF 一种非常古老的格式,它的很多特性已不时了,比如落后的压缩算法导致保留高清画质图片体积会很,它的取色范围只2的8次方,也就256色,作对比 PNG、JPG 格式可以用到2的24次方,也就1600万种颜色。明显的例子就彩色渐变 GIF 里都分层的,因它足够的颜色过度。另外就如果需导出透明底的 GIF,其会「毛」,这也无奈且无解的。

跪了!揭秘「网易云音乐2018年度听歌报告」刷屏背后的动效设计

那么视频呢?虽然很多 H5 项目里都用视频承载动效,但一视频这各种奇怪的高清屏横行的保持清晰,体积就小不了,也不能透明(至少主流的 mp4 不行,其他格式兼性不行)配合静止图片配各种机型,对这次的项目还不太合。

我们考虑过志在取代 GIF  APNG/WEBP 格,不说兼容性隐忧,于透明底图片,相于 GIF 画质提升时,体积也变大不少。

跪了!揭秘「网易云音乐2018年度听歌报告」刷屏背后的动效设计

前几个说都是不需代码资格,过去能用。我们考虑了结合代码其他案:

序列帧(JavaScript代码控制播放)的好是画质就取决于图片画质,不过根据研发同事的反馈,少量、体积的情况下还可以,图多了对性能不好。

SVG 也是个不错的选择,际上最项目里也用到不少 SVG 动画,它的处是以当成 GIF 图来用,不需引三方库和学习新的操方案(没错说的就是 Lottie)。但个式目前没有太的原生量产方案,对少数几个适合用 SVG 动画来表现的场——路径动画、遮罩动画等,以花点时间手敲代码来现。而且个项目用的数是位图,很少矢量图,SVG 很特没有用武之地。

我之前写过于 SVG 画在 H5 项目中应的章,感兴趣的同可看:https://zhuanlan.zhihu.com/p/39926486

跪了!揭秘「网易云音乐2018年度听歌报告」刷屏背后的动效设计

跪了!揭秘「网易云音乐2018年度听歌报告」刷屏背后的动效设计

跪了!揭秘「网易云音乐2018年度听歌报告」刷屏背后的动效设计

也曾经考虑过大名鼎鼎的 Lottie ,这个方案对计来说是方便了,能直导出「代码」,但它也不是「万能」的。

对研来说播放 Lottie 动画需要引一个三方库,势必增加项目文件积(个库其也不大),也增加一定的风险(用的人少,文档匮乏,出 BUG 怎么办?和其他的库冲突怎么办?),并且学习一套它的用法(不仅仅是播放,适之类的操也是个问题,Lottie 的文档确很匮乏),在项目时间不是很充裕的情况下是风险。

Lottie 本身是针对矢量画开发的,而这个项目的视觉格并「矢量」,虽然是,但在效率上会有折扣。另外有的效果,如头发、衣的飘,尤是对位图做这种画,Lottie 是无为。

所以终我们用 Lottie 的方案,不过我人还很看好 Lottie 的,用好了能极提高动效产出效率。不仅 H5,重的安卓、iOS平台都能用,研发朋友们可以多多了解一下。另外我一直 Lottie 对应的 AE 导出插件(Bodymovin)的汉化,需的朋友可以到这里下载:https://zhuanlan.zhihu.com/p/34700530

跪了!揭秘「网易云音乐2018年度听歌报告」刷屏背后的动效设计

还一冷门但很潜力的方案——@PonyCui 发的 SVGA 。这格式主应用于一些直播平台的礼动画,对图动画十分友好,且能 Lottie 一样直接从 AE 里导出。选用的原因也类似 Lottie,对可能存的风险所顾忌。

跪了!揭秘「网易云音乐2018年度听歌报告」刷屏背后的动效设计

什么选择了 CSS?首先研发同学十分熟悉这格式,能好的整合整项目。它的兼性好,不需第三方库支持,浏览器就能用。CSS 主通过对图片资源的移、旋转、缩、透明度属性变化实动画,这虽然限制了表力,但本项目中却够用了。对于之提到过的发、衣飘动动画,CSS 取巧但可行的方案呈——精灵图动画(CSS Sprite Animation),我之也制作过一 AE 动画导出 CSS 精灵图动画的具,感趣可以看下:https://zhuanlan.zhihu.com/p/34731896

跪了!揭秘「网易云音乐2018年度听歌报告」刷屏背后的动效设计

设师主 AE 里设动画。AE 的强无需赘言,移、旋转、缩、透明度动画可以非常基础的操作,完不了的我们就用精灵图。那么问题了,好的动画怎么导出给研发?之市面还能直接这事的具。

不过现在有了:

跪了!揭秘「网易云音乐2018年度听歌报告」刷屏背后的动效设计

BX-AE2CSS 是个将 AE 动画导出为「图片 + CSS 动画代码」工具,过下这个视频看看它是怎么工作。

△ 将AE动画导出为CSS代码

它以读取 AE 里图的位移、旋转、缩放、透明度动画信息,以及做标的图导出为精灵图动画,最生成一个 HTML 文件来预览。导出的产物只有图和 CSS + HTML 代码,没有 JS,没有三方库,够纯粹吧。样在完美还原动画的同时以无缝插 H5 页面,之果有小的修改(替换图等)也分简单方便。

跪了!揭秘「网易云音乐2018年度听歌报告」刷屏背后的动效设计

跪了!揭秘「网易云音乐2018年度听歌报告」刷屏背后的动效设计

跪了!揭秘「网易云音乐2018年度听歌报告」刷屏背后的动效设计

记我在文章开头说过,我们设计师团队也贡献了可能上代码。

这其实不是在炫耀,而是目前 BX-AE2CSS 的一个局限。由于间和力有限,只能做逐帧导出动画数据,一个图层一帧就是一行,一秒一是30帧,可以脑补一下个页面下来的有多少行。这虽然可以兼容表达式等复杂动画操作,但并不是一个「优雅」的解决方案。CSS 动画是可以指定关键帧之间的缓动插值函数的,如果能做好转换( AE 的插值曲线和 CSS 还是略有不同的),导出的代码也会更高效简。这也是之后的一个改进方向,希望能有所突破。

虽个工具现在还很初级(我把版号先设为0.1),导出的代码质量也不高,但它已经达到「用」的级别——经项目验证的哦。

我把它开源到 Github 上了,更详细的、使程访问项目页,大试,顺求 Star!点击查看源码!

欢迎关注作者的知乎专栏「Motion Fun」

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

如今很多 UI 设计师不是正在做动效,就正在学着做动效。 动效现在已经无处不在了。有的动效可能是一个微妙的悬停效果,使用 ...
UI动效
在经典的尼尔森十大启发式当中,「系统状态可见性」可以说是如今交互设计领域当中,最为重要的原则之一。通过向用户展现当前...
交互设计
网易UEDC :「网易考拉」 不仅是网易倾注全力打造的电商产品,更是致力为中国用户提供更高品质生活的海购平台。本次品牌体验...
品牌升级
编者按:本文由负责Material Design 动效设计的谷歌设计师撰写,帮助大家深入理解动效的作用,才能做出更好的动效设计。 有...
UI动效
一、微交互到底是什么? 微交互通常关注于单个事件或者单个任务,这些交互元素遍布于整个 APP 的各个角落。这些微交互存在的...
交互设计
网易UEDC – 杨倩 :其实之前有整理过关于交互评审会的文章,原本以为只有交互设计新人才需要提醒,但最近对接了一些合作伙伴...
交互评审
导语 动画可以辅助视觉制作焦点,引导注意力的方向,越来越为广大视觉设计师青睐。从设计工具上来看,既有Framer.js、Origami...
AE动效
疫情期间,在线生活迎来爆发 ,视频行业成了广大网民放松娱乐和了解疫情、学习防护知识的重要平台。 短视频行业的日活用户规...
AE动效