我们拿到SND铜奖了！主创们有好几句话要说
在上周公布的第43届世界新闻视觉设计大赛中（SND），我们团队喜提金奖和铜奖。获得金奖的是动画作品《一个自闭症孩子对母亲爱的告白》，获得铜奖的是交互作品《爆款新春歌曲调配指南》。
虽然这不是我们第一次获得SND的奖项
课代表这次会采用Q&A的问答方式，给大家挖点好料，让我们开始吧！
✦✧✧
抓住好奇心
策划/文案/统筹 徐雪晴
Q：是怎么想到去关注新春歌曲这个话题的？
这个项目之所以诞生，还得追溯到2019年年末某个周一的选题会
我还记得Mandy当时提出的一个问题：每年春节去超市，我们总会听到喜气洋洋的新春歌曲，它们的创作者和演唱者虽然不同，但听上去是那么的相似，这究竟是为什么呢？
我们的项目常常是在好奇心的驱使下启动的，这个项目也不例外。因而带着好奇心看周遭的世界，一定能发现很多值得进一步探究的选题。
Q：对于许多人来说太熟悉的东西，是如何找到新意的？
我觉得熟悉和没有新意，是两回事。“熟悉”很多时候也不等同于了解。很多时候我们应该多想一想，人们所谓的“熟悉”在具体的语境中，意味着什么。
以新春歌曲为例，可能每个中国人都知道《恭喜恭喜》这首歌，但是大多数人对它的熟悉感只停留在曲调上，至于这首歌的创作背景、改编历史和蹿红的过程，则鲜有人去细究。我们最开始做这个项目的时候，随手搜了一下《恭喜恭喜》，结果大吃一惊，因为它的原版与如今大型商超里播放的版本完全不同，听上去不仅缺少喜气甚至有些忧伤。这是怎么回事呢？这个疑问，帮助我们迅速打开了这个项目，而《恭喜恭喜》这首歌，也因其所具备的巨大反差感，被我们放在了项目开头，作为引子和示例，向大家充分解释了“年味”的营造过程。
“熟悉”，很多时候是具有欺骗性的，多追问一两个问题，你就很难有自信说自己对此很“熟悉”。因而很多“熟悉”的事物，是有不小的深挖空间的。在策划一个新项目时，如果你不是太确信，公众是否对此熟悉到已无需了解，也可以在做完一些调研、有了一点发现后，向身边的朋友提问；如果你发现，他们处于一问三不知的状态，那这个项目大概率是值得推进的。
Q：这个项目的点子很不错，实行起来的时候会遇到什么困难吗？
现在回头看，一时想不起有过什么很大的困难。因为我们在项目启动时，就有一个明确的待解答的问题，即新春歌曲为何听起来年味十足，年味究竟是如何制造的。所以，一切都奔着解答这个疑问去就可以了。
解答这个疑问，显然需要音乐专家的帮助，那么就先找几个有音乐知识的人聊聊看吧。我们找了两个音乐人，他们在知乎上都比较有人气，自己也会写歌、编曲。聊完之后发现，两个人提出的营造“年味”所需的音乐配方，基本一致，最底层的谜题也就因此解开了。之后就是如何消化这些信息并向公众呈现它们的过程。这个步骤对于记者或者面向公众做传播的人来说，都是较为熟悉的，我们不一定会遇到很难绕过去的大困难，但是有无数的小细节需要反复推敲。
Q：里面确实有很多非常专业的问题，你是怎么去消化的？
专业的问题，有时就像一个无底洞，当你以为自己解决了一个问题时，又会遇到新的更深层次的问题，如果无法抓住自己想要解决的核心问题，可能就会被绕进去。我觉得这个项目就遇到了相似的情况，因而如何有节制地获取并消化专业知识，挺重要的。
对于“新春歌曲的年味究竟是如何制造的”，如我在上一个问题中所提的那样，我们通过采访两个音乐人得到了初步的答案。但是他们的解答中有许多专业概念，比如“五声音阶”、“大调小调”，真想弄透它们，那得好好啃一本乐理书（也可能依旧弄不明白）。显然，我们没有必要走这一步，不仅时间与精力不允许，而且无论对于懂音乐或不懂音乐的读者来说，都会显得吃力不讨好。相较于深入阐释乐理概念，我们只要抛出最浅层的解释，并且让读者可以从听觉层面感受到音乐的变化，就足够了。
而理解最浅层的解释，其实对于任何人来说都不困难。对于这个项目来说，这一切完全可以让音乐自己去解释。比如节拍、速度、曲调、民乐组合的变化，当我们将不同的音频展示给观众，点击播放后，他们一听就能明白，因此我们也无需做过多的解释了。
Q：从策划方案的落地来看，项目中比较满意的地方有哪些？
我个人最喜欢也最骄傲的，有两个部分。
一个是项目的开头：我们以《恭喜恭喜》为例，将乐曲的旋律、节拍、演奏速度和民族乐器组合，一层一层拆解出来、最后又叠加在一起，向读者解释了，创作一首“年味十足”歌曲的必要步骤是什么。《恭喜恭喜》实在是一个优秀的示例，编曲者对原版的改编，其实就是一个绝佳的演示过程。不过我们也做了一点细活儿，没有将前后两个版本直接扔给观众，而是找了专业的音乐人将歌曲中的不同组成元素做了拆解、分别录了音频，然后又通过交互设计，让这些音频可以组合播放、展示整体效果。这一整个过程，也是我们消化完专业知识、认真琢磨如何向公众传递信息的过程。
另一个是项目中间的一个过渡环节：在正式展示多首新春歌曲的相似性之前，有好多朵迎春花从屏幕上方缓缓地飘落下来，我们想借此暗示读者——接下来，要进入新的章节了！这个画面很诗意，有点留白的意味，我觉得它让整个项目有了更多的美感和呼吸的空间，是点睛之笔。
尽管直到现在我也不是太确定，读者们是否注意到了这些半透明的迎春花，但是我个人就是有点痴迷于这种类型的细节。比如我在使用不同App的时候，会留意它们宕机页面的设计，如果跳出来一个直白、丑陋、没有经过用心设计的404，我甚至会有点恼火🤦🏻♀️。不管怎样，我还是愿意相信，我们花费的每一个心思，有心之人一定会留意到的。
✧✦✧
视觉美到意象美
可视化设计/UI设计 王亚赛
Q：这个项目的可视化类型和我们平常做的还不太一样，你觉得挑战在哪里？
区别于以往的可视化项目，这个项目的不是纯数据可视化。歌曲的数据更抽象，是歌曲的旋律、节奏、乐器、歌词的重复率，所以把相对抽象的转化成合理的可视化是一个新的尝试！
Q：这种时候一般会怎么找灵感？
接触到这个题的时候，整理了几个关键词（超市 ｜ 新春歌曲 ｜ 年货）。后续再进行联想，我们在春节前，除了在超市卖场采购年货，其实也有不少家庭会到花鸟市场买几束鲜花💐装点家里，而且新春歌曲中有一首《好一朵迎春花》，所以有就暗自先敲定以“迎春花”为可视化方案！
Q：以花作为可视化载体的过程里，是怎么去平衡意象美和信息呈现的？
首先还是确定花的样式，花的样式决定了整体的美感，所以在制作中也多多尝试花的风格和主题贴近。在信息呈现上，我们采用了比较常见的分步叙述，比如开始介绍的时候先用每首歌曲的民族乐器数量转换成花瓣的数量；滑动到下一屏的时候，花朵大小又会根据歌曲的速度变化；再滑动的时候，就用有无花蕊代替歌曲中是否有无声音阶，这样层层递进，一方面传达信息，另一方面一朵朵完整的花朵也随之展现。
Q：花的草图是怎么生成的？做的过程里，有哪些调整？
主要是在 Adobe Illustrator 里面进行操作，对于花的形状、色彩和花蕊花丝进行设计，看最后能否达到一个和谐而美的效果。其实我在花瓣上加了一些纹理，可惜缩小的时候都被淹没了……
Q：SND是设计类的奖项嘛，拿了会不会格外开心？未来有什么小目标
其实还好，可能因为之前也得过几次SND的设计类铜奖（不好意思凡尔赛了），如果能进阶到银奖甚至金奖可能更开心吧哈哈哈哈！希望明年能保铜争金吧！（争银我也可）
Q：给我们想学可视化设计的读者一些建议吧
首先要最最最基础的基本功，就是了解各种形式图表的作用。很多人都觉得这不很简单吗？NONONO，我们常常会为了制作好看的效果，但选用了一种不合适的类型，反而加大阅读难度，所以了解图表的用途很重要。
在刚开始的时候，可以从收集一些你觉得不错的可视化，并且尝试复刻它们，不管从形式、配色、字体大小等，好的可视化一定可以从中学到很多东西。你可以用你会的软件（比如Excel、Adobe Illustrator）尽量去还原可视化，等到你觉得不满足带给你的新鲜感之后，可以尝试学习一些编程。
我就在前同事的安利下，学习了 Processing（一个创意编程语言，可以做很多生成艺术，也可以做可视化，灵活度很高）。现在我制作的近一半的图表都需要借助它来完成。有些图表用它来制作可以非常高效，特别是那种small multiples的图表，可以批量生成同一类型的图表，而且当数据有错误的时候，修改完表格中的数据也可以立刻生成效果，但如果用 Adobe Illustrator 制作的话，可能意味着从头来过；有些创意类图表用它来制作也游刃有余（比如那种南丁格尔玫瑰图，烟花的图表）。当然如果大家想学习交互的效果，可以学D3.js，同样也可以制作很多美丽酷炫的可视化！
✧✧✦
脑洞一时爽，coding火葬场
前端开发 杜海燕
Q：这个项目在策划和设计上有挺多的尝试，在实现层面的难度大吗？
Q：主要的坑都有什么？
第一个坑是要能精准获取音频频谱，并可视化出来；第二个坑是要能兼容不同系统，移动端、PC端、iOS端、安卓端都不能放弃；第三个坑就是我们的音频对拍了。前面两个坑都还好说，目前有不少音频处理技术相关的技术库，我们可以从中测试，选取出最佳的实现技术。而第三个坑可以说是“深坑”了。每个项目我们都会根据项目特性，出一些创意功能。但实现嘛，可以预料到，它肯定是有一定的难度滴。
Q：所以“工伤”是歌听太多了
哈哈哈，可能是吧，没想到有一天听歌会使我emo。就如最后一部分，我们设计了一个互动环节——DIY作曲。我们提供了3种旋律、3种速度以及8种乐器，无论用户如何点选组合，它们都能同频对拍，组装成一首新的新春歌曲。为了实现这个功能爬出“深坑”，我们需要进行反复调试，一遍又一遍地循环这些洗脑新春神曲......以至于到了后期，已经不太想再听到这些它们了（边听边哭.jpg）
Q：最后是怎么解决的？
在此非常感谢p5js及其p5.sound库的大力支持。它一系列的内置函数，让我们只需几步代码就能很轻松地获取当前音频播放状态的数据信息，并将其可视化出来~
Q：那你觉得P5和D3哪个更好一点？
emm...（疯狂思考如何高级端水中）。可能是因为最先上手的是d3，比较熟练，和它建立了深厚的感情，日常可视化coding主要是靠它了。而P5呢，我其实也是会一点点点，但运用不太多。不过它的功能还是非常强大的，这次新春歌曲音频可视化真的是多亏了P5，拯救了我的头发。
Q：除了可视化的部分，整体的视觉还原也很重要，有什么想分享的心得吗？
注重细节：细微之处下功夫～在制作的前中后期一定要和设计师多沟通，尽可能地还原UI的一些小巧妙。比如第三部分编曲环节。看似简单的8种乐器点选按键，背后也花费了很多心思。为了更好地定位和更换填充颜色，它其实是用代码绘制的svg等分环形图。又比如第二环节的花瓣层叠过渡，都做了细微的动画效果，使其变化更加自然。
Q：项目的分享设计还挺妙的。通过扫码海报进项目后，可以听到分享人制作的新春歌曲，这个是怎么实现的？
怎么说呢，在分享链接和海报二维码的背后，我们其实偷偷给它们都加码了。我们通过提前进行数据埋点，读者在点选DIY专属新年春歌曲的同时，记录下了他们的操作。在生成海报的过程中，这些最终操作点会转化为一串数据代码，附在项目链接的后面。然后当其他用户通过分享渠道进入项目时，我们会对网址后缀进行解码，解析出分享人的操作信息，播放其相对应的音频。
感谢各位主创的分享！篇幅有限，大家还有什么想问的问题，欢迎在后台留言。我们会精选一些问题来回复。还没看过项目的小伙伴，请点击阅读原文。
如果大家还想看别的项目复盘，也欢迎给我们留言，咱们下期见咯。
作者 徐雪晴 王亚赛 杜海燕
◒◡◒
┊推 - 荐 - 阅 - 读┊