QQ音乐5.0全新设计过程要点解析
不久前，QQ音乐推出了5.0版本。新版的视觉设计更突出音乐元素的表达，在品牌感上有了新的突破。 为了分析本次改（gǎi）版过程，腾讯ISUX发（fā）布了（le）《QQ音（yīn）乐（lè）V5 : 星设定》一文， 从框架、UI、图文品质和动画几个方（fāng）面，分（fèn）享了QQ5.0设（shè）计过程和他们的思考。全文如下：
悄然间，QQ音乐已陪伴大家十个年（nián）头，从PC互（hù）联网时代走（zǒu）到了（le）移动互联网时代QQ音乐一直探索和坚持着简约时（shí）尚的设计语（yǔ）言（yán）。几经迭代，重庆（qìng）多媒体（tǐ）公司以内容为导向的页面排版略（luè）显保守，新版（bǎn）的视觉在品牌元素加入，突出音乐元素的表达，尝试从新的角度诠释简约时尚的设计语言（yán）。
如今的移（yí）动应用软件设计已经不再（zài）是简单跟随手机系（xì）统设（shè）计，有个性（xìng）有品牌（pái）感的产品会更加受（shòu）到用户（hù）喜欢。我们通过用户调（diào）研，也了解到用（yòng）户对个性（xìng）化界面的（de）诉求（qiú），比如酷炫的皮肤，大（dà）图模式（shì）和（hé）动（dòng）画的设计。产（chǎn）品和设计希望新版视（shì）觉（jiào）在个性（xìng）化（huà）和品牌感上（shàng）有所突破，一方面满足用户诉求，另一（yī）方面也能全面考虑一体化设计（jì），解决多终端适配（pèi）问题。
接下来，我们（men）将从框架（jià）、UI、图文（wén）品质和动画几个方（fāng）面，分享5.0设计过程和我们的思考。
以往版本更多是（shì）以内容为导向的（de）排版缺乏音乐元素的（de）表现，在新版本里，不仅在内（nèi）容上（shàng），我们（men）更希望在视觉上给用户（hù）带来更沉静的音乐感受，在（zài）播放页里我们还原了（le）传统“唱片”的表现形式，以及真（zhēn）实（shí）唱片的旋转及（jí）切换动画，给（gěi）予（yǔ）界面（miàn）更多生命力，用户不再觉得它是（shì）一排播放按钮，而是点唱机。
那么如何让唱（chàng）片表现得更多真实生动（dòng）？结合通（tōng）透封面模糊背景+扁平化唱片（piàn）+平（píng）滑动效。既给用户保持一惯的简洁（jié）时尚风格，也（yě）不需担心增加（jiā）拟（nǐ）物化的厚重质感（gǎn）而过时（shí）。
沉（chén）浸（jìn）享（xiǎng）受音乐（lè）应该是怎样（yàng）的场景？ —— 咖啡厅 / 酒吧 / 演唱会 / 夜空（kōng） / ……
经过多（duō）种场景探索，夜空更能给用户营造享受音乐的氛围，也（yě）结合（hé）众多用户对夜间模式的需求，重庆影视公司（sī）新版QQ音乐首次推出「炫（xuàn）黑模式（shì）」，为了更好地搭配品牌绿色，我们选择了深青蓝色（sè）做主色调，用暖（nuǎn）色做为轻微辅助光影，再经（jīng）过扁平化（huà）处理成主背（bèi）景，让界（jiè）面显得（dé）通（tōng）透而不（bú）厚重（chóng）。
我（wǒ）们设计了夜空为（wéi）主题的预热页面和欢迎页面。在预热的阶段，使用了星光组合的QQ音乐LOGO，星光由弱变亮，最后达（dá）到上（shàng）线（xiàn）时群星闪耀的欢迎页面。幽蓝的星空、闪耀的星光（guāng）、两个正在分（fèn）享音乐（lè）的人，让用户在打开欢迎页的时候（hòu）产生夜空氛围的情感代入。
当然我（wǒ）们还考（kǎo）虑在（zài）某些场景不适合炫黑模式或是（shì）用户（hù）的（de）喜好，我们依然保留了（le）传统的（de）「简约模式」，并支持一键切换。也（yě）为后续个性化自定义皮肤正式跨出了（le）第一步。
随着iphoness 6 / 6 plus的出现, 及androids 720/1080p等大屏幕逐渐成为主流（liú）时，我（wǒ）们更多考虑（lǜ）了屏幕空间利用的相关问题。UI上我们精减了大部份cell的样式及多余的线条，减化了排版结构（gòu），全（quán）局的详情页统一打通了导航栏，减少页（yè）面（miàn）割裂感，让画面更沉浸。音乐本应时（shí）尚（shàng）个性，新版（bǎn）本的歌（gē）手页为歌（gē）手图预（yù）留了（le）更（gèng）大的展示区域，尽可能展示（shì）歌手的（de）个性（xìng）化表现。
细节打磨（mó）
新版QQ音乐不断（duàn）为视（shì）觉细节体验进一步打磨，我们首次（cì）尝试使用更纤细时尚（shàng）的字体 – 兰亭细（xì）黑体。相（xiàng）比于系统字体会让界面显得更工整简洁，阅读更为（wéi）舒（shū）心。另外（wài）在图（tú）标（biāo）方面，也延续了原（yuán）来的线型设计进行精雕（diāo）细琢，部份图标更（gèng）是重新（xīn）绘制，化繁为简（jiǎn），力求每个图标简洁，易懂。
动效设计
如今玲琅满目的（de）App中，如何在设计中脱（tuō）颖（yǐng）而出（chū）是需要设计师考（kǎo）虑的，不仅（jǐn）是合理的展示产品结构与功能，更重要的（de）是思考App是否能做（zuò）到（dào）简洁易懂的同时，又给用户新（xīn）颖感？
动效设计正成（chéng）为（wéi）移动端设计中（zhōng）一个极为重（chóng）要、非常必要的组成要素。
QQ音（yīn）乐5.0在原先单一（yī）枯燥毫无生气的操作（zuò）模式（shì）上（shàng），增（zēng）加灵动而真实（shí）的动效。
1.MiniPlayer快速切（qiē）歌
Miniplayer在新版（bǎn）框架中作为常驻模块（kuài），用户在任何页（yè）面内都可以通过滑动底（dǐ）部进行操作。而左右切歌利用手势和动画（huà），减（jiǎn）少外置切换icon的同时（shí），使操作便捷，大大减少（shǎo）以往需进入播放页切歌的时间。
2.模拟真实唱片
即（jí）要保（bǎo）持简洁扁（biǎn）平（píng）的视觉风格，又不希（xī）望（wàng）加入拟物质感与界面格格（gé）不入，那怎样才能让唱片的表现更真实？只有（yǒu）通（tōng）过动效细腻（nì）的表现（xiàn）来解（jiě）决。但有个细节（jiē）可能（néng）大家还（hái）没能（néng）注意到–播放页的（de）唱片比（bǐ）MiniPlayer的唱片转（zhuǎn）速约慢一倍左右（yòu）。为了（le）在视觉上唱（chàng）片转动同步，通（tōng）过调（diào）整角（jiǎo）速度同（tóng）步以（yǐ）保证唱片转动的线速度一致，所以大唱片的感观转（zhuǎn）速更为（wéi）缓（huǎn）和。
QQ音乐V5 : 星设定 QQ音乐（lè）V5 : 星设定（dìng）
3.MiniPlayer切（qiē）换至播放（fàng）页
为了使得（dé）Miniplayer和播放页来回切换的流程（chéng）度，设计采用了分成动画的形式。底层、信息层和唱片封（fēng）面（miàn）层（céng）用不（bú）同的轨迹和（hé）动画原理，通过物理学动力原理，设计师和（hé）开发同事，通过对（duì）模拟物体运动轨迹研究和速度（dù）不（bú）断的调整，模拟出舒服真（zhēn）实的动画感受。
QQ音乐（lè）V5 : 星设定
4.全（quán）局切换
用户不（bú）仅可（kě）以（yǐ）通（tōng）过点击顶（dǐng）部（bù）导（dǎo）航进行页面切换，新增左右滑动手势，可以在（zài）页（yè）面可（kě）控区域进行（háng）页面之（zhī）间的转换，大大减少（shǎo）使（shǐ）用效率，快速（sù）便捷。
响应式（shì）的互动，充（chōng）满意味的过度，令（lìng）人愉悦的（de）细节。掌（zhǎng）握（wò）好这（zhè）些（xiē）特征之后，会（huì）起（qǐ）到锦（jǐn）上添花的作用。
精心编排的动效设计（jì）能更为有效地（dì）吸引用户的（de）注意（yì）力（lì），并让用户专注于操（cāo）作（zuò）不同的步骤，经历不同（tóng）的流程；有意（yì）味的动（dòng）效设计（jì）能在界面变化、元素（sù）重新排列（liè）过（guò）程中，让整体（tǐ）体验更加（jiā）舒（shū）适。
QQ音乐V5 : 星（xīng）设定 QQ音（yīn）乐V5 : 星设定
总（zǒng）结
QQ音乐5.0全新设计来了，开启页面繁（fán）星璀璨（càn）的夜空中，期（qī）待新（xīn）版会给您耳目一（yī）新的感受。以上（shàng）是项目中（zhōng）的一些过程（chéng）和体会，为用户带来更酷炫（xuàn）更易用的听歌软件QQ音乐的设计师一直（zhí）努力着。
上（shàng）一篇（piān）：重庆动画公（gōng）司打造产业链（liàn）完整的（de）“大动漫（màn）”格局