QQ音乐5.0全新设计过程要点解析

QQ音乐5.0全新设计过程要点解析

【编者按】不久前，QQ音乐推出了5.0版本。 新版本的视觉设计突出了音乐元素的表达，在品牌感上有了新的突破。 为了分析改版过程，腾讯ISUX发布了《QQ音乐V5：星空设定》一文，从框架、UI、画质、动画等方面分享了.0的设计过程和思考。 全文如下：

欢迎加入CSDN用户体验交流群：进行行业讨论。

悄悄地，QQ音乐陪伴你十年。 从PC互联网时代到移动互联网时代，QQ音乐一直在探索和坚持简约时尚的设计语言。 经过几次迭代，面向内容的页面布局略显保守。 新版视觉在品牌元素中加入，突出音乐元素的表达，试图以全新的视角诠释简约时尚的设计语言。

如今的手机应用软件设计已经不再是简单地遵循手机系统设计，具有个性和品牌感的产品会更受用户喜爱。 通过用户调研，我们也了解了用户对个性化界面的需求，比如炫酷的皮肤、大图模式、动画设计等。 产品和设计希望新版视觉在个性化和品牌感上有所突破。 一方面可以满足用户的需求，另一方面也可以充分考虑一体化设计，解决多终端适配问题。

接下来，我们将从框架、UI、画质、动画等方面分享5.0的设计过程和我们的思考。

以前的版本更注重内容，缺乏音乐元素。 在新版本中，不仅仅是在内容上，我们也希望在视觉上给用户带来更宁静的音乐体验。 在播放页面，我们还原了传统“唱片”的表情，以及真实唱片的旋转、切换动画，让界面更具活力。 用户不再觉得它是一排播放按钮，而是一台自动点唱机。

那么如何让记录更加真实生动呢？ 透明覆盖模糊背景+平面记录+平滑效果的组合。 既保持了用户惯用的简约时尚风格，又不用担心加入拟物化的厚重质感而过时。

沉浸在音乐中应该是什么样的场景？ —— 咖啡厅/酒吧/演唱会/夜空/……

在探索了夜空可以营造用户享受音乐氛围的各种场景后，结合众多用户对夜间模式的需求，新版QQ音乐首次推出了“炫黑模式”。 为了更好的搭配品牌绿色，我们选择了深蓝色作为主色调，暖色调作为轻微的辅助光影，然后将主背景压平，让界面显得通透而不厚重。

我们设计了以夜空为主题的预热页面和欢迎页面。 预热阶段使用了星光组合的QQ音乐LOGO，星光由弱变亮，最终到达了上线时星光熠熠的欢迎页面。 湛蓝的星空，闪耀的星光，还有正在分享音乐的两人，让用户一打开欢迎页面就感受到了夜空的氛围。

当然，我们也考虑到深色模式不适合某些场景或用户喜好。 我们依然保留传统的“简单模式”，支持一键切换。 也正式迈出了后续个性化定制皮肤的第一步。

随着6 / 6 plus的出现，当720/1080p等大屏幕逐渐成为主流时，我们考虑了更多与屏幕空间利用相关的问题。 在UI上，我们精简了大部分的单元格样式和多余的线条，简化了排版结构。 全局详情页统一了导航栏，减少了页面的碎片感，让画面更有沉浸感。 音乐应该是时尚的、有个性的。 新版歌手页面为歌手图片预留了更大的展示区域，尽可能展现歌手的个性化表现。

细节打磨

新版QQ音乐继续进一步细化视觉细节体验。 首次尝试使用更修长时尚的字体——兰亭细黑体。 相较于系统字体，界面会显得更整洁简洁，阅读更舒适。 此外，在图标方面，也延续了原有的线条设计，进行了精雕细琢，对部分图标进行了重绘，将每个图标简化、简化。

动作设计

在琳琅满目的App的今天，如何在设计上脱颖而出是设计师需要考虑的，不仅要合理展示产品结构和功能，更重要的是要思考App能否做到简洁易懂，同时给予网友新奇感？

动态设计正在成为移动设计中极其重要和必要的元素。

QQ音乐5.0在原有单一枯燥、死气沉沉的操作方式上，加入了灵动、真实的动感效果。

1.快速切歌

作为新版框架中的常驻模块，用户可以通过底部滑动对任意页面进行操作。 左右歌曲切换采用手势和动画的方式，减少了外部切换图标的数量，方便了操作，大大减少了以往需要进入播放页面切换歌曲的时间。

2.模拟真实记录

也就是说，我们要保持简单扁平化的视觉风格，但又不想加入与界面不匹配的拟物化纹理，那么如何才能让记录的表现更加逼真呢？ 只能通过表现细腻的动态效果来解决。 但是有一个细节你可能没有注意到——播放页面的记录速度大约是播放页面的记录速度的两倍。 为了在视觉上同步圆盘旋转，调整了角速度同步，保证圆盘旋转的线速度一致，所以大圆盘的感知转速更适中。

3.切换到播放页面

为了让播放页面来回切换的流程，设计采用了动画的形式。 底层、信息层和相册封面层使用不同的轨迹和动画原理。 通过物理动力学原理，设计师和开发同仁通过对模拟物体运动轨迹的研究和速度的不断调整，可以模拟出舒适真实的动画感受。

4.全局切换

用户不仅可以通过点击顶部导航来切换页面，还可以在页面可控区域添加左右滑动手势切换页面，大大降低了使用效率，快捷方便。

响应式交互、有意义的过渡、令人愉悦的细节。 掌握了这些特点后，会起到锦上添花的作用。

精心安排的动态设计，更有效地吸引用户注意力，让用户专注于不同的操作步骤，体验不同的流程； 有意义的动态设计可以让用户在界面变化和元素重新排列的过程中感觉更舒适。 整体体验更加舒适。

总结

QQ音乐5.0全新设计来了。 打开页面可以看到繁星点点的夜空。 希望新版本能给大家耳目一新的感觉。 以上就是项目中的一些过程和心得。 QQ音乐的设计者一直在努力为用户带来更酷、更易用的音乐收听软件。 （编辑：陈秋歌）

原文来自：腾讯ISUX