全民K歌 7.0「更好看」— 设计思考与总结

全民 K 歌7.0 版本全新上线，让歌声“更好看！...





（引言）全民 K 歌近期迎来了焕然一新的7.0 版本，以“7.0更好看”为主题正式上线。「更好看」主要体现在两方面：首先是视觉体验的全面升级——K 歌的 UI界面走简约路线，整体更清新和年轻化了；更重要的是，我们也把 K 歌里的内容变得「更好看」了——让每一个用户的音频作品作品都能华丽转身，蜕变为更好看的视频内容。

很高兴有机会在这里，和关注全民 K 歌的朋友聊聊我们打造本次 7.0 升级背后的的设计思维。希望透过我们的分享，大家能看到本次升级的更多亮点，同时对平台的蜕变有更深一层的理解。7.0的诞生源于我们近期对K 歌用户需求演变的密切关注，以及对平台上仍在打磨的用户痛点的深刻反思。我们发现，近期大家分享和收听录唱作品的方式有了很大的变化，人们越来越喜欢通过视频的形式来创作和分享音乐作品，因此用户录唱结束后都会想配上一段视频才算完成一个作品。同时，我们也洞察到，现有的体验框架及视觉风格需要有所调整，才能满足用户创作、分享、社交及个性化上不断演进的需求。

因此，我们根据深入的操作场景推演，结合大量的数据分析，对 K 歌平台做了全新的设计探索。那么本次 K 歌的设计核心究竟有哪些面向？我们将其总结为「清晰的交互框架」、「简约的视觉风格」和「视频化的录唱体验」三大部分：

1. 清晰的交互框架产品的框架如同人之骨骼，十分关键，既要支撑产品为用户提供服务，也要满足用户的核心诉求。因此，我们遵照先造骨骼后造肌肉的研发模式，从K歌的交互框架开始了我们7.0的打造。作为一款已经活跃五年的国民级兴趣社交产品，全民K歌这些年来不断壮大，其功能玩法紧跟着用户诉求的演变不断推陈出新。而随着玩法越来越丰富，功能也越来越多，用户仿佛进入了一个琳琅满目的房间，但要找起想要的东西时就会有些费劲。因此，更清晰的框架成为了这次改版的首要任务。

A. 核心价值



让我们先抛开日益增加的玩法，回归初心。全民K歌，作为一款围绕唱歌的兴趣社交产品，其核心离不开三件事情：创造内容、消费内容、社交关系。这三件事情在我们的产品里相辅相成，让用户产生了对这个社区的粘性。

B. 框架定义&梳理

明确产品核心后，我们首先从逻辑层开始分析问题，将app现有功能入口做了一轮逻辑树梳理，重点排查出功能多处入口、信息呈现臃肿、一致性不足等问题。而在数据层面，我们对框架各大页面以及用户核心路径的数据进行了完整细致的分析和整理，得出了一些非常关键的结论，以充分指导新框架的设定。

因此，本次7.0框架要做的就是通过一个清晰的结构呈现产品核心围绕的三件事情。结合逻辑和数据的分析，我们将新的框架定义如下：



有了这个清晰的框架布局，再对我们的功能入口进行梳理，一切就顺理成章了。下图即我们最新设计的7.0版本的交互主框架。可以看到，用户在每一个主tab，都有非常明确的指引，在第一个动态tab，用户可以消费自己关系链、平台优质作品以及实时的直播内容；在第二个tab，用户可以满足自身社交诉求、找同好一起玩耍，这里目前聚集了我们服务于社交玩法的歌房、群聊、家族等能力，后续还可以拓展呈现社交玩法向的其他功能；第三个tab，简单纯粹而清晰，就是让用户能够找到想唱的歌。这三个tab清晰地对应了内容消费、社交关系、创造内容三件事情。



在这个梳理过程中，我们对已有入口的对应tab定位进行了一些调整，例如，根据具体功能场景，我们将点歌台原本头部的一些玩法向入口，像开启直播、创建歌房、抢麦等，挪动到了对应场景，以此降低点歌台的负担。对于新用户来说，这可能是清晰的，但对于习惯了原路径的老用户而言，这需要一个适应过程。因此，我们在对应位置加入了引导说明，希望能帮助老用户更快适应。我们希望以这样清晰有序的呈现，让K歌更好地为用户服务，达到一种“需要的东西都就在手边”的体验。

C. 演变历程

回顾K歌的创立历程，从框架的层面而言，1.0阶段的游戏化框架支撑产品以强社交属性切入市场；3.0阶段，随着内容积累、社交诉求发展，用户不再局限于关系链内的内容消费，于是我们将整体框架调整为经典的社区型结构，实现社交平台转型；到了7.0，迎合视频化的产品定位，我们希望能够通过清晰的框架来强化社交属性，深耕社区氛围，让用户在这里无论是唱还是玩，都可以简单直接地触达。



2. 简约的视觉风格



如同引言里提到的，全民 K 歌 7.0版本可以说是优化最彻底的一次改版。这一次，我们对平台上近 600 个页面进行了地毯式的排查、梳理和升级——这种作法虽然看似旷日废时，但我们相信唯有这么做，才能让用户明显地感受到焕然一新。作为一个新的里程碑，全民 K 歌 7.0在视觉风格上是怎么个「新」法？这些变化又是出于怎么样原因呢？下面四个核心理念，可以很清楚地勾勒出本次 7.0 的设计哲学：

A. 风格：年轻化



首先是风格，大家应该明显地发现本次 7.0 气质变「年轻」了，「年轻」一词在我们灰度的用户期望调研中是最常被提及的关键词。本次 7.0 的视觉「年轻化」是伴随著产品型态的重新定位而生的。这里需要特别强调的是，我们的「年轻化」并不是要创造一种专门为年轻人服务的风格，反之，我们在创造的是一种可以服务全年龄段的潮流感。然而，要创造一种可以服务中老年用户、同时又能展现潮流感的风格并不容易。经过多轮的探索，我们将风格锁定在中性、大方又明快的视觉语言当中。因此，在色彩计划上我们选用了经典的「红白黑」组合来确保各年龄段的接受度；紧接着，我们透过把字号加大、把字体加粗来形朔平面设计的潮流感，同时回避中老年用户总觉得字太小的问题；最后，新Logo的设计也是保留清晰明快的纯色块。

B. 界面：内容即一切



其次是界面的焦点回归内容。作为国内领先的K歌社交娱乐App，用户生产的内容是我们珍贵的资产，因此在界面中最大化的突出内容，使其被高度探索，从而形成“探索、激励、更多内容被产出”的增益循环。因此，我们将「内容即一切」作为本次 7.0 的重点优化策略之一。以动态界面为例，大家可以发现在 7.0 版本里，我们透过去除导航栏上抢眼的的红色背景、削弱 Tab 框架感，以及最大化贴文的布局，让用户在刷好友分享的歌曲以及多媒体动态时，可以更具焦于好友的贴文，并且刷得更爽快。这样的策略将会贯彻在 7.0 的所有界面中。

C. 系统化：秩序即品质



第三是提高视觉的一致性。一致性对用户体验及研发团队协做都有关键性的影响。对于用户体验而言，它能提升操作效率、降低学习成本，同时加强用户对产品的信赖感及辨识度；而对于团队协作来说，不管是开发还是设计团队，都能透过规范性的组件，有效提升工作效率。全民 K 歌在 6.0 版本时，就把一致性列为重点优化项目，因此我们在 7.0 设定了更高的目标：除了将公共组件高度应用在所有界面，同时还要全面提升图标以及标签设计的一致性，藉此给全民 K 歌用户带来高度秩序感的视觉体验。经过设计和开发团队的重点资源投入，全民 K 歌终于能将二十余组的公共组件大面积铺开在 Android、iOS 及 Hippy的三个开发平台中，同时将语意、尺寸、型态重新规范打磨后的 385 个图标应用于所有界面中。对于全民 K 歌这个高速成长、需求高速迭代的产品而言，从零开始的公共组件接入并非易事，本次的全面铺开会是开发上相当关键的里程碑。

 

D. 定制化：清晰便是美



最后是针对用户对视觉效果的个性化需求提供定制化选择。全民 K 歌是个用户年龄段特别广的平台，每个年龄段对于「信息展现方式」以及「浏览效率强弱」上的需求不尽相同。举例来说，年龄较长的用户可能特别在意文字的显示大小，他们希望一切信息越大越好，密集的小字集合会让他们感到不安；反之，年轻人状况就完全不同了，他们注重的是浏览内容的效率，喜欢滑手机滑得爽快，透过繁琐操作来浏览更多内容会让他们觉得体验不友好。因此，K 歌团队面临的课题是：如何用一套界面来满足各年龄段的需求？綜合以上思考，我们在 7.0启动了「定制化」策略——面对各个圈层用户五花八门的需求，提供「定制化」的选项供所有用户自由选用，并以「清晰便是美」这个最中性原则，作为提供给用户各种选项的指导方针。以录唱为例，我们在歌词展示界面准备了标准、大、特大三种字号，调大调小用户自行选择，对于就喜欢看大字来演唱的用户来说，他们可以选用特大字号，确保录唱过程有清晰的文字体验；另一方面，对于更注重打分器或录唱背景的小伙伴来说，他们可以选择标准字号显示，不让大字号影响录唱背景的显示空间。

3. 视频化的录唱体验



相对于音频，视频在单位时间能接收到更多的有效信息，也更有吸引力。用户需要越来越多的个性化表达，也更喜爱丰富的内容展示；再加上5G时代的到来，视频化是未来K歌的趋势，故而此次K歌改版的难点和重点之一便是拥抱变化，由音频消费向视频消费升级。

从录制到发布，我们做了诸多探索以丰富作品的形式，力尽满足K歌用户多样化的自我表达。视频作品方面，我们力求让用户足够高效便捷地产出制作，提供多样的MV模版让其视频作品更丰富化。音频作品方面，我们优化了发布流程，让用户能将音频作品转化为可视化的视频作品。



据调查，普通用户相册中的照片的数量远多于视频，这是因为视频的制作门槛高昂。而全民K歌用户发布音频作品的数量也远远多于视频作品的。为了让大多数用户的录唱产出都能轻松视频化，我们为不同诉求的用户分别设计了以下三条路径。

A. 歌词频谱，让音频作品秒变视频作品



第一条路径是通过音频可视化模版默认拉取歌曲的专辑封面，识别专辑封面的色调同时结合音频转化成实时频谱和实时的歌词。用户通过简单选择即可将自己的音频作品转化为动态的歌词频谱海报，实现最低门槛的音频可视化转换。



每一款模版可以根据用户作品的歌曲封面自动识别封面的魔法色，再根据识别的魔法色生成同色系的不同颜色，用于底色和波形。同一个模版会因用户的作品歌曲不同而生成不同的效果，从而使模版的效果千人千面。



频谱以及歌词的效果不仅增强了画面的可看性，还能将音频的节奏感通过画面的形式呈现出来，让视觉的感知与作品的音频交相辉映。歌词频谱功能是一种以最低成本将音频作品可视化的方式。

B. 音乐影集，让音频作品尽情展现自我

 



第二条路径是音乐影集，针对拥有许多照片素材的用户。用户可以上传多张照片，结合自己的音频作品自动生成歌词与图片切换效果匹配的音乐影集视频。对于生成的音乐影集视频，我们做了取舍，舍弃了频谱波形，更加注重用户本身照片的呈现。以用户自身的照片素材为主要展示内容，结合图片的专场切换，以及有趣的歌词动效给予视觉呈现，满足用户用歌声和画面展示自我的诉求。

C. 视频MV，为你的音频作品配上视频画面

第三条路径是视频MV。如果你演唱的歌曲有官方mv资源，我们会自动为你的作品配上官方MV画面，与此同时，你也可以上传本地视频为你的音频作配上喜爱的视频画面。

三条路径三种渠道服务不同的诉求，以不同的方式更好的将用户的音频作品转化为可视化的视频作品，让用户更好地消费，不仅仅能获得听觉上的享受，也能同步获取视觉上的满足，使K歌实现从音频化到视频化的消费转型。未来我们会拓展更多音频可视化的玩法和更丰富的视频编辑能力，以帮助用户更方便地生产优质的音频/视频作品



未来展望

最后，想跟所有热爱全民 K 歌的朋友说声感谢，因为有各位一路的支持才有现在 7.0 的诞生，我们也才有机会在这里把 7.0 全新升级的思考分享给大家。未来，我们会继续用心倾听用户需求，并精心打磨 UI/UX 细节，努力在产品体验提升上取得更多进展。当然，思考体验设计的步伐从未停歇，欢迎所有关注 7.0 的朋友继续体验和反馈。

    关注 Micu设计