【强烈推荐】
唱我想唱——全民K歌8.0录唱模块设计总结 - 图1

前言

全民K歌在最近迎来了全新的8.0版本。借此机会,“旧城”录唱模块也迎来它的大焕新。本次录唱改版围绕「更统一」的生产框架、「更丰富」的视觉反馈、「更多元」的唱歌体验,对该模块进行了界面重构与体验探索。

一、旧版本存在的挑战

随着新功能的不断引入,加上原本录唱模块累积的一些体验问题,使得这次“焕新”变得势在必行。对此,我们对问题进行了梳理,重点整理出页面框架拓展性差、演唱中反馈较弱、调音操作复杂、唱歌玩法单一等体验问题。

挑战一 :「如何规整?」一级分类不明确,布局拓展性差

用户在录唱前需要在模式选择页面决定录唱形式,但旧的模式选择界面的一级分类并不明确,存在概念之间相互交叉的现象;并且页面拓展性差,现有结构难以承载新功能和玩法。

唱我想唱——全民K歌8.0录唱模块设计总结 - 图2

挑战二 :「如何强化反馈?」演唱进程中反馈较弱,难以对用户产生激励

在旧版K歌中,midi命中、单句反馈等效果表现较弱,且单句反馈各级之间视觉差异度较小,反馈维度单一,给用户带来的激励感不足。

唱我想唱——全民K歌8.0录唱模块设计总结 - 图3

挑战三 :「如何简化发布?」调音操作复杂,理解成本高

调音台是用户流失的关键节点之一,既要承载音效的调节,也要支持画面模板的更换。旧调音台的音效调节与画面调节区域相互杂糅,功能分区混乱,导致用户对音效和画面认知混淆。同时,随着业务的发展,该页面内功能逐渐堆叠冗杂,增加了用户的操作成本。

唱我想唱——全民K歌8.0录唱模块设计总结 - 图4

挑战四 :「如何拓展体验?」唱歌玩法单一,难以持续吸引用户

用户似乎已经很难从常规录唱中再获得新鲜感了,那如何创新?如何给用户带来不一样的录唱体验也成为了本次改版的一个重点。

唱我想唱——全民K歌8.0录唱模块设计总结 - 图5

二、改版目标

面对上述挑战,我们思考该如何打造K歌8.0的录唱体验。为此,提出了以下几个目标:

  1. 框架定义:打造统一的生产架构
  2. 功能优化:增强录唱反馈,提升爽感;简化发布操作,降低理解成本
  3. 业务赋能:探索更多唱歌玩法,给录唱带来更多可能性

唱我想唱——全民K歌8.0录唱模块设计总结 - 图6

三、设计方案

3.1 打造统一的生产架构

随着业务的发展,新功能不断扩充,如果没有定义好框架会导致结构散乱和无法扩展等问题。因此,改版的第一步就是定义统一的生产架构,使其可拓展、规范化、有条理并且可快速迭代优化。

3.1.1 重新定义一级分类

首先我们对K歌现有的功能进行重新梳理,让一级分类涵盖不同的演唱形式:独唱、合唱和歌房唱,而片段唱则调整为合唱和独唱的基础功能。

唱我想唱——全民K歌8.0录唱模块设计总结 - 图7

3.1.2 模块化组件

根据统计,在模式页面的功能多达十余种,并且还在慢慢扩展中。为了避免功能无序堆叠,让页面布局更加合理地去展示多种信息也是此次改版的重点。

将模块进行组件化,可以在稳定的页面结构下,针对不同的唱法,为用户提供不同的功能,保证了页面的拓展性和稳定性。我们将页面内的信息进行了梳理,将页面布局进行重新规划,建立模块化组件,分为核心内容区和辅助功能区两大模块。

核心内容区主要承载不同演唱形式的主要内容,独唱主要展示歌词和效果,合唱和歌房唱则展示作品内容。

唱我想唱——全民K歌8.0录唱模块设计总结 - 图8

辅助区域主要是为不同模式提供功能补充,例如演唱相关的伴奏品质、曲风、升降调以及画面效果相关的皮肤、道具等。

唱我想唱——全民K歌8.0录唱模块设计总结 - 图9

3.1.3 统一各类生产链路

在确定主录唱框架后,我们对平台内各类生产流程也做了规范。首先是对生产方式进行重新分类,将视频上传、视频录制和清唱整合成「自由创作」,路径更清晰明确。其次,将各类生产流程的框架也进行了统一,减少割裂感。

唱我想唱——全民K歌8.0录唱模块设计总结 - 图10

3.2 元素用色收归,突出演唱中的反馈,给用户带来爽感和激励

反馈作为用户在演唱中接收到的重要信息。如何降低其他元素的干扰?如何增强演唱中的反馈?如何给用户带来更直观的激励感?在本次改版中,我们进行了以下几个方向的处理。

3.2.1 统一品牌色的应用

旧版录唱一共配置了13款魔法色以及其对应的演唱反馈,这导致整体色彩过于混乱、品牌感丢失。于是在新改版的录唱中,我们在保留专辑封面模糊背景的同时,统一对品牌颜色的进行收归和应用。

唱我想唱——全民K歌8.0录唱模块设计总结 - 图11

在整体延续用户视觉习惯的前提下,将过去的13套魔法色进行了映射收归。

唱我想唱——全民K歌8.0录唱模块设计总结 - 图12

在魔法色背景规则制定后,我们拉取了平台TOP30的歌曲封面进行测试,以验证品牌颜色与不同专辑封面图的匹配度。

唱我想唱——全民K歌8.0录唱模块设计总结 - 图13

3.2.2 强化反馈效果

MIDI作为演唱过程中,用户自我评估的重要一环。在本次改版设计中,通过连续粒子的发射效果,加强演唱MIDI的击中感,给用户带来更直观的命中反馈。

唱我想唱——全民K歌8.0录唱模块设计总结 - 图14

在不同的专辑封面背景下,如何让Combo信息既能匹配不同的背景颜色,又能在界面中突出展示?于是在动效的设计上以「光感」为出发点设计了一套反馈样式。

3.2.3 引入连击维度

在延续过去评价体系的基础上,这次改版加入了连击的反馈。当单句perfect连击累计到一定次数时,就会触发屏幕两侧的连击反馈,且随着连击不断积累,反馈会随之增强。

3.3 优化发布环节

3.3.1 优化页面结构

旧调音台的调音和调模板分区混乱,概念相互杂糅,这导致用户对声音和画面调节的认知混淆。所以在新版调音台,将两个概念明确区分开,将页面分为画面调节和音效调节两个区域,避免定义和操作不清楚的问题。

唱我想唱——全民K歌8.0录唱模块设计总结 - 图15

3.3.2 简化调音操作

通过对老调音台各模块的数据分析,发现功能堆叠,层级多以及不常用功能占用头部空间两大主要问题。根据用户使用习惯,将功能区域分为常用调音区和拓展区,将功能进行简化,减少用户操作成本。

唱我想唱——全民K歌8.0录唱模块设计总结 - 图16

3.3.3 提升换模版效率

将模板套装用横划的形式进行切换,方便用户快速选择。同时,根据之前的用研结果,将模板重新定义为背景+动效,更符合用户认知。

唱我想唱——全民K歌8.0录唱模块设计总结 - 图17

3.4 拓展更多唱歌玩法,给录唱带来更多可能性

除了基础录唱外,本次录唱改版还拓展了如录唱皮肤、KK秀等创意玩法。后续也将持续运营和创新,敬请期待!

四、结语

全民K歌作为用户逃逸现实世界的小小角落,在8.0的设计中围绕更简洁、更有趣的方向在持续探索。皮肤、KK秀等功能后期迭代持续进行中,有任何想法建议,欢迎在评论区进行留言、讨论和交流哦~

唱我想唱——全民K歌8.0录唱模块设计总结 - 图18

原创设计团队: 腾讯音乐娱乐MUX

唱我想唱——全民K歌8.0录唱模块设计总结 - 图19

MUX,腾讯音乐用户体验设计团队,负责QQ音乐、全民K歌、WeSing、MOO音乐等产品的用户体验设计。MUX是一群年轻有趣潮流追求极致的人,专注坚持创新探索,打造专业有温度的设计服务,欢迎与我们产生更多的互动。


推 阅

荐 读

探索用Figma做游戏UI设计

重新审视图标中的细节

大屏数字人设计实践

【ADT】关于深色模式设计的思考

Colorpod 色彩工具 - 探索之路

《和平精英》机甲主题设计 —— 与高达并肩,披甲上阵!

第一届TDW,你还记得吗?第七届TDW 2022即将来袭!

唱我想唱——全民K歌8.0录唱模块设计总结 - 图20