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

由于疫情的影响（时间），我们的用户（人物），只能呆在家里（地点），百无聊赖之际（起因），掏出了手机并打开了 JOOX 听音乐、看直播（结果），然后很愉快地度过了一天（结果）。根据我们的故事去构思设计，通过故事去表达用户与 JOOX 的关系。
故事主线清晰后，在关键节点去调动用户的情绪也很重要。

文章插图
△ 著名的“峰终定律”
如果在一段体验的高峰和结尾是愉悦的，那么整个环节体验的感受就是愉悦的。所以在故事开端一定要用一些特殊手法去吸引用户的注意力，不管是交互方式，还是创新的效果玩法，让用户先留下来，再通过故事线索让用户一步一步往下走，最后完成整个体验流程。
3. 方案草图画草图是一个非常快速验证 ideas 的方法，在前期创意阶段配合内容的展示上，作出一个基本的判断，特别是对于多语言适配的时候，如果我们在前期能把这些问题考虑进去，那在后面改稿的时候，将会更加游刃有余。
对于总结类的 H5 项目，内容的展示与数据的呈现，永远都是排在第一位。我们所有的设计方法与策略都是围绕内容展示来打造，为了更好地突出我们的数据内容，在一开始去构思整个故事时，就需要进行草图模拟，为内容留下足够的空间。

文章插图
△ 方案草图模拟
4. 场景搭建在故事安排的时候，通过场景化来构建用户在家里听音乐的真实状态。拟人化手法，我们用品牌 IP 形象 JOJO 来代表产品，像一个朋友一样陪伴着用户，通过与用户的互动，达到一起玩的氛围。

文章插图
△ 品牌IP形象JOJO与用户互动的主场景
在确定主场景之后，根据我们之前画的草图，做一个对“故事”的还原，同时为了突出品牌的特征与属性，在场景中加入 JOOX 独有的音乐元素，增加品牌认知。
场景构建的同时，也需要对最终动画效果有一个简单的思考，不能等到所有页面设计都确定之后再来思考怎么做动画，更早的纳入计划，才能在自我博弈中不断地反思，不断地完善思路，最终达到一个理想的效果。

文章插图
5. 色彩适合的配色能够直观地传达主题风格，为了营造温馨的家庭氛围，采用了暖色的背景作为我们的主色基调，用我们的品牌绿进行点缀和对比，强调品牌性格，突出关键信息展示。再辅之以小面积黄色对比，来对整个画面的调合，以此来达到主体突出、性格鲜明、调性明确。

文章插图
6. 字体产品覆盖了六个国家与地区，使用多种语言，可能在某一个国家就需要适配三种主流语言，多言语也是过程当中一个非常大的挑战。
如何克服在多语言场景中去做设计？