揭秘QQ音乐业界首创「大咖装」的背后设计过程

 

　　编者按：想看看腾讯的高级设计师都怎么干活?来看看今天这篇揭秘!@腾讯ISUX 在这篇文章中分享了整个设计背后的思考过程，小到一句运营文案，大到每个主题的设计思路，满满当当都是干货，帮设计师们突破美工思维，成为真正专业的设计师。

　　注：本文是设计分享，非软文。

　　QQ音乐明星大咖装终于来了!

　　QQ音乐5.0首次推出炫黑模式，是QQ音乐个性化迈出的第一步。 发布以来用户的肯定与喜爱让我们坚定不移地想要继续挖掘音乐个性化的可能性。音乐不止一种曲调，用户没有唯一个性，QQ音乐可拥有各样的色彩。

　　QQ音乐5.5版本中旨在抓取粉丝心理，借助明星效应，业界首次为铁杆粉和颜控迷们推出明星个性主题 —— 大咖装!誓要掀动整个音乐市场，凸显五彩斑斓的音乐个性。

　　颜控们，啥也别说咩都不怕!前方高流量预警，请直接播放闪瞎双眼!

　　腾讯视频地址：http://v.qq.com

　　大咖装，定个性

　　设计之初我们从定义哪些页面需要并适合个性化入手，将个性化与功能操作相结合，避免单纯的视觉装饰，在不损害基础体验的前提下塑造一体化的个性主题。

　　我们提取各明星最鲜明的品牌符号，设计通用性强并具氛围感的页面底图，奠定基调，确保各页面体验的一致性与连续性。

　　我们从高曝光度考虑，选定了用户最常使用的“我的音乐”六大功能入口，用简洁明确的形象让用户快速识别各明星的品牌符号。

　　我们为建立粉丝与明星之间的关联性，在个人主页与我喜欢资产页的头图区域做了大篇幅的氛围渲染以捕获粉丝的花痴心。

　　我们在个性最大化的同时也考虑了主题实现的高效便捷 —— 9图1主题!每套主题从背景到图标设计，只需9张配图即完成主题装扮，全局主题色，线条，色块，文字实现了代码化灵活设置，主题包大小都控制在0.2～2M之间。5秒即可完成主题切换!

　　以 Michael Jackson主题 为例

　　六个入口个性化设计 + 一张太空全局式背景 + [个人主页] [我喜欢] 个性头图，即完整设置一套主题!

　　大咖装，抓特性

　　每个明星都有其独特的品牌符号，如何挖掘明星的品牌符号并加以利用可从以下3个角度出发。

　　1.抓本质特性，转换为核心图形元素

　　包括人物特性或音乐特性。例如Eason的搞怪表情与夸张的服装造型，邓紫棋的音乐代表作泡沫等特性都可被提取加工，熟悉且有寓意的图形元素可快速捕获粉丝用户的眼球。

　　2.近期动态 ，制造必要的话题性

　　包括音乐动态或花边动态。例如利用周杰伦大婚这一热点事件可以大大提高大咖装品牌的话题性，以便传播与宣传。

　　3.寻找明星印象，感动目标粉丝

　　听粉丝的声音，绘明星印象，可更好的打动用户。例如众妈妈粉心中的TFBoys就像那纯净无暇的大海一般，那么蓝色成为主色调的首选。

　　按照以上方法，我们首波推出BigBang，周杰伦，陈奕迅，Taylor Swift，林俊杰，邓紫棋，TFBoys，MJ等明星个性主题。接下来我们将逐个为大家讲述每一款明星个性主题的创作思路。

　　BigBang

　　BIGBANG，背景图选取BIGBANG最新专辑《MADE》中的《M》，个人主页则选择了独特斜切式结构的照片。六个功能图标对应专辑里面的5个成员形象。视觉上，根据BIGBANG曲风的鲜明特征，底纹采用具有个性潮流的金属质感和燎燎火星作为烘托;在功能图标处理上，搭配喷溅笔刷衬托人物性格。在字体上，去掉饰线结构，让笔画边缘更加锋利，添加切割纹理，使其更具力量感。

　　Taylor Swift

　　霉霉主题从她的最新专辑单曲《Bad Blood》中的MV角色造型中获得灵感，以霉霉帅酷的高清写真作为背景贯穿主题的每个页面，让你时时刻刻都能与女神面对面近距离接触，同时首页入口ICON辅以霉霉专用字体。

　　TFboys

　　TFBoys的主题为最新主打歌曲《宠爱》的造型，鲜明的天空蓝为主调，凸显青春洋溢轻松欢快画面，以多彩色块为DNA合成T.F.B 并贯穿整个主题基调。同时，也融合了一些特殊含义的元素，如四叶草/千纸鹤/音符等，Fans们能快速找到熟悉感。

　　周杰伦的主题，选取周杰伦最新专辑《鞋子特大号》中周董弹钢琴的海报做为背景图， 六个功能图标对应都是来自周杰伦以往专辑中的元素;

　　陈奕迅一贯以夸张、风趣、幽默、可爱的表情及夸张的服饰造型出现在其专辑写真中，在最新专辑中尤为明显。这也是其显著的视觉符号;

　　邓紫棋, 名字里有“紫”字的美女十分适合梦幻的紫色调。设计灵感来自GEM的成名歌曲《泡沫》，在彩色泡沫包围下，幻化为美丽的人鱼公主。图标设计主要选用了GEM经典的造型，当然还有粉丝们熟悉的“金鱼”;

　　林俊杰在其新专辑《新地球GENESIS》和演唱会《时线TIMELINE》上，将科幻元素融入音乐，带给了我们一种全新的视听感受。这次的林俊杰主题皮肤，同样延续了他在音乐中所采用的科幻主题，以科技感的光影线条做为设计元素;

　　鹿晗做为新生代青春偶像的代表，潮流时尚是他的ICON,但看过他在《甜蜜蜜》MV中的表现，会发现素颜的他另有一种干净清澈的温暖感觉，所以这套主题设计以《甜蜜蜜》为灵感，力求展现出鹿晗青春、温暖、纯真的浪漫情怀。

　　大咖装，要造势

　　一个知识渊博的人需要得体的妆容去提升气场，一个强大的功能需要恰当的包装和有力的宣传才能更好的体现其价值。 大咖装预约宣传活动在上线3天后就取得了总票数500W+，实际参与人数超过92W的傲娇成绩，这跟前期极高投入度的包装运营策划是分不开的。

　　1. 设计品牌口号，为品牌宣传做准备

　　在这个语言日趋娱乐与调侃化的时代，设计之初我们希望使用时下网络流行词或流行语气来贴近用户的生活，提升品牌口号的感染性。用琅琅上口且具号召性的短语传递主旨，用宣言的形式来表达音乐态度。

　　所以我们有了第一版品牌口号：个性主题，死劲装!

　　但随后我们发现这句极具煽动性的流行语并没有凸显个性主题的核心特点--明星!这种未能准确传递功能特性的牛逼口号终究只能怒毙!所以我们结合明星特性，保留“装”这一动词的笃定且自信的语气，有了我们第二版品牌名--“大咖装”，用名词塑造了一个完整准确的品牌记忆点。随后搭配设计了更朗朗上口的品牌口号“大咖装，添星妆”，名词短语结合动词口号，满足各场景中的宣传需要。 随后，为了配合运营活动我们还设计了一系列分页口号：

　　“大咖装，装杰伦无与伦比

　　大咖装，装BIGBANG引领潮流

　　大咖装，装TFBOYS向青春起航 ”

　　在表达音乐态度和明星印象的同时不断重复品牌名，加深用户记忆，让品牌深入人心。

　　2. 投票赚人气

　　预热活动1期以支持你的偶像，看看谁的呼声高为主题，让用户投票支持喜欢明星赢得免费试用机会，一场声势浩大的粉丝大战正在蓄势待发。

　　3. 挑逗粉丝再传播

　　预热活动1期后半段按计划在部分明星部落中引逗粉丝，首先选取了实时排名第一的霉霉和潜力较大的BigBang、TFBoys。利用粉丝天然的攀比心理引爆新一轮粉丝大战。

　　4. 深入挑逗，曝视频

　　在粉丝战进行的如火如荼的时候，逐步曝光视频片段，一刻不能松懈地喜迎用户，为上线造势!

　　5. 宣传视频的精心制作大大提升了大咖装的品质与宣传的力度

　　大咖装视频

　　视频的作用是让平面的主题让用户第一次看到的时候有更深刻的印象。如何让设计图丰满立体起来，如何让单独的元素和丰富的明星视觉资源建立联系，如何让静止的平面稿空间化和动态化，是这次视频主要要解决的问题。

　　腾讯视频地址：http://v.qq.com/page/u/i/p/u01611av2ip.html

　　视频分镜

　　在制作之前，首先以分镜确认整体视频展示结构和单个部分的画面呈现。

　　(部分参考图)

　　(最终平面分镜)

　　音效制作

　　音乐是在Adiojungle上购买的完整音乐，配合节奏去做整体的动画剪辑。

　　开场部分为了引入画面和主题，在KK和Ivy的帮助下录制输出了“Wanna something Special?”一句女声，让整个视频的音频呈现更加丰富。

　　大咖装，添星妆

　　大咖装为QQ音乐个性化迈出重要一步，探索更多音乐气质与用户价值碰撞的可能性QQ音乐5.5 从预约到上线仅仅一周时间，得到了用户的强烈反馈，并希望发布更多明星主题。针对用户诉求QQ音乐已经开启对明星主题诉求统计，QQ音乐的粉丝时代正式到来!