QQ音乐V5 : 星设定

XY

悄然间,QQ音乐已陪伴大家十个年头,从PC互联网时代走到了移动互联网时代QQ音乐一直探索和坚持着简约时尚的设计语言。几经迭代,以内容为导向的页面排版略显保守,新版的视觉在品牌元素加入,突出音乐元素的表达,尝试从新的角度诠释简约时尚的设计语言。

如今的移动应用软件设计已经不再是简单跟随手机系统设计,有个性有品牌感的产品会更加受到用户喜欢。我们通过用户调研,也了解到用户对个性化界面的诉求,比如酷炫的皮肤,大图模式和动画的设计。产品和设计希望新版视觉在个性化和品牌感上有所突破,一方面满足用户诉求,另一方面也能全面考虑一体化设计,解决多终端适配问题。

QQmusic_v5_1

接下来,我们将从框架、UI、图文品质和动画几个方面,分享5.0设计过程和我们的思考。

以往版本更多是以内容为导向的排版缺乏音乐元素的表现,在新版本里,不仅在内容上,我们更希望在视觉上给用户带来更沉静的音乐感受,在播放页里我们还原了传统[唱片]的表现形式,以及真实唱片的旋转及切换动画,给予界面更多生命力,用户不再觉得它是一排播放按钮,而是点唱机。

那么如何让唱片表现得更多真实生动?结合通透封面模糊背景+扁平化唱片+平滑动效。既给用户保持一惯的简洁时尚风格,也不需担心增加拟物化的厚重质感而过时。

QQmusic_v5_2

沉浸享受音乐应该是怎样的场景?  —— 咖啡厅 / 酒吧 / 演唱会 / 夜空 / ……

QQmusic_v5_3

经过多种场景探索,夜空更能给用户营造享受音乐的氛围,也结合众多用户对夜间模式的需求,新版QQ音乐首次推出「炫黑模式」,为了更好地搭配品牌绿色,我们选择了深青蓝色做主色调,用暖色做为轻微辅助光影,再经过扁平化处理成主背景,让界面显得通透而不厚重。

我们设计了夜空为主题的预热页面和欢迎页面。在预热的阶段,使用了星光组合的QQ音乐LOGO,星光由弱变亮,最后达到上线时群星闪耀的欢迎页面。幽蓝的星空、闪耀的星光、两个正在分享音乐的人,让用户在打开欢迎页的时候产生夜空氛围的情感代入。

QQmusic_v5_4

当然我们还考虑在某些场景不适合炫黑模式或是用户的喜好,我们依然保留了传统的「简约模式」,并支持一键切换。也为后续个性化自定义皮肤正式跨出了第一步。

QQmusic_v5_5

随着iPhone 6 / 6 plus的出现, 及Android 720/1080p等大屏幕逐渐成为主流时,我们更多考虑了屏幕空间利用的相关问题。UI上我们精减了大部份cell的样式及多余的线条,减化了排版结构,全局的详情页统一打通了导航栏,减少页面割裂感,让画面更沉浸。音乐本应时尚个性,新版本的歌手页为歌手图预留了更大的展示区域,尽可能展示歌手的个性化表现。

QQmusic_v5_6

细节打磨

新版QQ音乐不断为视觉细节体验进一步打磨,我们首次尝试使用更纤细时尚的字体 – 兰亭细黑体。相比于系统字体会让界面显得更工整简洁,阅读更为舒心。另外在图标方面,也延续了原来的线型设计进行精雕细琢,部份图标更是重新绘制,化繁为简,力求每个图标简洁,易懂。

QQmusic_v5_7

 

动效设计

如今玲琅满目的App中,如何在设计中脱颖而出是需要设计师考虑的,不仅是合理的展示产品结构与功能,更重要的是思考App是否能做到简洁易懂的同时,又给用户新颖感?

动效设计正成为移动端设计中一个极为重要、非常必要的组成要素。

QQ音乐5.0在原先单一枯燥毫无生气的操作模式上,增加灵动而真实的动效。

1.MiniPlayer快速切歌

Miniplayer在新版框架中作为常驻模块,用户在任何页面内都可以通过滑动底部进行操作。而左右切歌利用手势和动画,减少外置切换icon的同时,使操作便捷,大大减少以往需进入播放页切歌的时间。

p1

2.模拟真实唱片

即要保持简洁扁平的视觉风格,又不希望加入拟物质感与界面格格不入,那怎样才能让唱片的表现更真实?只有通过动效细腻的表现来解决。但有个细节可能大家还没能注意到--播放页的唱片比MiniPlayer的唱片转速约慢一倍左右。为了在视觉上唱片转动同步,通过调整角速度同步以保证唱片转动的线速度一致,所以大唱片的感观转速更为缓和。

QQmusic_v5_8
p2_2

 

3.MiniPlayer切换至播放页

为了使得Miniplayer和播放页来回切换的流程度,设计采用了分成动画的形式。底层、信息层和唱片封面层用不同的轨迹和动画原理,通过物理学动力原理,设计师和开发同事,通过对模拟物体运动轨迹研究和速度不断的调整,模拟出舒服真实的动画感受。

p5_2

4.全局切换

用户不仅可以通过点击顶部导航进行页面切换,新增左右滑动手势,可以在页面可控区域进行页面之间的转换,大大减少使用效率,快速便捷。

响应式的互动,充满意味的过度,令人愉悦的细节。掌握好这些特征之后,会起到锦上添花的作用。

精心编排的动效设计能更为有效地吸引用户的注意力,并让用户专注于操作不同的步骤,经历不同的流程;有意味的动效设计能在界面变化、元素重新排列过程中,让整体体验更加舒适。

p3_2
p4_2

 

总结

QQ音乐5.0全新设计来了,开启页面繁星璀璨的夜空中,期待新版会给您耳目一新的感受。以上是项目中的一些过程和体会,为用户带来更酷炫更易用的听歌软件QQ音乐的设计师一直努力着。

Tags: , , , ,

XY
XY
网页大图片应用技巧浅析
上一遍
那些过目不忘的H5页面
下一遍
29,265
QQ空间 新浪微博 Facebook Google+

相关推荐

留下你的想法吧

  1. 冬源 says:

    关于MiniPlayer切换至播放页的动效,从下面的轨迹曲线来看,我觉得第二种切换方式更轻盈,更干净利索,第三种的反弹抖动效果反而有点拖泥带水的感觉。可否讲一下这里面的方案抉择过程?

    • XY XY says:

      感谢对细节的关注,起初我们有尝试使用第二种平滑方式,由于我们的唱片设置了转动,经多次调试,缩放的过程与唱片转动的衔接使用了微回弹便更能更顺畅地过度,避免了由停顿到旋转启动的卡顿点。望继续关注,谢谢

  2. 傅瑞栋 says:

    最近因为我是歌手,从虾米转回QQ音乐,刚好赶上新版设计,觉得很赞,直接删了虾米,不过一直奇怪为何QQ音乐不做评论,音乐也是需要交流的,你会从其中发现新的东西

  3. XY says:

    我觉得QQ音乐UI的过于繁琐了,过于华丽,还是不够简洁。举个例子,我妈叫她用,上手太慢了。但是网易音乐她却学会了。

  4. adhemas says:

    QQ音乐的UI是我个人最喜欢的,喜欢上一版的绿色,现在的也喜欢

  5. allline says:

    这个版本 更新后 大家集体吐槽 这种双导航的设计 黑色背景 基本看到啥内容了 背景比内容还跳跃 这是什么思路
    比如大屏手机 其实更多的需要是能 左右滑动切换导航 但是两个导航放在一起 只能一个,qq音乐的支持的顶部第一级 其实那个频率用起来不是很高,二级要用手去点,很难点 哇,这交互怎么用都不满意

  6. eddy says:

    这版QQ音乐,哎,我更新后直接删了装回百度音乐了,颜色太重啦,有压抑感,界面图片文字很多,信息量很多啊,所以看上去就有点纷繁杂乱,建议以后能够有机会优化下~

    • XY XY says:

      可以尝试切换简约模式,感谢反馈,图文方面我们会继续优化。

  7. vieri122 says:

    设计的有点过了,感觉点击屏幕任何一个地方都会弹出一个东西。不够平滑!

  8. 七弦 says:

    看起来高大上,但是杂乱无比。还是虾米好用。

  9. Iris says:

    从图文的描述感觉细节打磨得很用心,尤其喜欢开启的背景图片,非常高大上。但确实有一种信息量很大,内容忒多的感觉。还木有实际体验,晚上回去试试再反馈用户体验。

  10. 总体我还是比较喜欢。duang~

  11. 陈林 says:

    还是觉得网易云音乐的好用,UI设计更接近一种播放器

  12. 谭姝婷 says:

    我还是比较喜欢上版的qq音乐,这版的颜色太暗沉了,布局的转变页有些不习惯

  13. 翻开 says:

    设计的什么玩意,android 5.0上格格不入,看看人家网易云音乐的设计吧。

  14. 安柏 says:

    只想提一点,播放器界面那个专辑封面转动真的好么?古老的胶片或cd转动那是要读取才能播放,而且胶片上啥也没有。转动封面就表示有胶片或cd音乐感了?未必。。。

  15. 小狼 says:

    播放界面左上角的返回icon怎么是朝下的啊,是不是粗心了额