QQ音乐2012（贺岁版）设计总结

     <div id="news_body">     <p style="text-align:center;"><a><img style="width:545px;height:193px;" alt="QQ音乐2012（贺岁版）设计总结" src="https://simg.open-open.com/show/05fd83a7ba58b3b31bd2849805ca298e.jpg" /></a></p>     <p>        <strong>写在前面</strong></p>     <p>        早在 2011 年 7 月，QQ 音乐 2011beta 版的发布便确立了用品牌色–绿色，做为 QQ 音乐客户端的默认颜色，绿色代表和平、希望、生长和环保，对 QQ 音乐的品牌形象有积极的正面意义，此外，纵观竞品，常见的客户端配色多为黑和蓝，用绿色也较利于提高产品的识别度。QQ 音乐 2012 贺岁版的视觉，也是围绕绿色和细节进行全面的体验优化。项目从去年 12 月 31 号开始，进行了为期 15 天的高效设计和快速迭代。</p>     <p>        <strong>改变工作流程</strong></p>     <p>        整个项目时间非常紧张，由产品发起需求–交互–视觉–开发的传统流程无法适应项目进度，而由设计师发挥最大主观能动性，与产品、开发无缝对接，减少沟通成本，并驱动实现更适合的体验。</p>     <p style="text-align:center;"><img style="width:529px;height:268px;" alt="QQ音乐2012（贺岁版）设计总结" src="https://simg.open-open.com/show/6a8d3f902c660187d5c8df88f5d50506.jpg" /></p>     <p>        <strong>设计理念</strong></p>     <p>        从对用户听歌时的心情和感觉的研究结果来看，发放的 2000 多份问卷中，有 41.6% 的用户选择“清新”，排第一位，其次是“阳光白云飞翔”和“忧伤”。因此，整体的视觉风格的关键词定义为：清新、精致、绿色，希望给用户营造一种自然纯 粹、融入万物的感官体验。</p>     <p style="text-align:center;"><img style="width:577px;height:543px;" alt="QQ音乐2012（贺岁版）设计总结" src="https://simg.open-open.com/show/a900d79d6ca320ffddc89705fd1d23c1.jpg" /></p>     <p>        <strong>绿色的重新提炼</strong></p>     <p>        绿色是一种非常灵活的色彩，在色盘上偏向黄色部分的绿色感觉比较温暖，而偏向蓝色部分的绿则显得比较冷。在项目初期，针对不同感觉的绿，做了几 稿视觉输出尝试，邀请了周围的人来选择，从中也有一些有趣的发现，比如男性比较喜欢明度低的深绿色，女性则偏爱明度高的嫩绿，另外，性格内向的人喜欢饱和 度偏低比较灰的绿，而性格外向的人则喜欢饱和度高更纯正的绿色。</p>     <p style="text-align:center;"><img style="width:556px;height:210px;" alt="QQ音乐2012（贺岁版）设计总结" src="https://simg.open-open.com/show/c327301d1b4f9ea43500782113067219.jpg" /><br />         </p>     <p>        经过反复比较，结合界面和图标的配色，以及希望传达给用户清新自然的感觉，最后选择了用最接近春天，偏暖的绿色，做为客户端的基准色调。</p>     <p style="text-align:center;"><img style="width:566px;height:312px;" alt="QQ音乐2012（贺岁版）设计总结" src="https://simg.open-open.com/show/b1cfd87124a328a562c01057817b6259.jpg" /></p>     <p>         </p>     <p>        <strong>图标的优化</strong></p>     <p>        重新绘制的图标，更强调造型的饱满和所有图标的均衡。在质感上打造单色、轻薄、边缘清晰而不锐利的视觉体验以适配换肤。光源统一为 90 度向下。</p>     <p style="text-align:center;"><img style="width:479px;height:128px;" alt="QQ音乐2012（贺岁版）设计总结" src="https://simg.open-open.com/show/4b90ec701b6f006e14b7c7093efa4738.jpg" /></p>     <p>        <strong>界面的优化</strong></p>     <p>        1. 质感的打磨：调整质感的轻重，对线条进行弱化处理，让面板的更加透气和细腻。</p>     <p>        2. 头部布局：优化业务入口，对负载的功能做减法。</p>     <p style="text-align:center;"><img style="width:502px;height:251px;" alt="QQ音乐2012（贺岁版）设计总结" src="https://simg.open-open.com/show/bf448577a47bb4ea973f0d1c20d43a81.jpg" /></p>     <p>        3. 文字和图标的排版：寻找四个方向对齐点，使之平衡、整洁。</p>     <p style="text-align:center;"><img style="width:546px;height:547px;" alt="QQ音乐2012（贺岁版）设计总结" src="https://simg.open-open.com/show/a94f0711c25b9205d19cc314125b81cf.jpg" /></p>     <p>        <strong>最终效果：</strong></p>     <p style="text-align:center;"><img style="width:575px;height:606px;" alt="QQ音乐2012（贺岁版）设计总结" src="https://simg.open-open.com/show/444797930aa170a6f6cea14e3497c1ed.jpg" /></p>     <p>        <strong>后记</strong></p>     <p>        距离发版已经过去 2 个月了，从收到的反馈数据看来，效果还是比较理想的，日听歌用户数和安装覆盖率较之上个版本都有显著增长。最后感谢开发同学在视觉还原上的耐心配合，感谢产品经理的理解和支持。</p>     <p>        自然赋予万物声响，音乐是人类献给世间的第二自然，QQ 音乐做为感情和思想的传递者，希望能将最完美的音乐体验带给大家，这次改版，是一轮经验和力量的蓄积，在用户体验的道路上未来我们会做到更好。</p>     <div id="come_from">      来自:      <a id="link_source2" href="/misc/goto?guid=4958337858598534960" target="_blank">cdc.tencent.com</a>     </div>    </div>