joox|用设计讲好故事-JOOX 2020听歌年榜总结( 三 )_疫情|h5

文章插图
△ 在这里每个页面都有品牌IP形像JOJO，它是我们的品牌线索
8. 交互/动画JOOX是一个比较年轻化的产品，除了我们在场景构建、故事编排等方面需要多花精力之外，有趣的动画效果必不可少，可以串联起我们的每个小场景，使整个故事脉络一气呵成。
我们的品牌 IP 形象 JOJO，在每个页面都做了关联，用它支撑起主线线索，起到承上启下的作用，能更好地吸引用户，引导他们阅读下去。
整个动画采用一镜到底的方式，JOJO 随着页面的滑动，而跳动到下一页相应的位置，它的优点是用户可以沉浸式体验，顺着线索往下走，减少中间环节的流失率。

文章插图
△ 品牌IP形像JOJO的运动轨迹
在动画制作的过程中，节奏也很重要，节奏的变化将会直接带动用户情绪的变化。根据主题需要运用节奏，辅助提升整个视觉观感品质，这样的动画才是有意义的。

文章插图
△ 动画速率的变化曲线
在保留了主页的基础上，取消了“下一步”的按钮，loading加载完之后，先进入P0主页停留一定的时间，再自动跳转到P1数据页，从后期的数据反馈来看，在这一步的数据，提升非常大。

文章插图
9. 音乐音乐无国界，不同调性的音乐就像不同调性的香水给人不同的感受，进而影响用户的情绪。一首契合主题的背景音乐不仅能锦上添花，更是构建情感连接的核心。

文章插图
我们把音乐的节奏和情绪表达为三类，节奏：快→中→慢；情绪：欢乐→明快→平缓。
这样更加直观，且进一步把范围缩小，通过排列组合很快能找到目标音乐。由于疫情的原因，整体的氛围还是以平和的、温暖的为主。所以我们最终敲定的方案是“慢→平缓”。

文章插图
△ 音乐节奏和情绪之间的对应关系
10. 物料输出相关物料，闪屏、引流 banner，以及 ins、facebook 等渠道的模板。

文章插图
五、总结1. 数据回收吸取了过往的经验，在一些数据流失比较大的环节，设计上做了优化调整，最终的数据表现还是比较的不错，一些核心指标有非常显著的提升。

文章插图
【 joox|用设计讲好故事-JOOX 2020听歌年榜总结】作为一个国际化产品，推动设计落地时，所面对的困难与挑战要比单一市场要大很多，但解决问题的方法是相通的，不要畏惧，从最基础的底层问题去着手分析。
不同地区的用户使用习惯有所差异，我们目标是寻找共性，用大家都能看得懂、听懂的方式，刺激用户来达到共鸣，比如：背景音乐就是一个很好的情感连接器。
做好一个设计项目，就好比讲一个故事，但这只是一种表达策略，目的是让我们用户能够更好的理解我们传递的内容。所以我们在讲故事的时候不能本末倒置，至少对于这种盘点类的H5，一定是内容优先。
作者：Alic，来自腾讯 IXD 设计团队
本文由 @腾讯设计原创发布于人人都是产品经理，未经许可，禁止转载
题图来自Unsplash，基于CC0协议