征集网锐志网络淘途找素材上91123RF图片库
创意在线首页
官方微博:腾讯
平面设计交互设计CG动漫工业设计建筑环境数码影像创意搜
 首页大赛征集资讯教程画廊访谈作品集创企同盟设计招聘人才专区竞赛台专题论吧 找素材看酷站设计网址库
资讯 创意征集台
当前位置:首页 > 资讯 > 互 联 网 > 正文
一场音乐与色彩的次元幻想—对话QQ音乐设计团队
作者: 来源: 发表时间:2017-2-21 13:23:44 浏览:
导语:QQ音乐年终盘点H5设计与解析

  

  2017年开年,QQ音乐团队带用户在幻彩缤纷的奇妙空间里完成了一年的音乐大数据盘点,这个形式独特的盘点H5,用炫丽的色彩和3D立体空间来展现奇妙的异次元音乐空间,且融入了较多的互动式触发要盘点的用户个人信息,在盘点完自己的音乐数据之余塑造自己的音乐标签。有人被色彩绚丽的设计所吸引,有人被极具共鸣的内容打动而分享,刷屏就是这么的情不自禁!上线发布后,日访问峰值PV达336万;单日访问PV高达400W,二次传播后客态访问PV占12%。

  H5刷屏期间也出现过众多分析的文章,但大多从传播和营销的角度进行解密。这一次则是与QQ音乐团队进行了一次对话,就本次H5的设计构思以及用户体验进行交流,以满足用户对音乐与色彩的次元幻想,并给予不一样的视角,本篇文章全部是干货……

  1.给QQ音乐加点颜色

  音乐给人什么感觉,在QQ音乐团队的眼中,它其实是一个潮流,活泼,热情,趣味,个性化的一个泛娱乐典范。那么这样一个APP的年终盘点大数据应该用什么形式来诠释才可以博眼球,取悦于用户,强化朋友圈社交,微博不停的转发传播呢?QQ音乐团队花了很多时间去脑暴去思考,想各种载体去传承诠释这个音乐的世界是什么样子的。

  围绕着个人数据,温馨,小文艺,回忆,个性化,强社交等等关键词,团队脑暴了各种方案。有温馨浪漫的音乐CD小屋,有互动性超强的配对小游戏.....各种形式的脑暴方案,创意百出。最后经过重重筛选,确定了这套色彩方案:以一个高饱和度、colorful的极艳丽的色彩语言来作为这次年终盘点的主要创意表达。在其看来,音乐给人们的感觉是流动的,是活泼的,是具有当代潮流色彩的一个情感符号。然而光是有炫丽的色彩表现已经满足不了设计者对有趣的设计追求,所以在这次创意表达中还融入了3D立体空间来展现这个奇妙的音乐空间。

  这是他们找的一些色彩方向性图片作为参考;

  

  经讨论,设计者确定了这个异次元音乐空间作为载体,带用户在这个次元幻想里完成这一年的音乐大数据盘点,还融入了较多的互动式触发以及朋友圈的社交传播,使得整个H5显得更加有趣味性。

  这是此次盘点的最终确立的交互模型图

  

  那么经过团队头脑风暴,梳理好了交互模型图,重担就全部交给视觉设计师了,各路神仙那段时间每天说的最多的话就是:“就靠你们视觉了”,视觉设计师表示压力山大啊。为了这次的视觉效果好,响应老板的大号召,一定要让视觉设计出彩,也充分的融入音乐的元素,视觉设计师在不断地脑暴手绘和参考形式中将色彩和细节进一步优化。

  

  他们将与音乐相关的单品元素和气氛感觉都以手绘的形式罗列出来,进行一个拆散组合。在造型、色彩、材质里面找了很多的变化和诚意小细节。这是首页的异次元空间呈现:

  

  首页是进入整个APP的重中之重,包括形式、载体、字体都是设计师反复琢磨尝试无数次,无限次打磨出来的结果。

  

  改了无数次的首页视觉表现,总觉的怎么都不高大上,字体用哪个样式好呢?怎样才可以配得起音乐异次元幻想这样一样的定位,于是首页就这样了......

  

  呈现给用户看到的是这样一个视觉效果:

  2.关于360度三维立体空间

  今年设计师和产品一直推动希望可以看到一个和往年不一样的年终盘点,所以在形式独特新颖上面下了不少功夫。采用了C4D的渲染建模来诠释整个三维立体空间,并且以卷轴形式360推进翻看进行视觉展示。

  

  在这个三维的色彩空间中,他们这次做了一个很大的突破,将这次需要盘点的文字信息都以图形化的视觉元素穿插在这个奇幻的三维空间内了,使得整个自定义专辑和文字都融会贯通的穿插在图形中,也以很顺畅的互动式动画触发了要盘点的用户个人信息。

  在3D技术实现方面,设计师们也针对性能和适配的问题上面做了很多的设计取舍。争取做到资源的重复利用,减少内存的占有量以及浏览速度的保证。

  为了可以更好的资源重复利用,设计师将原本背景多变幻彩的 球体装饰做了整合与删减,全部做成了200X140大小的透明底PNG图片进行资源重复组合,这样按组划分的背景装饰物就可以在资源量最小的情况在不断重复的利用多次来实现目前大家所看到的幻彩缤纷的奇妙空间了。这里也帮助整个H5文件大小减少了大约80%,使得H5在运行速度上面顺畅了不少。

  

  3.这里再说说C4D建模的血泪史

  为了这次360全景的异次元空间的效果,团队的设计师妹子们都是现学现卖的C4D功力,还算不错的都完成了任务。

  首先,整个三维空间都以草图的形式画好,并且规划好需要摆放的元件和位置,还有设定好他们的互动式触发,再一步步进行配色和C4D的模型渲染。包括质感的几何元素的组合、材质球的参数、整个画面的配色都是经过反复调试斟酌修改,对视觉来说是这次H5的主要创意设计点。从白膜到勾线绑定材质,最后渲染耗时和精力都是非常巨大的工作量。因为时间紧迫,找个盘点一定要赶在2016年底前出街上线,为团队的女设计师们点赞,不辞辛苦加班加点的完成这次精彩的年终盘点H5设计。

  首页是一个至关重要的设计点,团队在配色和造型的设计上面一直觉得不够完美,精益求精一遍遍的优化,最后呈现给大家看到的是一个从远递进的异次元浮岛,带领用户进入一个全新的音乐幻想空间。缤纷时尚的色彩也刚好吻合了这次主题,魔性复古的音乐潮流地带,时尚又不过时的配色,配以周边星球陨动的悬浮空间感,让整个画面静中有动,栩栩如生。

  

  

  4.关于重磅魔性图—DIY个性海报

  这次H5的主要好玩之处就在于其中有一个很强大的互动社交环节,可以在盘点完自己的音乐数据之余,创作属于自己的音乐海报,这次的魔性图这个功能希望用户自主创作完成社交传播的主动力,让更多的人参与进来,使得这个传播效应最大化。

  确认目标后,输出视觉魔性图DEMO:

  

  

  

  

  

  设计团队秉着魔性的原则,为了适应各种人群,又收到开发内存的影响所以忍痛割爱只能做四款魔性图模板。让大家简单改变自己,制作属于自己的动态GIF音乐海报,塑造自己的音乐标签。

  A.有适合复古怀旧用户的——魔性复古大转盘

  B.有适合前卫时尚用户的——蓝色星际大嘴唇

  C.有适合美式波普文化的——插画彩虹波点风

  D.有适合简洁文艺清新的——漫画吉米素雅风

  然后根据整体H5设计的风格,将魔性图模块的UI风格继续延续和统一,让用户感觉在整个音乐的异次元空间遨游并且制作出属于自己标签的音乐动态海报。以上都是围绕音乐场景和用户互动所展开,为了增加用户粘性,还需要用更加多样化的功能,丰富用户的使用体验。未来,QQ 音乐将通过全新的交互体验实用性的功能以及个性化的音乐场景吸引更多的用户入驻,逐渐形成用户与音乐的强关系链。





在线编辑:52design
本文链接:


推荐阅读:
·第九届中国高校美术(设计)作品学年展 征稿章程
·2017第三届“包豪斯奖”国际设计大赛
·青春唯美插画培训网络远程班正在招生
·创企同盟VIP:网络品牌建设提供商-木兰设计
·“汇聚文创动能,发展天府文化”成都创意设计周将于11月10日开启
·2019 年国际足联女子世界杯会徽和口号正式
·世界最大移动通讯公司 沃达丰(Vodafone)启用新 LOGO
·德国足协公布2024年欧洲杯申办LOGO
免责声明:本站刊载此文不代表同意其说法或描述,仅为提供更多信息。对本文有异议,请联络本站!
转载要求:文章作者及来源信息必需保留。转载之图片、文件请不要盗链本站地址,且不准打上各自站点的水印!

创意素材推荐 矢量 | PSD | 模板 | 高清 | PNG | 网页背景
2009-02-06
韩国站点 素材资源 艺术摄影 游戏娱乐 影视网站 建筑家居 FLASH站 旅游购物 明星网站
设计门户 优秀企业 时尚品牌 象素站点 数码通信 设计公司 汽车网站 国外优秀 儿童网站
个性展示 网站教学 工 作 室 学校教育 卡通漫画 文化艺术 体育运动 美容健身 食品饮料
近期推荐报道 返回首页更多精彩等着你!

行业展会| 北京礼品展原创制胜,礼品渠道商集体上位抢Photoshop| Photoshop制作华丽的2017金边
Photoshop| Photoshop快速消除脸部的痘痘和肤Photoshop| Photoshop制作飘逸的红色彩带字
大赛揭晓| 2016IADA互艺奖终审获奖名单标志设计| 2018世界短池游泳锦标赛会徽、吉祥物发
建筑/环境| 印度故事-《在雾中漫步》互 联 网| 魅族主题美化平台:致力“用户+平台+设计
LOGO大赛| 坪山新区“智慧坪山”标志设计大赛行业展会| marcel wanders新作卵形充气
韩国站点 素材资源 艺术摄影 游戏娱乐 影视网站 建筑家居 FLASH站 旅游购物 明星网站 个性展示 网站教学 工 作 室 学校教育
设计门户 优秀企业 时尚品牌 象素站点 数码通信 设计公司 汽车网站 国外优秀 儿童网站 文化艺术 体育运动 美容健身 食品饮料
网站名称:whaternet
网站地址:http://whaternet.com/
加入时间:2014-8-5 13:59:20
网站名称:mnnaite
网站地址:http://www.mnnaite.com/static/
加入时间:2014-8-5 13:58:07
网站名称:tijuanaflats
网站地址:http://tijuanaflats.com/
加入时间:2014-8-5 13:55:32
网站名称:digital
网站地址:http://production-digital.com/
加入时间:2014-8-5 13:54:45
网站名称:deutschesee
网站地址:http://www.deutschesee.de/
加入时间:2014-8-5 13:51:54
网站名称:kennedy
网站地址:http://www.kennedyandoswald.com/
加入时间:2014-8-5 13:50:57
关于本站 | 联系方式 | 商业服务 | 合作伙伴 | 站点地图 | 免责声明 | 版权声明 | 在线投稿