作为 QQ音乐的深度用户(因为懒所以不想做歌单转移),在最近发布的新版本 5.0 上线后马上开始了日常使用。不谈产品和运营,在设计方面,这次的新版本主要在界面风格、交互方式上有了较大变动。而这些变动,个人认为恰好是当下主流移动端 apps 设计趋势的代表,因此拿出来进行分析和总结。

QQ音乐 5.0

QQ音乐 5.0

毛玻璃和暗色主题

随着 iOS 7 的推出,苹果把主流设计风格带进了大量运用扁平化、毛玻璃效果的趋势。移动端 QQ音乐算是在音乐播放器中率先采用毛玻璃效果的,在旧版本中播放界面已经采用了毛玻璃效果——将专辑封面放大至占满屏幕,并进行较高程度的毛玻璃效果处理。这样带来的好处是播放界面不再千遍一律,背景颜色随专辑封面的改变而改变。

而在 5.0 版本中这种效果更加被运用到整个应用当中。QQ音乐的官方说法把这个暗色主题称作「炫黑主题」,一方面使得整个应用显得更「潮流」和现代,另一方面也解决了夜间模式的缺失。一款用户量达到一定程度的应用,对夜间场景的优化不可避免;而暗色调和毛玻璃效果并不是存在于我们生活中的事物,它是属于这个虚拟世界的,因此风格自然也显得更为现代。

当然,QQ音乐也给那些适应不过来或者不喜欢暗色主题的用户提供了选择,将界面设置为「简约模式」,就可以回到旧版本白色背景风格的主题。

简约模式

但这种风格的缺点也是显而易见的。对于 QQ音乐这些注重运营的产品来说,运营位是不可缺的。但相比之下,暗色主题和运营位显得格格不入,这些图片甚至还抢走了不少对功能的注意力。

为大屏诞生的交互形式

在播放界面中向下拖拽专辑封面,界面就会回到之前正在浏览的页面。或许在专辑列表开始播放歌曲,或许在用「猜你喜欢」播放歌曲,总之执行这个下滑动作,界面就会返回,而且在任意界面点击屏幕下方的播放窗口,就可以进入播放界面。而且在播放窗口中,左右滑动可以切换歌曲。

播放界面和播放窗口

播放界面和播放窗口

在旧版本中,由于在播放界面左右滑动是切换到歌单和歌词页,返回上级页面只能点击左上角的返回按钮。这显然不适合大屏手机,而且 iPhone 的机身下方并没有返回按键。

针对大屏的优化,QQ音乐给出这样一套方案,我觉得是十分不错的。播放界面和其它列表、搜索、运营页面被彻底分开,两者可以通过滑动的交互动作随时切换,类似的例子还可以看看 Darkroom 这款应用。随着屏幕增大,传统点按的效率已经变得十分低,而从屏幕左侧边缘右划返回也不能很好地满足一些功能繁杂的应用。正是普遍屏幕尺寸的增大、用户对智能手机经已熟悉,使得交互方式得以更多创新。

旧版安卓端 QQ音乐

旧版安卓端 QQ音乐

实际上,播放窗口的概念在旧版的安卓客户端已经形成,而 5.0 版本中不仅把安卓和 iOS 端统一,以专辑封面作为交互载体的概念也得到体现——交互动作不仅仅是简单的动作,而是对专辑封面这个物体的操作。

虽然新增的这个交互形式我认为非常实用,但仍有很大的改进空间。在安卓客户端上专辑封面没有从播放界面的大封面缩小到播放窗口的小封面的切换动画,而 iOS 客户端上播放界面的消现也显得很奇怪——从播放窗口切换到播放界面,上方的元素从顶端出现,下方的元素从底部出现,看起来播放窗口只是一个打开播放界面的按钮,而不是播放界面的一个缩小窗口。

按钮跳板和 line icon

除了音乐播放器外,我们还会经常使用到支付宝、微信钱包,甚至淘宝、美团这些应用。它们有的分类繁多,有的功能繁多,但共同点都是把功能以跳板的形式体现。QQ音乐也是一个有代表性的例子,「全部歌曲」、「下载歌曲」、「最近播放」等等这些功能入口,以一个个 line icon 跳板放在首页。

首先,对于这些分类繁杂或功能繁杂的产品,这种跳板的形式确实已经成为一种常用的设计形式。对于用户来说,一开始可能还是眼花缭乱,但随着使用时间增加,常用的入口便形成习惯,打开应用就能凭习惯点击按钮。

QQ音乐 5.0 主界面

QQ音乐 5.0 主界面

按钮的风格也各异,有的会用颜色区分,有的使用 solid icon,有的使用扁平化插画,QQ音乐则使用了 line icon——但这个决定实在不太妙。虽然采用按钮跳板能把同级的功能归纳好,但 QQ音乐的这些功能并不算多。采用 2*3 的跳板未尝不可,line icon 在 iOS 7 发布后变得常见许多,但两者配合起来就使得整个主界面显得很粗糙、不够精致。

第三方字体

由于中文字体的体积普遍偏大,动辄 10M、20M,对于新上架的应用来着庞大的体积或许会影响到用户的下载欲望,没有足够资金的独立开发者也难以承担版权费用。而第三方字体的引入确实能给应用添色,改善用户体验的同时也能进一步建立品牌/应用形象。这需要对用户量、设计费用的投入等多方面的权衡,QQ音乐在这方面又是一个代表,但关于第三方字体就此带过不多展开。


总体来说,QQ音乐这次 5.0 版本的更新,能体现出很多当今移动端 apps 设计趋势,也反映了 QQ音乐对设计的重视至少不会在产品团队里不受待见。新颖的交互方式、率先全局运用的毛玻璃效果等尝试是值得称赞的。

虽然如此,在最终效果上还是显得不够精致,在不少页面中明显犯错。iOS 端的播放界面毛玻璃效果的程度偏低、且与安卓端不统一,暗色主题的搜索页中采用了普通键盘样式显得突兀,这些都让最终效果打上折扣。

播放界面和搜索页

播放界面和搜索页