风格大变身的QQ音乐V5之星设定.pdfVIP

风格大变身的 QQ 音乐 V5 之星设定 QQ 音乐今年的重大更新后，风格完全换了个样，想了解背后的设计思路？今天腾讯的同学 将从框架、 UI、图文品质和动画几个方面，分享 5.0 设计过程和思考 悄然间， QQ 音乐已陪伴大家十个年头，从 PC 互联网时代走到了移动互联网时代 QQ 音乐一直探索 和坚持着简约时尚的设计语言。几经迭代，以内容为导向的页面排版略显保守，新版的视觉在品牌 元素加入，突出音乐元素的表达，尝试从新的角度诠释简约时尚的设计语言。 如今的移动应用软件设计已经不再是简单跟随手机系统设计，有个性有品牌感的产品会更加受到用 户喜欢。我们通过用户调研，也了解到用户对个性化界面的 诉求，比如酷炫的皮肤，大图模式和动 画的设计。产品和设计希望新版视觉在个性化和品牌感上有所突破，一方面满足用户诉求，另一方 面也能全面考虑一体化设 计，解决多终端适配问题。 以往版本更多是以内容为导向的排版缺乏音乐元素的表现，在新版本里，不仅在内容上，我们更希 望在视觉上给用户带来更沉静的音乐感受，在播放页里我们 还原了传统 [唱片] 的表现形式，以及真 实唱片的旋转及切换动画，给予界面更多生命力，用户不再觉得它是一排播放按钮，而是点唱机。 那么如何让唱片表现得更多真实生动？结合通透封面模糊背景 +扁平化唱片 + 平滑动效。既给用户保 持一惯的简洁时尚风格，也不需担心增加拟物化的厚重质感而过时。 沉浸享受音乐应该是怎样的场景？ —— 咖啡厅 / 酒吧 / 演唱会 / 夜空 / …… 经过多种场景探索，夜空更能给用户营造享受音乐的氛围，也结合众多用户对夜间模式的需求，新 版QQ 音乐首次推出「炫黑模式」，为了更好地搭配品牌绿色，我们选择了深青蓝色做主色调，用 暖色做为轻微辅助光影，再经过扁平化处理成主背景，让界面显得通透而不厚重。 我们设计了夜空为主题的预热页面和欢迎页面。在预热的阶段，使用了星光组合的 QQ 音乐 LOGO ，星光由弱变亮，最后达到上线时群星闪耀的欢迎页面。幽蓝的星空、闪耀的星光、两个正在分享 音乐的人，让用户在打开欢迎页的时候产生夜空氛围的情感代入。 当然我们还考虑在某些场景不适合炫黑模式或是用户的喜好，我们依然保留了传统的「简约模式」 ，并支持一键切换。也为后续个性化自定义皮肤正式跨出了第一步。 随着 iPhone 6 / 6 plus 的出现 , 及Android 720/1080p 等大屏幕逐渐成为主流时，我们更多考虑了屏幕 空间利用的相关问题。 UI上我们精减了大部份 cell 的样式及多余的线条，减化了排版结 构，全局的 详情页统一打通了导航栏，减少页面割裂感，让画面更沉浸。音乐本应时尚个性，新版本的歌手页 为歌手图预留了更大的展示区域，尽可能展示歌手的个 性化表现。 细节打磨 新版 QQ 音乐不断为视觉细节体验进一步打磨，我们首次尝试使用更纤细时尚的字体 –兰亭细黑体 。相比于系统字体会让界面显得更工整简洁，阅读更为舒心。另外在图标方面，也延续了原来的线 型设计进行精雕细琢，部份图标更是重新绘制，化繁为简，力求每个图标简洁，易懂。 动效设计 如今玲琅满目的 App 中，如何在设计中脱颖而出是需要设计师考虑的，不仅是合理的展示产品结构 与功能，更重要的是思考 App 是否能做到简洁易懂的同时，又给用户新颖感？ 动效设计正成为移动端设计中一个极为重要、非常必要的组成要素。 QQ 音乐 5.0在原先单一枯燥毫无生气的操作模式上，增加灵动而真实的动效。 1. MiniPlayer 快速切歌 Miniplayer 在新版框架中作为常驻模块，用户在任何页面内都可以通过滑动底部进行操作。而左右切 歌利用手势和动画，减少外置切换 icon 的同时，使操作便捷，大大减少以往需进入播放页切歌的 时间。 2. 模拟真实唱片 即要保持简洁扁平的视觉风格，又不希望加入拟物质感与界面格格不入，那怎样才能让唱片的表现 更真实？只有通过动效细腻的表现来解决。但有个细节可能 大家还没能注