2017-3-3 用心設(shè)計(jì)
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點(diǎn)這里
<p>
<span style="font-size:14px;"><strong></strong></span>
</p>
<p>
<br />
</p>
<p>
<span style="font-size:14px;">導(dǎo)語</span>
</p>
<p>
<br />
</p>
<p>
<span style="font-size:14px;font-family:Microsoft YaHei;">說到手機(jī)QQ主題皮膚，相信一直關(guān)注EID的親們已經(jīng)覺得不陌生了。之前我們分享了手機(jī)QQ主題皮膚設(shè)計(jì)教程以及一些精彩設(shè)計(jì)案例，而今天，我們不妨繼續(xù)深入聊聊EID與手機(jī)QQ主題皮膚的一些事一些情。</span>
</p>
<p>
<br />
</p>
<p>
<span style="font-size:14px;font-family:Microsoft YaHei;">EID與手Q主題皮膚結(jié)緣已有三年之久，EID有幸成為了手Q主題的首位服務(wù)商，隨著時間的發(fā)展，如今EID為手Q提供的主題皮膚數(shù)已覆蓋QQ商城的95%，達(dá)到140套之多，其中更不乏許多令人難忘的經(jīng)典作品。</span>
</p>
<p>
<br />
</p>
<p>
<span style="font-size:14px;"><span style="font-family:Microsoft YaHei;">合作的歷史與現(xiàn)狀</span><span style="font-family:Microsoft YaHei;">2013年，手機(jī)QQ推出了主題皮膚服務(wù)，當(dāng)時騰訊內(nèi)部已經(jīng)已開發(fā)了4套主題皮膚。8月，藉由《侏羅紀(jì)公園》3D版電影的上映，騰訊開始尋求主題皮膚的設(shè)計(jì)服務(wù)商，EID有幸成稱為手Q主題的首位服務(wù)商，為其設(shè)計(jì)《重回侏羅紀(jì)》主題皮膚以及其活動網(wǎng)站</span>。</span>
</p>
<p>
<br />
</p>
<p>
<span style="font-size:14px;"><strong></strong></span>
</p>
<p>
<img title="手機(jī)QQ主題皮膚設(shè)計(jì)經(jīng)驗(yàn)分享" alt="手機(jī)QQ主題皮膚設(shè)計(jì)經(jīng)驗(yàn)分享" src="http://www.tuyiyi.com/images/zone/201702/152F223G-0.jpg" />
</p>
<p>
<span style="font-size:14px;"><strong>直到現(xiàn)在，憑著各種好玩的創(chuàng)意、出眾的細(xì)節(jié)、以及設(shè)計(jì)師們的熱情，多次獲得客戶肯定。EID已經(jīng)成為手機(jī)QQ主題皮膚的核心服務(wù)商，占比已達(dá)到95%以上，已制作主題多達(dá)140多套。另外，EID同時也一直是QQ聊天氣泡設(shè)計(jì)的主要供應(yīng)商之一。</strong></span>
</p>
<p>
<br />
</p>
<p>
<strong><span style="font-size:14px;">手Q演變對主題的設(shè)計(jì)影響</span></strong>
</p>
<p>
<strong><span style="font-size:14px;">1.從4.x版本的試探到6.x版本的優(yōu)化</span></strong>
</p>
<p>
<img title="手機(jī)QQ主題皮膚設(shè)計(jì)經(jīng)驗(yàn)分享" alt="手機(jī)QQ主題皮膚設(shè)計(jì)經(jīng)驗(yàn)分享" 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主題降臨的第一個版本，風(fēng)格還是基于當(dāng)時的iOS6風(fēng)格，整體風(fēng)格比較偏向立體。欄目感比較明顯，列表帶有立體感，圖標(biāo)色塊化，漸變運(yùn)用較多。</strong></span>
</p>
<p>
<img title="手機(jī)QQ主題皮膚設(shè)計(jì)經(jīng)驗(yàn)分享" alt="手機(jī)QQ主題皮膚設(shè)計(jì)經(jīng)驗(yàn)分享" 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扁平風(fēng)格化的普及，5.x版本的手Q改變也比較大，減少了條目感，整體扁平統(tǒng)一，去掉了漸變的使用，圖標(biāo)也改為現(xiàn)狀。</strong></span>
</p>
<p>
<img title="手機(jī)QQ主題皮膚設(shè)計(jì)經(jīng)驗(yàn)分享" alt="手機(jī)QQ主題皮膚設(shè)計(jì)經(jīng)驗(yàn)分享" src="http://www.tuyiyi.com/images/zone/201702/152F2D19-3.jpg" />
</p>
<p>
<strong><span style="font-size:14px;">4.6.x版本——優(yōu)化</span></strong>
</p>
<p>
<span style="font-size:14px;"><strong>到6.x版本，主題皮膚更加注重簡化控件，更注重統(tǒng)一性，四欄圖標(biāo)改回用色塊突出。我們的設(shè)計(jì)也更加場景化，注入更多故事性。</strong></span>
</p>
<p>
<img title="手機(jī)QQ主題皮膚設(shè)計(jì)經(jīng)驗(yàn)分享" alt="手機(jī)QQ主題皮膚設(shè)計(jì)經(jīng)驗(yàn)分享" src="http://www.tuyiyi.com/images/zone/201702/152F26020-4.jpg" />
</p>
<p>
<strong><span style="font-size:14px;">手Q主題皮膚的設(shè)計(jì)流程</span></strong>
</p>
<p>
<span style="font-size:14px;"><strong>從草稿到套圖，每個階段我們累積已漸漸“發(fā)明”了一系列的規(guī)范，就像是一套套的工具，提高設(shè)計(jì)的效率，簡化溝通成本，讓每一個設(shè)計(jì)師都能快速上手。這些“發(fā)明”還會精彩分享給騰訊，提高雙方效率。</strong></span>
</p>
<p>
<img title="手機(jī)QQ主題皮膚設(shè)計(jì)經(jīng)驗(yàn)分享" alt="手機(jī)QQ主題皮膚設(shè)計(jì)經(jīng)驗(yàn)分享" 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>越是基本的問題，越應(yīng)該先用快的方法去確定，這樣能有效減輕減免返工率。所以每設(shè)計(jì)一個主題時，都會先把大致構(gòu)思以草稿形式給客戶確認(rèn)，包括圖標(biāo)的造型與狀態(tài)變化、風(fēng)格、配色、質(zhì)感、背景元素、甚至是一個故事。</strong></span>
</p>
<p>
<img title="手機(jī)QQ主題皮膚設(shè)計(jì)經(jīng)驗(yàn)分享" alt="手機(jī)QQ主題皮膚設(shè)計(jì)經(jīng)驗(yàn)分享" src="http://www.tuyiyi.com/images/zone/201702/152F260H-6.jpg" />
</p>
<p>
<span style="font-size:14px;"><strong>根據(jù)不同主題類型的性質(zhì)，去思考如何實(shí)現(xiàn)。一般來說，主題分為原創(chuàng)類與客戶提供素材，而素材類也因?yàn)榘鏅?quán)的嚴(yán)格度不一，也分為可改動素材與不可改動兩類。</strong></span>
</p>
<p>
<br />
</p>
<p>
<img title="手機(jī)QQ主題皮膚設(shè)計(jì)經(jīng)驗(yàn)分享" alt="手機(jī)QQ主題皮膚設(shè)計(jì)經(jīng)驗(yàn)分享" 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>視覺稿主要為消息頁（首頁）、聊天頁以及抽屜頁，需嚴(yán)格按照規(guī)范執(zhí)行。其中消息頁最重點(diǎn)的是底欄圖標(biāo)設(shè)計(jì)，底欄圖標(biāo)設(shè)計(jì)可以算是一個主題的靈魂所在。設(shè)計(jì)時需要把握好整體的氛圍，并注意保證文字的清晰度。</strong></span>
</p>
<p>
<img title="手機(jī)QQ主題皮膚設(shè)計(jì)經(jīng)驗(yàn)分享" alt="手機(jī)QQ主題皮膚設(shè)計(jì)經(jīng)驗(yàn)分享" src="http://www.tuyiyi.com/images/zone/201702/152F261P-8.jpg" />
</p>
<p>
<span style="font-size:14px;"><strong>經(jīng)過大量的經(jīng)驗(yàn)，累積下一些常規(guī)的設(shè)計(jì)方法，做到有計(jì)劃地去思考，有效提率。</strong></span>
</p>
<p>
<img title="手機(jī)QQ主題皮膚設(shè)計(jì)經(jīng)驗(yàn)分享" alt="手機(jī)QQ主題皮膚設(shè)計(jì)經(jīng)驗(yàn)分享" 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兩個版本，兩個版本有所區(qū)別。我們分別設(shè)立了兩份切圖規(guī)范，并以文字標(biāo)記輸出說明，讓新的設(shè)計(jì)師也能快速上手。因?yàn)橐曈X稿里并不包含所有切圖，由部分小圖標(biāo)是在此階段設(shè)計(jì)與延伸。</strong></span>
</p>
<p>
<img title="手機(jī)QQ主題皮膚設(shè)計(jì)經(jīng)驗(yàn)分享" alt="手機(jī)QQ主題皮膚設(shè)計(jì)經(jīng)驗(yàn)分享" 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>漸漸地，越來越多的設(shè)計(jì)師有了測試的經(jīng)驗(yàn)，當(dāng)發(fā)現(xiàn)一些新的問題時，大家會一起在小組上討論解決方法，以免日后再發(fā)生類似的問題。</strong></span>
</p>
<p>
<img title="手機(jī)QQ主題皮膚設(shè)計(jì)經(jīng)驗(yàn)分享" alt="手機(jī)QQ主題皮膚設(shè)計(jì)經(jīng)驗(yàn)分享" 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>最后，按套圖規(guī)范輸出預(yù)覽圖與效果圖，就可以上架到手Q主題中心。</strong></span>
</p>
<p>
<img title="手機(jī)QQ主題皮膚設(shè)計(jì)經(jīng)驗(yàn)分享" alt="手機(jī)QQ主題皮膚設(shè)計(jì)經(jīng)驗(yàn)分享" src="http://www.tuyiyi.com/images/zone/201702/152F2OG-12.jpg" />
</p>
<p>
<strong><span style="font-size:14px;">創(chuàng)造更多的價值</span></strong>
</p>
<p>
<strong><span style="font-size:14px;">1.從客戶要求 到自薦主題</span></strong>
</p>
<p>
<span style="font-size:14px;"><strong>除了客戶提交需求給我們之外，我們還會主動構(gòu)思一些主題草圖給客戶，既讓客戶看到我們的設(shè)計(jì)熱誠，也提高了設(shè)計(jì)師的積極性，從而創(chuàng)造更多的價值。</strong></span>
</p>
<p>
<img title="手機(jī)QQ主題皮膚設(shè)計(jì)經(jīng)驗(yàn)分享" alt="手機(jī)QQ主題皮膚設(shè)計(jì)經(jīng)驗(yàn)分享" 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>某些特別優(yōu)秀的主題，還會得到延伸其他產(chǎn)品的機(jī)會。從而挖掘更多的價值。此外，公司還組織一些表情設(shè)計(jì)比賽，期間出現(xiàn)了不少優(yōu)秀作品，也得到了采用。</strong></span>
</p>
<p>
<img title="手機(jī)QQ主題皮膚設(shè)計(jì)經(jīng)驗(yàn)分享" alt="手機(jī)QQ主題皮膚設(shè)計(jì)經(jīng)驗(yàn)分享" src="http://www.tuyiyi.com/images/zone/201702/152F23142-14.jpg" />
</p>
<p>
<strong><span style="font-size:14px;">優(yōu)秀作品展示</span></strong>
</p>
<p>
<strong><span style="font-size:14px;">1.黑白小怪獸</span></strong>
</p>
<p>
<img title="手機(jī)QQ主題皮膚設(shè)計(jì)經(jīng)驗(yàn)分享" alt="手機(jī)QQ主題皮膚設(shè)計(jì)經(jīng)驗(yàn)分享" 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="手機(jī)QQ主題皮膚設(shè)計(jì)經(jīng)驗(yàn)分享" alt="手機(jī)QQ主題皮膚設(shè)計(jì)經(jīng)驗(yàn)分享" 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="手機(jī)QQ主題皮膚設(shè)計(jì)經(jīng)驗(yàn)分享" alt="手機(jī)QQ主題皮膚設(shè)計(jì)經(jīng)驗(yàn)分享" 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="手機(jī)QQ主題皮膚設(shè)計(jì)經(jīng)驗(yàn)分享" alt="手機(jī)QQ主題皮膚設(shè)計(jì)經(jīng)驗(yàn)分享" 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="手機(jī)QQ主題皮膚設(shè)計(jì)經(jīng)驗(yàn)分享" alt="手機(jī)QQ主題皮膚設(shè)計(jì)經(jīng)驗(yàn)分享" 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="手機(jī)QQ主題皮膚設(shè)計(jì)經(jīng)驗(yàn)分享" alt="手機(jī)QQ主題皮膚設(shè)計(jì)經(jīng)驗(yàn)分享" 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="手機(jī)QQ主題皮膚設(shè)計(jì)經(jīng)驗(yàn)分享" alt="手機(jī)QQ主題皮膚設(shè)計(jì)經(jīng)驗(yàn)分享" 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="手機(jī)QQ主題皮膚設(shè)計(jì)經(jīng)驗(yàn)分享" alt="手機(jī)QQ主題皮膚設(shè)計(jì)經(jīng)驗(yàn)分享" 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.alimai.net/blog/admin" target="_blank"><span style="font-family:'Microsoft YaHei';font-size:16px;">藍(lán)藍(lán)設(shè)計(jì)</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.alimai.net/" target="_blank"><span style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;font-family:'Microsoft YaHei';padding-top:0px;">www.alimai.net </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.alimai.net/index.html" target="_blank"><span style="font-family:'Microsoft YaHei';font-size:16px;">界面設(shè)計(jì)公司</span></a></span><span style="font-family:'Microsoft YaHei';font-size:16px;">，為期望卓越的國內(nèi)外企業(yè)提供卓越的</span><span style="font-family:'Microsoft YaHei';color:#64451d;font-size:16px;">UI界面設(shè)計(jì)</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.alimai.net/bs.html"><span style="font-family:'Microsoft YaHei';font-size:16px;">BS界面設(shè)計(jì) </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.alimai.net/csjm.html"><span style="font-family:'Microsoft YaHei';font-size:16px;">cs界面設(shè)計(jì) </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.alimai.net/scjm.html" target="_blank"><span style="font-family:'Microsoft YaHei';font-size:16px;">ipad界面設(shè)計(jì)</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.alimai.net/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.alimai.net/baozhuang.html"><span style="font-family:'Microsoft YaHei';font-size:16px;">包裝設(shè)計(jì) </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.alimai.net/icon.html"><span style="font-family:'Microsoft YaHei';font-size:16px;">圖標(biāo)定制 </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.alimai.net/yhty.html"><span style="font-family:'Microsoft YaHei';font-size:16px;">用戶體驗(yàn) 、交互設(shè)計(jì)、 </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.alimai.net/web.html" target="_blank"><span style="font-family:'Microsoft YaHei';font-size:16px;">網(wǎng)站建設(shè)</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.alimai.net/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.alimai.net/xz.html"><span style="font-family:Microsoft YaHei;">平面設(shè)計(jì)服務(wù)</span></a></span></span></span></span></strong></em></strong></strong></span></span></strong></span></strong></span></span></span></span></strong></span></span></span>
</p>
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.alimai.net