用设计讲好故事！腾讯 JOOX 2020听歌年榜设计总结

JOOX 是腾讯面向东南亚商场战略性的音乐 App，2014 年上线，用户集体主要会集在中国香港、印度尼西亚、马来西亚、缅甸、泰国、南非等商场。

2020 年，一场出人意料的新型冠状病毒席卷全球，对全球的政治经济产生了巨大的影响。这一年，关于咱们每个人，都是不平凡的一年。被逼削减出门活动与聚会的频率，只能宅家的这段灰暗时光，JOOX 为用户带去了许多温暖、快乐和感动。

应战

作为一个国际化产品，JOOX 覆盖了六个国家和区域，它们的经济、政治、言语、宗教、文化，不尽相同，面临着比较大的应战。所以最好的战略是在杂乱的场景中去提炼共性，并经过创意的办法，转化成简单易懂的言语，然后把产品价值观传递给用户。

想了解不同国家的文化差异能够看这2篇：

规划流程

咱们把整个流程分为三个阶段：

前期探究

1. 主题定位

前期计划探究进程

首先要明晰自身的产品定位，咱们是谁？咱们服务对象是谁？咱们提供什么样的服务。作为一个泛娱乐途径，咱们的使命是致力于用创新的办法给用户带去快乐。从产品人物来讲，JOOX 就好像一个朋友相同，陪在用户身边。

考虑到咱们产品在疫情期间的特殊效果，咱们期望把 JOOX 塑造成一个陪同者的人物，用一些轻松、风趣的办法，拉起用户的回忆，再次建立产品与用户的联络。

明晰主题：JOOX be with you，在后续的规划执行时，一直环绕着当时的主题展开。

2. 风格调性

依据 JOOX be with you 的定位，环绕“陪同”来发散考虑，整个的风格调性，应该是温暖、平缓、友爱、风趣的，经过这些界说的词，辅导终究计划落地。

3. 规划方针

规划方针终究都要落脚到商业，咱们期望能够经过对需求的挖掘，找到与用户共鸣的触点，达到以下方针：

• 提高活泼，经过一年的音乐回顾，添加老用户的发动率，加强二次共享曝光传达；
• 品牌宣扬，作为年末的重要运营活动，是一个很好的宣扬的要害，向用户传递咱们的企业价值观和产品理念，拉近与用户距离；
• 驱动添加，这种大型活动，一同也是做添加规划十分好的机会，建立用户体会地图，做好每个环节的剖析，并予之相应的解决办法，提高核心数据方针。

创意执行

1. 心情板

经过前面收拾的要害词，寻觅建立视觉言语的风格参阅。在疫情最严重的时分，一切人都与世隔绝，即使疫情有所改善，在很长一段时刻大家挑选呆在家里，为了尽可能的复原场景，咱们有针对性地去寻觅相符合的心情板。

为了更好烘托出气氛，咱们特别挑选了当下十分盛行的3D风格视觉，经过构造一个相对实在的空间，增强用户代入感。

2. 故事安排

做好一个规划项目，也是在讲一个故事。故事主线要明晰，故事的情节开展、人物设置都要以主线为根底，这样了解起来就更容易：

因为疫情的影响（时刻），咱们的用户（人物），只能呆在家里（地点），百无聊赖之际（起因），掏出了手机并打开了 JOOX 听音乐、看直播（结果），然后很愉快地度过了一天（结果）。依据咱们的故事去构思规划，经过故事去表达用户与 JOOX 的联络。

故事主线明晰后，在要害节点去调集用户的心情也很重要。

著名的“峰终规律”

如果在一段体会的高峰和结束是愉悦的，那么整个环节体会的感受就是愉悦的。所以在故事初步必定要用一些特殊手法去吸引用户的注意力，不管是交互办法，仍是创新的效果玩法，让用户先留下来，再经过故事头绪让用户一步一步往下走，最后完成整个体会流程。

关于峰终规律的具体解释：

3. 计划草图

画草图是一个十分快速验证 ideas 的办法，在前期创意阶段合作内容的展现上，作出一个基本的判别，特别是关于多言语适配的时分，如果咱们在前期能把这些问题考虑进去，那在后面改稿的时分，将会更加挥洒自如。

关于总结类的 H5 项目，内容的展现与数据的出现，永远都是排在第一位。咱们一切的规划办法与战略都是环绕内容展现来打造，为了更好地杰出咱们的数据内容，在一开始去构思整个故事时，就需求进行草图模仿，为内容留下足够的空间。

计划草图模仿

4. 场景建立

在故事安排的时分，经过场景化来构建用户在家里听音乐的实在状况。拟人化手法，咱们用品牌 IP 形象 JOJO 来代表产品，像一个朋友相同陪同着用户，经过与用户的互动，达到一同玩的气氛。

品牌IP形象JOJO与用户互动的主场景

在确定主场景之后，依据咱们之前画的草图，做一个对“故事”的复原，一同为了杰出品牌的特征与属性，在场景中参加 JOOX 独有的音乐元素，添加品牌认知。

场景构建的一同，也需求对终究动画效果有一个简单的考虑，不能比及一切页面规划都确定之后再来考虑怎么做动画，更早的纳入计划，才能在自我博弈中不断地反思，不断地完善思路，终究达到一个理想的效果。

5. 颜色

合适的配色能够直观地传达主题风格，为了营建温馨的家庭气氛，采用了暖色的布景作为咱们的主色基调，用咱们的品牌绿进行点缀和比照，强调品牌性情，杰出要害信息展现。再辅之以小面积黄色比照，来对整个画面的调合，以此来达到主体杰出、性情明显、调性明晰。

6. 字体

产品覆盖了六个国家与区域，使用多种言语，可能在某一个国家就需求适配三种主流言语，多言语也是进程当中一个十分大的应战。

如何战胜在多言语场景中去做规划？

• 提早了解内容，并找到相应的团队提早获取翻译资料，再结合场景进行编列；
• 多言语的适配不太合适杂乱的场景规划，所以“简单”是咱们的基本准则；
• 变量文本是多言语展现的定时炸弹，在排版上要多预留空间。所以多言语的适配做得好与差，将直接决议“木桶效应”的短板在哪里。

每种字体的排列规则略有差异，例如下图，相同的文案，不同字符的长度以及不同的行高，如果遇到变量的文本，情况就会愈加杂乱。

7. 页面规划

依据项目前期，心情版、故事安排、颜色、字体等剖析，终究出现咱们静态效果。整个规划精约为主，全体的气氛以平缓、温暖为主。内容优先，在确保内容展现的情况下，去传递规划理念。

在这里每个页面都有品牌IP形像JOJO，它是咱们的品牌头绪

8. 交互/动画

JOOX是一个比较年轻化的产品，除了咱们在场景构建、故事编列等方面需求多花精力之外，风趣的动画效果必不可少，能够串联起咱们的每个小场景，使整个故事头绪一气呵成。

咱们的品牌 IP 形象 JOJO，在每个页面都做了相关，用它支撑起主线头绪，起到承上启下的效果，能更好地吸引用户，引导他们阅览下去。

整个动画采用一镜到底的办法，JOJO 随着页面的滑动，而跳动到下一页相应的位置，它的长处是用户能够沉浸式体会，顺着头绪往下走，削减中间环节的流失率。

品牌IP形像JOJO的运动轨道

在动画制作的进程中，节奏也很重要，节奏的改变将会直接带动用户心情的改变。依据主题需求运用节奏，辅助提高整个视觉观感品质，这样的动画才是有意义的。

动画速率的改变曲线

在保留了主页的根底上，取消了“下一步”的按钮，loading加载完之后，先进入P0主页逗留必定的时刻，再自动跳转到P1数据页，从后期的数据反馈来看，在这一步的数据，提高十分大。

9. 音乐

音乐无国界，不同调性的音乐就像不同调性的香水给人不同的感受，从而影响用户的心情。一首符合主题的布景音乐不仅能如虎添翼，更是构建情感衔接的核心。

咱们把音乐的节奏和心情表达为三类，节奏：快→中→慢；心情：欢乐→明快→平缓。这样更加直观，且进一步把规模缩小，经过排列组合很快能找到方针音乐。因为疫情的原因，全体的气氛仍是以平缓的、温暖的为主。所以咱们终究敲定的计划是“慢→平缓”。

音乐节奏和心情之间的对应联络

10. 终究效果出现

经过对主题调性的剖析，到每一个小的规划细节的把控，制作出了终究的效果。

11. 物料输出

相关物料，闪屏、引流 banner，以及共享到 ins、facebook 等途径的模板。

总结

1. 数据收回

吸取了过往的经历，在一些数据流失比较大的环节，规划上做了优化调整，终究的数据表现仍是比较的不错，一些核心方针有十分显著的提高。

作为一个国际化产品，推进规划落地时，所面临的困难与应战要比单一商场要大许多，但解决问题的办法是相通的，不要害怕，从最根底的底层问题去着手剖析。

不同区域的用户使用习气有所差异，咱们方针是寻觅共性，用大家都能看得懂、听懂的办法，影响用户来达到共鸣，比方：布景音乐就是一个很好的情感衔接器。

做好一个规划项目，就好比讲一个故事，但这仅仅一种表达战略，意图是让咱们用户能够更好的了解咱们传递的内容。所以咱们在讲故事的时分不能本末倒置，至少关于这种盘点类的H5，必定是内容优先。

撰文：Alic

主创团队：腾讯 IXD

优设网引荐您重视“ 腾讯规划” 大众号，第一时刻获取腾讯的规划办法论：

（本文仅授权优设网发布，转载请访问“腾讯规划”大众号，点击“联络咱们”，取得官方授权）