QQ音乐年终盘点H5设计总结:音乐与色彩的次元幻想

2016年是一个H5满天飞的年代,如何在众多牛气的H5中脱颖而出,留住用户关注和让朋友圈永无休止的不停传播呢?这也是一枚骚气且不隐忍的运营设计师一直研究琢磨的课题。这里拿QQ音乐年终盘点H5为例来解析下我对H5的次元幻想。


2016年是一个H5满天飞的年代,如何在众多牛气的H5中脱颖而出,留住用户关注和让朋友圈永无休止的不停传播呢?这也是一枚骚气且不隐忍的运营设计师一直研究琢磨的课题。这里拿QQ音乐年终盘点H5为例来解析下我对H5的次元幻想。

QQ音乐年终盘点H5设计总结:音乐与色彩的次元幻想

1. 给QQ音乐加点颜色

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

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

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

QQ音乐年终盘点H5设计总结:音乐与色彩的次元幻想

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

这是我们这次盘点的最终确立的交互模型图:

QQ音乐年终盘点H5设计总结:音乐与色彩的次元幻想

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

QQ音乐年终盘点H5设计总结:音乐与色彩的次元幻想

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

QQ音乐年终盘点H5设计总结:音乐与色彩的次元幻想

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

QQ音乐年终盘点H5设计总结:音乐与色彩的次元幻想

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

QQ音乐年终盘点H5设计总结:音乐与色彩的次元幻想

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

QQ音乐年终盘点H5设计总结:音乐与色彩的次元幻想

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

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

QQ音乐年终盘点H5设计总结:音乐与色彩的次元幻想

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

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

QQ音乐年终盘点H5设计总结:音乐与色彩的次元幻想

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

QQ音乐年终盘点H5设计总结:音乐与色彩的次元幻想

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

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

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

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

QQ音乐年终盘点H5设计总结:音乐与色彩的次元幻想

QQ音乐年终盘点H5设计总结:音乐与色彩的次元幻想

4. 关于这次的重磅魔性图——DIY自己的个性海报

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

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

QQ音乐年终盘点H5设计总结:音乐与色彩的次元幻想

QQ音乐年终盘点H5设计总结:音乐与色彩的次元幻想

QQ音乐年终盘点H5设计总结:音乐与色彩的次元幻想

QQ音乐年终盘点H5设计总结:音乐与色彩的次元幻想

QQ音乐年终盘点H5设计总结:音乐与色彩的次元幻想

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

  1. 有适合复古怀旧用户的——魔性复古大转盘
  2. 有适合前卫时尚用户的——蓝色星际大嘴唇
  3. 有适合美式波普文化的——插画彩虹波点风
  4. 有适合简洁文艺清新的——漫画吉米素雅风

然后根据整体H5设计的风格,将魔性图模块的UI风格继续延续和统一,让用户感觉在整个音乐的异次元空间遨游并且制作出属于自己标签的音乐动态海报。

5. 上线反馈总结

在设计师和开发GG们连续修改五天五夜的各种大大小小的BUG,我们这次的宠儿终于在2017/1/9正式出街了,从这次的设计——上线——反馈来看,截止11.15,个人年终盘点(年度音乐秀)上线4.5天的数据来看:

(1)数据

日访问峰值PV达336万;单日访问PV高达400W,二次传播后客态访问PV占12%;

进入页面的用户,39%的访问PV会发起播放行为,即使年度歌单在最后一页才出现,仍有14.2%的PV会查看歌单,保存歌单的PV比例占3.2% 进入首页开始浏览过程中,触发分享的转化率为3.4%(仅统计点击页面分享按钮,不含截图分享)

主态访问的用户,有意愿制作封面的PV占比高达70%;75%是从封面页进入,进入制作封面之后,更换图片率为61%,保存图片率29%。

(2)反馈

微博多为截取手机屏幕进行分享,好评居多,主要反馈集中点:

  1. 好评,感慨最爱的是谁谁谁;表示会一直支持QQ音乐;惊喜找到口味相同的好友;总结很好
  2. 中性态度,顺便说比较少用QQ音乐,专门安装QQ音乐看盘点
  3. 差评,没有竞品好,诸如没有歌曲/数据不准(这次盘点只统计了移动端)

这次的音乐年终盘点的H5对开发、设计、前端、后台都是一个全新突破性的尝试,虽然在制作修复BUG中遇到了很多小插曲,但是大家都是坚持最终的信念走到了最后,在大家共同的努力下我们一起完成了这次音乐年终盘点的H5制作,在这里我真心感谢一起奋战一个月的队友们,感谢你们!让我们共同努力并迎接2017更多更难的挑战!

 

本文由 @ Anny 原创发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/24159/

(0)
CatherineCatherine
上一篇 2017-05-07 14:46
下一篇 2017-05-07 16:41

相关推荐

  • 用户体验是一门玄学秘籍

    Part 01 - 用户体验和用户体验设计关于“用户体验”这个词,很多刚入行的新人都觉得它玄之又玄,妙不可言。一方面是不知道他具体到底是什么,就好像那是一块理想地,看不见也摸不着,另一方面呢糟糕的用户体验,作为用户是能清晰感觉到它的存在。所以呢,在这里,会围绕“用户体验”这个词做一个科普性质的解释和综述,希望对初学者一些小小的帮助。1.1 什么是用户体验?用户体验的定义有很多种,我比较倾向的解释是:“用户体验是人对于使用一个产品、系统、...

    2018-02-22
  • 从产品需求角度,看设计的5层需求金字塔

    举例来说:人们在满足基本的温饱后,才会追求身体健康、安全的住所,接着要求社会地位等等,文艺一点来讲,人如果连追求高尚的权利都没有又何谈高尚呢?举例来说:我刚加入团队的时候,由于需要做大量整改设计,有一些小需求设计到产品设计,会立马询问程序员的开发难易度,并且选择最简单快速的方案,但事后却发现功能点没有想全,更重要的是频繁的打扰降低了开发组程序员的工作的节奏。

    2017-05-16
  • 即将开课!6周,快速玩转axure,同时提升产品和交互能力

    前段时间,一位朋友因为原型不太过关,被老板委婉提醒了。我这位朋友的状况不是特例,原型是产品经理最基础的技能,如果不过关,后果太可怕了!最后给老板留下的印象:这人产品能力不行,每天加班就为改原型,产出太低。想成为靠谱、高薪的产品经理?第一步得提高Axure原型能力!起点学院&腾讯课堂联合打造给产品经理的Axure课程已有1868位同学学习,学习效果显著Axure零基础也能学,学完画出规范原型产品思维和交互贯穿全程,学完告别画图经理通过6周...

    2018-04-08
  • 亲历经验!没有学位和工作经验要怎么找到UX设计的工作?

    Tiger, Run! :我已经做了几个月的交互设计 师了,有不少人非常好奇想知道「没学历、没工作经验的我是如何找到工作的」。随着市场的逐渐饱合,我想分享一下我的故事,来鼓励那些没有任何设计经验、HCI(人机交互)学历的人,得以继续追求自己的梦想。

    2017-07-01
  • 设计规范 | 组件控件结构体系—加载类

    本文作者将加载划分为6种类型,分别适用于不同的场景,各有优缺点。设计师在设计时,可以根据用户的使用场景和环境设计适合的加载。

    2017-08-04
  • 解析「交互设计七大定律」在设计中的应用(上篇)

    交互设计之父阿兰·库珀说过这样一句话:“除非有更好的选择,否则就遵从标准”;在交互设计领域中,有很多被时间和前人验证过的设计法则,这些法则是从用户的行为逻辑中总结出来的,掌握这些法则能让我们迅速有效的完成自己的设计,接下来,笔者通过一些实例来解析下这些原则在设计中的应用~由于文章有点长,影响阅读体验,本文将分为上下两篇来发~一费茨定律(Fitts’ Law)1、费茨定律(Fitts’ Law)简介费茨定律是由保罗·费茨(Paul M. ...

    2018-02-03
  • 院士谭铁牛:人工智能的10件大事和10大趋势

    8月26日至27日,2016中国人工智能大会(CCAI 2016)在北京召开,在26日的主题报告环节,中国科学院副院长、中国科学院院士、中国人工智能学会副理事长谭铁牛先生做了题为《关于人工智能发展的思考》的主题演讲。

    2016-08-31
  • 超实用的移动Web六大设计心法

    「我有个改变世界的点子,就差做个app了。」
    「这是我们的商业计划书,虽然还没有开始推广,但我们真的击中了用户的痛点。总之,先做个app吧。」

    2017-05-30
  • 聊聊UI界面中搜索入口的设计

    搜索几乎是现在所有网站,APP甚至操作系统的标配,不论是电商还是论坛等等。它是一个站内给用户直接到达目的地的通道,起到了一个引导用户走向的重要作用。在不同的系统,不同用途的网站上搜索呈现的方式都有所不同。

    2017-05-16
  • 交互总结篇(一):框架与布局

    上篇文章里面简单介绍了一下关于交互设计分析的三维度,即框架、流程和状态;这里就不做特殊介绍了,详细内容请见《三个维度,解析产品的交互设计》。而本文作为交互设计总结篇的第一篇——框架布局篇,主要是系统地整理一下交互框架设计所需要考虑到的方方面面。框架是整个或部分系统的可重用设计,表现为一组抽象构件及构件实例间交互的方法。

    2017-04-28