2017-3-3 用心设计
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
<p>
<span style="font-size:14px;"><strong></strong></span>
</p>
<p>
<br />
</p>
<p>
<span style="font-size:14px;">导语</span>
</p>
<p>
<br />
</p>
<p>
<span style="font-size:14px;font-family:Microsoft YaHei;">说到手机QQ主题皮肤，相信一直关注EID的亲们已经觉得不陌生了。之前我们分享了手机QQ主题皮肤设计教程以及一些精彩设计案例，而今天，我们不妨继续深入聊聊EID与手机QQ主题皮肤的一些事一些情。</span>
</p>
<p>
<br />
</p>
<p>
<span style="font-size:14px;font-family:Microsoft YaHei;">EID与手Q主题皮肤结缘已有三年之久，EID有幸成为了手Q主题的首位服务商，随着时间的发展，如今EID为手Q提供的主题皮肤数已覆盖QQ商城的95%，达到140套之多，其中更不乏许多令人难忘的经典作品。</span>
</p>
<p>
<br />
</p>
<p>
<span style="font-size:14px;"><span style="font-family:Microsoft YaHei;">合作的历史与现状</span><span style="font-family:Microsoft YaHei;">2013年，手机QQ推出了主题皮肤服务，当时腾讯内部已经已开发了4套主题皮肤。8月，藉由《侏罗纪公园》3D版电影的上映，腾讯开始寻求主题皮肤的设计服务商，EID有幸成称为手Q主题的首位服务商，为其设计《重回侏罗纪》主题皮肤以及其活动网站</span>。</span>
</p>
<p>
<br />
</p>
<p>
<span style="font-size:14px;"><strong></strong></span>
</p>
<p>
<img title="手机QQ主题皮肤设计经验分享" alt="手机QQ主题皮肤设计经验分享" src="http://www.tuyiyi.com/images/zone/201702/152F223G-0.jpg" />
</p>
<p>
<span style="font-size:14px;"><strong>直到现在，凭着各种好玩的创意、出众的细节、以及设计师们的热情，多次获得客户肯定。EID已经成为手机QQ主题皮肤的核心服务商，占比已达到95%以上，已制作主题多达140多套。另外，EID同时也一直是QQ聊天气泡设计的主要供应商之一。</strong></span>
</p>
<p>
<br />
</p>
<p>
<strong><span style="font-size:14px;">手Q演变对主题的设计影响</span></strong>
</p>
<p>
<strong><span style="font-size:14px;">1.从4.x版本的试探到6.x版本的优化</span></strong>
</p>
<p>
<img title="手机QQ主题皮肤设计经验分享" alt="手机QQ主题皮肤设计经验分享" src="http://www.tuyiyi.com/images/zone/201702/152F24T8-1.jpg" />
</p>
<p>
<strong><span style="font-size:14px;">2.4.x版本——试探</span></strong>
</p>
<p>
<span style="font-size:14px;"><strong>作为手Q主题降临的第一个版本，风格还是基于当时的iOS6风格，整体风格比较偏向立体。栏目感比较明显，列表带有立体感，图标色块化，渐变运用较多。</strong></span>
</p>
<p>
<img title="手机QQ主题皮肤设计经验分享" alt="手机QQ主题皮肤设计经验分享" src="http://www.tuyiyi.com/images/zone/201702/152F23F7-2.jpg" />
</p>
<p>
<strong><span style="font-size:14px;">3.5.x版本——成形</span></strong>
</p>
<p>
<span style="font-size:14px;"><strong>随着iOS7扁平风格化的普及，5.x版本的手Q改变也比较大，减少了条目感，整体扁平统一，去掉了渐变的使用，图标也改为现状。</strong></span>
</p>
<p>
<img title="手机QQ主题皮肤设计经验分享" alt="手机QQ主题皮肤设计经验分享" src="http://www.tuyiyi.com/images/zone/201702/152F2D19-3.jpg" />
</p>
<p>
<strong><span style="font-size:14px;">4.6.x版本——优化</span></strong>
</p>
<p>
<span style="font-size:14px;"><strong>到6.x版本，主题皮肤更加注重简化控件，更注重统一性，四栏图标改回用色块突出。我们的设计也更加场景化，注入更多故事性。</strong></span>
</p>
<p>
<img title="手机QQ主题皮肤设计经验分享" alt="手机QQ主题皮肤设计经验分享" src="http://www.tuyiyi.com/images/zone/201702/152F26020-4.jpg" />
</p>
<p>
<strong><span style="font-size:14px;">手Q主题皮肤的设计流程</span></strong>
</p>
<p>
<span style="font-size:14px;"><strong>从草稿到套图，每个阶段我们累积已渐渐“发明”了一系列的规范，就像是一套套的工具，提高设计的效率，简化沟通成本，让每一个设计师都能快速上手。这些“发明”还会精彩分享给腾讯，提高双方效率。</strong></span>
</p>
<p>
<img title="手机QQ主题皮肤设计经验分享" alt="手机QQ主题皮肤设计经验分享" src="http://www.tuyiyi.com/images/zone/201702/152F224J-5.jpg" />
</p>
<p>
<strong><span style="font-size:14px;">1.草稿</span></strong>
</p>
<p>
<span style="font-size:14px;"><strong>越是基本的问题，越应该先用快的方法去确定，这样能有效减轻减免返工率。所以每设计一个主题时，都会先把大致构思以草稿形式给客户确认，包括图标的造型与状态变化、风格、配色、质感、背景元素、甚至是一个故事。</strong></span>
</p>
<p>
<img title="手机QQ主题皮肤设计经验分享" alt="手机QQ主题皮肤设计经验分享" src="http://www.tuyiyi.com/images/zone/201702/152F260H-6.jpg" />
</p>
<p>
<span style="font-size:14px;"><strong>根据不同主题类型的性质，去思考如何实现。一般来说，主题分为原创类与客户提供素材，而素材类也因为版权的严格度不一，也分为可改动素材与不可改动两类。</strong></span>
</p>
<p>
<br />
</p>
<p>
<img title="手机QQ主题皮肤设计经验分享" alt="手机QQ主题皮肤设计经验分享" src="http://www.tuyiyi.com/images/zone/201702/152F22c4-7.jpg" />
</p>
<p>
<strong><span style="font-size:14px;">2.视觉</span></strong>
</p>
<p>
<span style="font-size:14px;"><strong>视觉稿主要为消息页（首页）、聊天页以及抽屉页，需严格按照规范执行。其中消息页最重点的是底栏图标设计，底栏图标设计可以算是一个主题的灵魂所在。设计时需要把握好整体的氛围，并注意保证文字的清晰度。</strong></span>
</p>
<p>
<img title="手机QQ主题皮肤设计经验分享" alt="手机QQ主题皮肤设计经验分享" src="http://www.tuyiyi.com/images/zone/201702/152F261P-8.jpg" />
</p>
<p>
<span style="font-size:14px;"><strong>经过大量的经验，累积下一些常规的设计方法，做到有计划地去思考，有效提率。</strong></span>
</p>
<p>
<img title="手机QQ主题皮肤设计经验分享" alt="手机QQ主题皮肤设计经验分享" src="http://www.tuyiyi.com/images/zone/201702/152F26153-9.jpg" />
</p>
<p>
<strong><span style="font-size:14px;">3.切图</span></strong>
</p>
<p>
<span style="font-size:14px;"><strong>切图需要切iOS和Android两个版本，两个版本有所区别。我们分别设立了两份切图规范，并以文字标记输出说明，让新的设计师也能快速上手。因为视觉稿里并不包含所有切图，由部分小图标是在此阶段设计与延伸。</strong></span>
</p>
<p>
<img title="手机QQ主题皮肤设计经验分享" alt="手机QQ主题皮肤设计经验分享" src="http://www.tuyiyi.com/images/zone/201702/152F26141-10.jpg" />
</p>
<p>
<strong><span style="font-size:14px;">4.测试</span></strong>
</p>
<p>
<span style="font-size:14px;"><strong>渐渐地，越来越多的设计师有了测试的经验，当发现一些新的问题时，大家会一起在小组上讨论解决方法，以免日后再发生类似的问题。</strong></span>
</p>
<p>
<img title="手机QQ主题皮肤设计经验分享" alt="手机QQ主题皮肤设计经验分享" src="http://www.tuyiyi.com/images/zone/201702/152F24935-11.jpg" />
</p>
<p>
<strong><span style="font-size:14px;">5.套图</span></strong>
</p>
<p>
<span style="font-size:14px;"><strong>最后，按套图规范输出预览图与效果图，就可以上架到手Q主题中心。</strong></span>
</p>
<p>
<img title="手机QQ主题皮肤设计经验分享" alt="手机QQ主题皮肤设计经验分享" src="http://www.tuyiyi.com/images/zone/201702/152F2OG-12.jpg" />
</p>
<p>
<strong><span style="font-size:14px;">创造更多的价值</span></strong>
</p>
<p>
<strong><span style="font-size:14px;">1.从客户要求 到自荐主题</span></strong>
</p>
<p>
<span style="font-size:14px;"><strong>除了客户提交需求给我们之外，我们还会主动构思一些主题草图给客户，既让客户看到我们的设计热诚，也提高了设计师的积极性，从而创造更多的价值。</strong></span>
</p>
<p>
<img title="手机QQ主题皮肤设计经验分享" alt="手机QQ主题皮肤设计经验分享" src="http://www.tuyiyi.com/images/zone/201702/152F25044-13.jpg" />
</p>
<p>
<strong><span style="font-size:14px;">2.配套气泡，卡片，挂件，表情</span></strong>
</p>
<p>
<span style="font-size:14px;"><strong>某些特别优秀的主题，还会得到延伸其他产品的机会。从而挖掘更多的价值。此外，公司还组织一些表情设计比赛，期间出现了不少优秀作品，也得到了采用。</strong></span>
</p>
<p>
<img title="手机QQ主题皮肤设计经验分享" alt="手机QQ主题皮肤设计经验分享" src="http://www.tuyiyi.com/images/zone/201702/152F23142-14.jpg" />
</p>
<p>
<strong><span style="font-size:14px;">优秀作品展示</span></strong>
</p>
<p>
<strong><span style="font-size:14px;">1.黑白小怪兽</span></strong>
</p>
<p>
<img title="手机QQ主题皮肤设计经验分享" alt="手机QQ主题皮肤设计经验分享" src="http://www.tuyiyi.com/images/zone/201702/152F220A-15.jpg" />
</p>
<p>
<span style="font-size:14px;"><strong>2</strong></span><strong><span style="font-size:14px;">.花漾婚期</span></strong>
</p>
<p>
<img title="手机QQ主题皮肤设计经验分享" alt="手机QQ主题皮肤设计经验分享" src="http://www.tuyiyi.com/images/zone/201702/152F253O-16.jpg" />
</p>
<p>
<span style="font-size:14px;"><strong>3.鸡年大吉</strong></span>
</p>
<p>
<img title="手机QQ主题皮肤设计经验分享" alt="手机QQ主题皮肤设计经验分享" src="http://www.tuyiyi.com/images/zone/201702/152F25232-17.jpg" />
</p>
<p>
<span style="font-size:14px;"><strong>4</strong></span><strong><span style="font-size:14px;">.德古拉伯爵</span></strong>
</p>
<p>
<img title="手机QQ主题皮肤设计经验分享" alt="手机QQ主题皮肤设计经验分享" src="http://www.tuyiyi.com/images/zone/201702/152F21b9-18.jpg" />
</p>
<p>
<span style="font-size:14px;"><strong>5.安魂曲</strong></span>
</p>
<p>
<img title="手机QQ主题皮肤设计经验分享" alt="手机QQ主题皮肤设计经验分享" src="http://www.tuyiyi.com/images/zone/201702/152F252T-19.jpg" />
</p>
<p>
<span style="font-size:14px;"><strong>6.冰源小怪</strong></span>
</p>
<p>
<img title="手机QQ主题皮肤设计经验分享" alt="手机QQ主题皮肤设计经验分享" src="http://www.tuyiyi.com/images/zone/201702/152F21F0-20.jpg" />
</p>
<p>
<span style="font-size:14px;"><strong>7.哥特式爱情</strong></span>
</p>
<p>
<img title="手机QQ主题皮肤设计经验分享" alt="手机QQ主题皮肤设计经验分享" src="http://www.tuyiyi.com/images/zone/201702/152F2G07-21.jpg" />
</p>
<p>
<span style="font-size:14px;"><strong>8.天天向上</strong></span>
</p>
<p>
<img title="手机QQ主题皮肤设计经验分享" alt="手机QQ主题皮肤设计经验分享" src="http://www.tuyiyi.com/images/zone/201702/152F220Q-22.jpg" width="1000" height="660" align="" />
</p>
<strong><em><strong><a style="color:#886353;text-decoration:none;" href="http://www.lanlanwork.com/blog/admin" target="_blank"><span style="font-family:'Microsoft YaHei';font-size:16px;">蓝蓝设计</span></a><span style="font-family:'Microsoft YaHei';font-size:16px;">( </span><a style="padding-bottom:0px;border-right-width:0px;widows:2;text-indent:34px;margin:0px;padding-left:0px;padding-right:0px;font-family:'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;background-position:0px -60px;orphans:2;border-top-width:0px;border-bottom-width:0px;color:#0c386e;font-size:16px;vertical-align:baseline;border-left-width:0px;text-decoration:none;padding-top:0px;" href="http://www.lanlanwork.com/" target="_blank"><span style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;font-family:'Microsoft YaHei';padding-top:0px;">www.lanlanwork.com </span></a><span style="padding-bottom:0px;line-height:24px;widows:2;text-indent:34px;margin:0px;padding-left:0px;padding-right:0px;font-family:'Microsoft YaHei';orphans:2;color:#333333;padding-top:0px;"><span style="font-family:'Microsoft YaHei';font-size:16px;">)是一家专注而深入的</span><span style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;color:#886353;padding-top:0px;"><a style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;background-position:0px -60px;color:#886353;text-decoration:none;padding-top:0px;" href="http://www.lanlanwork.com/index.html" target="_blank"><span style="font-family:'Microsoft YaHei';font-size:16px;">界面设计公司</span></a></span><span style="font-family:'Microsoft YaHei';font-size:16px;">，为期望卓越的国内外企业提供卓越的</span><span style="font-family:'Microsoft YaHei';color:#64451d;font-size:16px;">UI界面设计</span><span style="font-family:'Microsoft YaHei';font-size:16px;">、</span></span><span style="padding-bottom:0px;line-height:24px;widows:2;text-indent:34px;margin:0px;padding-left:0px;padding-right:0px;font-family:'Microsoft YaHei';orphans:2;color:#333333;padding-top:0px;"><span style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;color:#0c386e;padding-top:0px;"><a style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;background-position:0px -60px;color:#886353;text-decoration:none;padding-top:0px;" href="http://www.lanlanwork.com/bs.html"><span style="font-family:'Microsoft YaHei';font-size:16px;">BS界面设计 </span></a></span><span style="font-family:'Microsoft YaHei';font-size:16px;">、 </span><span style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;color:#0c386e;padding-top:0px;"><a style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;background-position:0px -60px;color:#886353;text-decoration:none;padding-top:0px;" href="http://www.lanlanwork.com/csjm.html"><span style="font-family:'Microsoft YaHei';font-size:16px;">cs界面设计 </span></a></span><span style="font-family:'Microsoft YaHei';font-size:16px;">、 </span><span style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;color:#0c386e;padding-top:0px;"><a style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;background-position:0px -60px;color:#886353;text-decoration:none;padding-top:0px;" href="http://www.lanlanwork.com/scjm.html" target="_blank"><span style="font-family:'Microsoft YaHei';font-size:16px;">ipad界面设计</span></a><a style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;background-position:0px -60px;color:#886353;text-decoration:none;padding-top:0px;" href="http://www.lanlanwork.com/csjm.html"><span style="font-family:'Microsoft YaHei';font-size:16px;"> </span></a></span><span style="font-family:'Microsoft YaHei';font-size:16px;">、 </span><span style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;color:#0c386e;padding-top:0px;"><a style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;background-position:0px -60px;color:#886353;text-decoration:none;padding-top:0px;" href="http://www.lanlanwork.com/baozhuang.html"><span style="font-family:'Microsoft YaHei';font-size:16px;">包装设计 </span></a></span><span style="font-family:'Microsoft YaHei';font-size:16px;">、 </span><span style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;color:#0c386e;padding-top:0px;"><a style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;background-position:0px -60px;color:#886353;text-decoration:none;padding-top:0px;" href="http://www.lanlanwork.com/icon.html"><span style="font-family:'Microsoft YaHei';font-size:16px;">图标定制 </span></a></span><span style="font-family:'Microsoft YaHei';font-size:16px;">、 </span><span style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;color:#0c386e;padding-top:0px;"><a style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;background-position:0px -60px;color:#886353;text-decoration:none;padding-top:0px;" href="http://www.lanlanwork.com/yhty.html"><span style="font-family:'Microsoft YaHei';font-size:16px;">用户体验 、交互设计、 </span></a></span><span style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;color:#0c386e;padding-top:0px;"><a style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;background-position:0px -60px;color:#886353;text-decoration:none;padding-top:0px;" href="http://www.lanlanwork.com/web.html" target="_blank"><span style="font-family:'Microsoft YaHei';font-size:16px;">网站建设</span></a><a style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;background-position:0px -60px;color:#886353;text-decoration:none;padding-top:0px;" href="http://www.lanlanwork.com/WEB.html"><span style="font-family:'Microsoft YaHei';font-size:16px;"> </span></a></span><span style="font-family:'Microsoft YaHei';font-size:16px;">、</span><span style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;color:#0c386e;padding-top:0px;"><span style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;background-position:0px -60px;color:#886353;padding-top:0px;"><span style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;background-position:0px -60px;font-size:16px;padding-top:0px;"><a style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;background-position:0px -60px;color:#886353;text-decoration:none;padding-top:0px;" href="http://www.lanlanwork.com/xz.html"><span style="font-family:Microsoft YaHei;">平面设计服务</span></a></span></span></span></span></strong></em></strong></strong></span></span></strong></span></strong></span></span></span></span></strong></span></span></span>
</p>