本教程通過模擬企業(yè)項目中圖標(biāo)優(yōu)化的真實案例，手把手教你如何快速繪制扁平化圖標(biāo)藤抡。
本教程謹(jǐn)代表個人觀點(diǎn)，不做企業(yè)宣傳用途抹估。
一套ICON系統(tǒng)的定義缠黍，是需要很多的步驟和方法論的支撐的，這樣做出來的ICON才是有靈魂的药蜻。
一瓷式、圖標(biāo)的作用
圖標(biāo)是一種抽象的，跨語言的符號语泽，它不僅是一種圖形贸典，更是一種標(biāo)識，它具有高度濃縮并快捷傳達(dá)信息踱卵、便于記憶的特性廊驼。隨著信息傳播速度和載體的快速增長，圖標(biāo)的使用頻率也在不斷提高惋砂。在設(shè)計圖標(biāo)之前妒挎，你有沒有想過圖標(biāo)的作用何在？通過反復(fù)思考西饵，有助于我們設(shè)計水平的提升酝掩。
經(jīng)過設(shè)計師的總結(jié)和提煉，把圖標(biāo)的作用歸結(jié)為4個點(diǎn)：裝飾眷柔、表意期虾、趣味和品宣。
1闯割、裝飾
是指通過圖標(biāo)對頁面進(jìn)行潤色彻消，使頁面看上去更加飽滿。同時宙拉，通過圖標(biāo)增加頁面的層次感，使頁面各部分內(nèi)容得以區(qū)分丙笋。裝飾作為圖標(biāo)的基礎(chǔ)作用谢澈，大多數(shù)圖標(biāo)都滿足裝飾的作用。
例如下圖中左側(cè)ENJOY的首頁中御板，icon作為頁面的亮點(diǎn)裝飾元素出現(xiàn)锥忿，在表意的基礎(chǔ)上，提高了頁面的識別性怠肋，在產(chǎn)品品牌推廣上功不可沒敬鬓。右側(cè)的餓了么也是一個很好的案例。
2、表意
圖標(biāo)的第二大功能就是表意钉答，在裝飾的基礎(chǔ)上有所升華础芍。直白來說，圖標(biāo)的表意體現(xiàn)在對于功能的解釋上数尿÷匦裕互聯(lián)網(wǎng)經(jīng)過這幾年的快速發(fā)展，用戶對于一些圖標(biāo)形成了一些約定俗成的認(rèn)知右蹦。我們在進(jìn)行產(chǎn)品設(shè)計時要做到心中有數(shù)诊杆，使用的時候切忌打破常規(guī)。
例如網(wǎng)易云音樂里的分享何陆、下載晨汹、播放等icon，和站酷里的閱讀贷盲、點(diǎn)贊宰缤、留言、收藏等icon晃洒，對于這些在用戶心智中形成固有模式的圖標(biāo)慨灭，我們使用的時候可以在此基礎(chǔ)上做變形、創(chuàng)新球及，但如果要打破用戶的習(xí)慣認(rèn)知氧骤，一定要謹(jǐn)慎。
3吃引、趣味
能帶給人愉悅感受的圖標(biāo)可以稱得上很好的圖標(biāo)了筹陵，這也就是圖標(biāo)的第三大功能。如果愉悅的同時有很好的表意性镊尺，無疑是一個極棒的圖標(biāo)了朦佩。
我們來看看QQ下面標(biāo)簽欄的icon是我們很熟悉的一組icon，在不同頁面進(jìn)行切換時庐氮，不僅icon有相對應(yīng)的小動效语稠，而且當(dāng)選中不同的頁面時，中間小人的眼睛也會隨之變化弄砍，一個微妙的小細(xì)節(jié)往往是打動用戶的關(guān)鍵之所在仙畦。
4、品牌宣傳
隨著互聯(lián)網(wǎng)ui趨勢概念的增強(qiáng)音婶，市面上的產(chǎn)品同質(zhì)化也越來越嚴(yán)重慨畸。那么如何能讓自家的產(chǎn)品脫穎而出？其中很重要的因素之一就是品牌塑造衣式。通過icon來進(jìn)行品牌傳達(dá)是一種簡單有效的方法寸士。
例如咸魚app很好的將icon結(jié)合品牌色庭敦，打造了個性化的視覺體驗眨业。大眾點(diǎn)評的V10改版更是通過整體的品牌升級鄙陡，重新對UI進(jìn)行了定義课舍，通過全新的icon展示，傳達(dá)了年輕化谐宙、娛樂化烫葬、社交化的產(chǎn)品理念。
二凡蜻、背景介紹
本次圖標(biāo)優(yōu)化的需求來源于積木盒子app的redesign搭综。
圖標(biāo)位置：位于積木盒子app一級頁面“發(fā)現(xiàn)頁”頂部的4個常駐活動入口。
由于本次優(yōu)化時間有限划栓，僅對這4個icon進(jìn)行優(yōu)化兑巾。如果優(yōu)化效果好，會考慮在后期繼續(xù)優(yōu)化運(yùn)營活動頁的整體ui忠荞。
原有圖標(biāo)樣式：
在app中的應(yīng)用：
結(jié)合前面講到的圖標(biāo)的作用蒋歌，我們對原有圖標(biāo)進(jìn)行分析。
我們從標(biāo)簽欄看出委煤，整個app分為4部分堂油，有首頁、投資碧绞、發(fā)現(xiàn)府框、我的四個一級頁面，而我們優(yōu)化的圖標(biāo)位于發(fā)現(xiàn)頁的一級頁面中讥邻。根據(jù)圖標(biāo)的4個作用我們來逐個進(jìn)行分析迫靖。
1、裝飾
原有圖標(biāo)起到了較強(qiáng)的裝飾性作用兴使，細(xì)節(jié)上非常到位系宜，顏色也很豐富，但仍然存在一定的問題发魄。
與pc相比盹牧，app的界面空間很有限，在如此小的空間里欠母，圖標(biāo)大小僅有50pt左右欢策，因此與豐富的細(xì)節(jié)相比，更看重其識別性赏淌。這組icon為面性icon，要求每一個色塊清晰可識別啄清，盡可能避免含糊不清的陰影或顏色六水，使其即使在小屏也能迅速被用戶所識別俺孙。
統(tǒng)一性欠缺，1掷贾、2睛榄、4的icon均為圓形icon中主要元素進(jìn)行破形處理，第3個icon圓形即主元素想帅，點(diǎn)綴的箭頭進(jìn)行破形處理场靴。1、2港准、3的icon破形部分均有陰影旨剥，而第4個icon破形部分沒有陰影。
2浅缸、表意
表意上基本明確轨帜。
“邀好友”為伸出的友誼之手。
“招財獎”利用招財貓為原型衩椒，如果再加入抽獎的元素則表意更佳蚌父。
“轉(zhuǎn)轉(zhuǎn)贏”利用轉(zhuǎn)輪的元素，很好的表達(dá)了轉(zhuǎn)盤抽獎的意思毛萌。
“周周樂”用寶箱來表意苟弛，雖不是特別貼切，但也不出錯阁将。如果結(jié)合實際的雙色球活動膏秫，則表意效果更佳。
3冀痕、趣味
本組icon有較高的趣味性荔睹，希望改版優(yōu)化能給用戶帶來同等程度的愉悅感受。
4言蛇、品牌宣傳
由于改版對品牌及產(chǎn)品定位進(jìn)行了全新升級僻他，因此新版icon希望更多的體現(xiàn)出年輕化，色彩上有更高的飽和度腊尚，與品牌logo風(fēng)格更貼近吨拗。
另外由于運(yùn)營活動的更新，希望icon在風(fēng)格上能有更好的延展性婿斥，便于后期相同風(fēng)格的icon繪制劝篷。
總結(jié)：
通過以上分析，我們對新版icon提出了4個設(shè)計要點(diǎn)民宿，對圖標(biāo)優(yōu)化的風(fēng)格定位起到指導(dǎo)性作用：高識別性娇妓、表意清晰、貼近品牌活鹰、易于擴(kuò)展
三哈恰、圖標(biāo)設(shè)計五步法
1只估、定義
圖標(biāo)是界面中的一部分，因此在設(shè)計圖標(biāo)時着绷，我們首先要考慮圖標(biāo)的使用場景蛔钙。根據(jù)圖標(biāo)的使用場景的關(guān)鍵因素，進(jìn)行樣式的推導(dǎo)荠医∮跬眩可以從以下四個方面進(jìn)行分析。
（1）承載的作用：發(fā)現(xiàn)頁按功能可劃分為2部分：活動入口彬向、積分商城兼贡。由于積分商城圖片質(zhì)量較差，因此這4個圖標(biāo)成為影響頁面是否美觀的重要因素幢泼。因此構(gòu)圖上以整齊統(tǒng)一為主紧显。考慮去除破形設(shè)計缕棵，改為統(tǒng)一的圓形icon孵班。
（2）重要性：此圖標(biāo)為當(dāng)前頁面最重要的ui元素，視覺層級較高招驴。應(yīng)通過設(shè)計篙程，增加活動入口的吸引力，提高點(diǎn)擊率别厘。
（3）所處頁面信息的復(fù)雜程度：發(fā)現(xiàn)頁信息較為簡單虱饿，僅有活動icon和積分商城2部分，因此在設(shè)計時触趴，可以考慮加入一些細(xì)節(jié)和質(zhì)感氮发，使頁面更加豐富。
（4）擴(kuò)展性要求：由于后續(xù)會就該設(shè)計風(fēng)格進(jìn)行更多圖標(biāo)設(shè)計冗懦，需制定出圖標(biāo)規(guī)范爽冕，方便后續(xù)樣式風(fēng)格延伸。
2披蕉、提煉
經(jīng)過上面的推導(dǎo)颈畸，我們對即將設(shè)計的圖標(biāo)風(fēng)格大體上有了定位，可以開始針對單個圖標(biāo)進(jìn)行設(shè)計没讲。由于圖標(biāo)設(shè)計時間有限眯娱，因此要在最短的時間里，得到最優(yōu)的效果爬凑。我使用的是發(fā)散關(guān)鍵詞—提煉關(guān)鍵詞—提煉特征的方法徙缴。
以邀好友為例：首先進(jìn)行頭腦風(fēng)暴，邀好友的活動內(nèi)容大致為邀請好友后嘁信，自己和好友均可獲得超值大禮包娜搂。我列出的關(guān)鍵詞有：遞東西的手迁霎、愛心吱抚、緊握在一起的手百宇、禮包、優(yōu)惠券秘豹、紅包携御、招財貓、溫暖既绕、擁抱啄刹。通過歸納和提煉，最終保留的關(guān)鍵詞為遞東西的手凄贩，和禮包誓军。設(shè)計上體現(xiàn)溫暖的感覺。
同理進(jìn)行其他icon的關(guān)鍵詞提煉疲扎。
接下來進(jìn)行圖片參考昵时，經(jīng)過素材收集，最終選定靈感參考圖片椒丧。參考圖片種類可以很豐富壹甥，可以選擇風(fēng)格近似的插畫，也可找實物進(jìn)行參考壶熏，唯一要注意的是句柠，內(nèi)容一定要符合提煉的關(guān)鍵詞。
由于設(shè)計時間并不富裕棒假，設(shè)計時可以盡量借鑒參考圖片上的元素溯职。還是以邀好友為例，參考圖片我找到了禮包原型帽哑，和手的原型谜酒，接下來很容易將兩者進(jìn)行結(jié)合，繪制出我們所需要的icon內(nèi)容祝拯。
3甚带、風(fēng)格
通過關(guān)鍵詞提煉，我們已經(jīng)對即將繪制的圖標(biāo)有了大體的概念佳头，但在顏色和風(fēng)格上還需要進(jìn)一步的考究鹰贵。為了快速出圖，風(fēng)格借鑒必不可少康嘉。在這里要著重強(qiáng)調(diào)借鑒和抄襲的界限碉输。我們所做的是優(yōu)秀作品風(fēng)格的提取，并不表示照搬優(yōu)秀設(shè)計作品亭珍。下面敷钾，我將從風(fēng)格提取枝哄、造型提取和顏色提取三個方面進(jìn)行借鑒的詳細(xì)講解。
圖標(biāo)的種類多種多樣阻荒，經(jīng)過上文對圖標(biāo)風(fēng)格的推導(dǎo)挠锥，我們將圖標(biāo)風(fēng)格大體定位：圓形面性圖標(biāo)，扁平風(fēng)侨赡，色彩鮮艷蓖租。我們發(fā)現(xiàn)，好好住app的插畫風(fēng)格清新扁平年輕化羊壹，顏色上雖然和品牌色有出入蓖宦，但用色方法上值得借鑒，因此打算從提煉這組插畫的風(fēng)格入手油猫。
通過觀察稠茂，不難總結(jié)出，這組icon 在風(fēng)格上情妖，采取扁平的風(fēng)格睬关，將主題內(nèi)容抽象畫，去除多余的透視鲫售、肌理共螺、投影關(guān)系，配合輕微的漸變色情竹，給人以清爽舒適的感覺藐不。
造型上：用簡單的幾何圖形和不規(guī)則的圖形的進(jìn)行組合，畫面主體部分顯示秦效，并搭配適當(dāng)留白雏蛮，制造出畫面的空間感。
顏色上：大面積使用同色系阱州，營造和諧的氛圍挑秉；鄰近色作為點(diǎn)綴，使畫面更為生動活潑（多為黃色）苔货；利用消色（白色）表達(dá)明暗關(guān)系犀概，起平衡作用。
在顏色設(shè)定上夜惭，并不建議大家直接吸取參考的顏色姻灶，而是通過規(guī)律的提煉，進(jìn)行大膽嘗試诈茧。在設(shè)計icon時产喉，我利用同色系+消色+黃色點(diǎn)綴，進(jìn)行了4種顏色嘗試。
4曾沈、繪制
經(jīng)過之前的關(guān)鍵詞提煉这嚣，找出元素參考，再根據(jù)風(fēng)格和顏色提煉塞俱，選定繪制的主色和點(diǎn)綴色姐帚，繪制過程就變得簡單多了。
繪制圖標(biāo)時敛腌，要注意圖層之間的遮擋關(guān)系卧土。即使畫面只露出了主體物的一部分，也要考慮主體物的形狀和比例是否正確像樊。如果對主體的結(jié)構(gòu)把握不好，可以繼續(xù)尋找類似的插畫或照片進(jìn)行參考旅敷，或?qū)ΜF(xiàn)實物體進(jìn)行觀察生棍。另外需要確保畫面中每一個鄰近的色塊，結(jié)構(gòu)和顏色都清晰可辨媳谁，不要有含糊不清的結(jié)構(gòu)涂滴，或糊在一起分不清邊界的顏色，不然會顯得畫面很臟晴音，同時也會降低整體圖標(biāo)的識別度柔纵。
5、調(diào)整
通過上面4個把單個圖標(biāo)設(shè)計好后锤躁，需要從整體上和細(xì)節(jié)上重新審查我們的圖標(biāo)搁料，看看是否整體能夠達(dá)到一致的視覺統(tǒng)一和視覺平衡。有時候自己設(shè)計的圖標(biāo)會因為過于熟悉而不易發(fā)現(xiàn)問題系羞，這時候也可以請教下你的朋友郭计，從旁觀者的角度提出問題，往往會得到建設(shè)性的意見椒振。越到后面的階段越需要我們耐心和細(xì)心的調(diào)整昭伸，以達(dá)到更好的效果。
（1）以我們的圖標(biāo)為例澎迎，通過整體觀察庐杨，發(fā)現(xiàn)在統(tǒng)一性和視覺平衡上存在一定的問題。第1個圖標(biāo)主體物右下部分進(jìn)行隱藏夹供，2灵份、3圖標(biāo)左下部位隱藏，而4圖標(biāo)上面部分被隱藏罩引，造成雜亂無序的視覺體驗各吨。經(jīng)過位置調(diào)整和主體物的翻轉(zhuǎn)，統(tǒng)一把主體物的左下角進(jìn)行隱藏，增加了圖標(biāo)的統(tǒng)一性揭蜒。
（2）進(jìn)一步觀察發(fā)現(xiàn)横浑，3圖標(biāo)的轉(zhuǎn)盤外圈和圓心部位給人以高起的感覺，原因是陰影給的過重屉更，使其明顯與其他圖標(biāo)不協(xié)調(diào)徙融。通過調(diào)整陰影透明度和局部顏色，最終得到了與其他icon協(xié)調(diào)的視覺呈現(xiàn)瑰谜。
（3）再進(jìn)行細(xì)節(jié)觀察欺冀，2圖標(biāo)主體物在比例上有一些不舒服的地方，于是把老虎機(jī)的結(jié)構(gòu)進(jìn)行了調(diào)整優(yōu)化萨脑，使其看起來更舒服隐轩。
四、擴(kuò)展設(shè)計說明
為了方便后續(xù)圖標(biāo)的延展渤早，還要將所繪制的圖標(biāo)要點(diǎn)進(jìn)行總結(jié)职车，概括出擴(kuò)展設(shè)計說明，一來方便以后查看鹊杖，二來其他同事進(jìn)行同類icon繪制時悴灵，可以迅速把握圖標(biāo)特點(diǎn)，繪制出一致統(tǒng)一的圖標(biāo)骂蓖。
1积瞒、表意上，突出主題登下，表意清晰茫孔；
2、顏色上庐船，采用同色系為主色银酬，配合黃色或鄰近色進(jìn)行點(diǎn)綴，利用同色系的消色配合筐钟，表達(dá)明暗關(guān)系的變化揩瞪；
3、風(fēng)格上篓冲，以扁平風(fēng)為主李破，適量加入漸變色，營造年輕化的感官效果壹将；
4嗤攻、主體物統(tǒng)一進(jìn)行左下角的隱藏，圓形的右上角適當(dāng)留白诽俯，增加icon的空氣感妇菱；
5、陰影上，考慮到視覺效果的統(tǒng)一闯团，如需添加陰影辛臊，不易過深。
五房交、總結(jié)
以上四點(diǎn)可以幫助大家在繪制圖標(biāo)時捋清思路彻舰，摸清方法。扁平化風(fēng)格特點(diǎn)較為突出候味，具有很高的通用性刃唤，大部分日常設(shè)計中都會用到。當(dāng)然寫這篇教程的初衷白群，并不只是希望大家學(xué)會這種設(shè)計風(fēng)格尚胞，而是希望能在設(shè)計過程中進(jìn)行思考和方法總結(jié)。設(shè)計產(chǎn)物是靈活的川抡，但方法是可以融會貫通的辐真。在今后的工作中，不管是什么風(fēng)格崖堤，是圖標(biāo)還是插畫，我們都可以參考以上的設(shè)計方法來進(jìn)行設(shè)計耐床。
第一次手寫教程密幔，有不清楚或者不完善的地方希望大家多包涵。
參考文獻(xiàn)：
