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

相关推荐

  • 美术丨创意Game可用性微交互设计:视觉空间微交互设计

    文章导言(悄然你的特别吸引了我)有些设计看起来简洁,有些设计看起来杂乱无章;有些设计让您快速找到想要的信息,有些设计却让您置身于迷宫之中;为什么要绞尽脑汁写这些细节上的差异?用户在使用产品时是怎么样的心理活动?这将是我分享的一些个人见解。前言:致敬设计学研书籍作者们,有机会写《创意Game可用性微交互设计》总结。如题我们将进行一场有趣的游戏可用性微交互设计讨论。考虑并不是写一本书来高谈阔论,而交互又无处不在: 版面、颜色、纹理、动画、文...

    2018-02-28
  • 这场UED界的大会堪比最近最火爆的雄安楼市

    2011年,阿里UED委员会的几位童鞋一商量,想给互联网的UED们一个搭交流学习的场子,就发起了第一届UCAN。如今,UCAN已经从阿里的UED的大团建发展成了国内最热门的设计大会之一。2017届的UCAN今天在阿里巴巴西溪园区召开,小编在现场看到走道都坐着人,800多人的场子,10000人报名,快赶上抢房摇号的阵仗了。报名的观众不但专业齐全,视觉、交互、用研、工程师、产品经理一个不拉,而且来自的公司阵容也很强大,腾讯、百度、亚马逊……...

    2018-02-01
  • 国家地理:创新设计世界地图APP-炫酷、叼、高度还原设计方案。

    本文首发在iamue.com(我是UE网) 头条号同步发布 来看一看别人家的UEUi 国家地理做了一个世界地图app,动效狂拽酷炫叼炸天。关键是app线上高度还原了设计的动画效果,而且非常流畅。一起来欣赏一下吧 然后默默的收…

    2015-06-25
  • 简单快速的可用性测试

    2014年11月11日   艾欧交互设计-用户体验 导语:可用性测试是改善产品的最佳方式之一,这一点,在内部已经是不争的共识。只是由于用研人手总是不足,所以为了能让各个部门的同事能更快速地展开一些研究和测试的工作…

    2014-11-11
  • 为你的App增加WiFi认证检测,让用户体验更加丝滑

    前言前段时间在上海坐地铁时连接了花生地铁WIFI,打开QQ音乐开始听歌,QQ音乐居然给了我一个"WIFI认证提醒"的弹窗,点击认证就跳转到了花生地铁WIFI的认证页,之后顺利联网成功,体验非常爽。作为一名iOS开发,不禁思考这个是怎么做到的呢?忘记WIFI重新连接后,打开手机里各个应用轮番测试一遍,发现QQ音乐、QQ、QQ空间三个应用都做了比较好的WIFI认证提示:成功提示.png而其它的大应用如微信、手淘、支付宝、钉钉、美团、点评、爱...

    2018-02-07
  • 帮你创造优质移动端UI的7项最佳实践

    在几年前,关于网页和APP谁做主导的话题还很热,但是现在看来,APP无疑已经是为用户提供内容和服务的主流了,它是用户最信赖的内容和功能的呈现方式。于是,随之而来的问题就是如何在竞争无比激烈的市场中,让你的APP在诸多同类中脱颖而出,并且让用户留在你的APP当中。留白常常被认为是一个活跃的元素,而非被动存在的间隙和背景。—— Jan Tschichold小贴士:有效的移动端APP信息推送策略是采用多种类型的信息推送机制,推送通知,电子邮件,应用内通知,新闻Feed等。多样化的信息推送通过合理的协调,创造良好的用户体验。

    2017-05-15
  • 对话式交互设计流程

    上一篇文章介绍了自然对话的基础概念,学习了谷歌对于人类自然对话的研究和理解。本文将通过一个简单的案例来介绍谷歌推荐的对话式交互设计流程,以及本人对该流程与常规的体验设计流程异同之处的对比分析。设计流程1.选择适合的使用场景对话式交互界面的使用场景通常是简单直观的。当考虑任务场景的时候会想到游戏,因为游戏是低风险的。但是游戏界面的设计必须要能够满足用户的期望,以免使用户感到无聊。猜数字的小游戏可以作为对话式界面设计的一个很好的例子,不要求...

    2018-03-31
  • 像一个APP设计者一样去思考

    随着移动互联网发展,移动应用程序视觉设计流行风向推陈出新。 现阶段我需要深入了解新型智能硬件设备,它通常意味着改变我们的思维方式——即使这意味着远离我们之前的网页设计技巧。 我的职业生涯就像许多UI设计者一…

    2015-04-13
  • 交互设计中的5项视觉指导原则

    【分类】经验分类:经验/观点/自译原作者: Jerry Cao翻译:@ifecIFEC团队译文UI中国旗下翻译团队,由热爱翻译热爱分享的设计师组成。IFEC译者翻译国外行业热文、规范文档。欢迎关注我们的官方微博 @ifec, 加入我们…

    2017-08-04
  • 真相:到底什么是交互设计

    数十万互联网从业者的共同关注!作者:Mr汤进,微信公共号ID:chuangshe_space作者原创并投稿早读课,转载请联系作者。一、前话5月1日在我和小伙伴们一起维护的原创微信公共号“创设空间”:chuangshe_space中向关注的…

    2017-08-02