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