UI最重要組建之一就是圖標井佑，隨著扁平化設計的發(fā)展趨勢属铁，越來越注重圖標的簡潔與寓意表達，平面圖標已占主導地位躬翁。每位設計師所處的階段所關注的要點是不一樣的焦蘑，我把圖標設計分為2個階段：初階與高階，這樣分是為了有步驟性的學習和進階的加強姆另，當然喇肋，能人的話一步到位，對于新人來講會較難迹辐，需要實際工作中輔導與自己經驗總結蝶防。我不會華麗高大上的語言，但是我可以分享一些實實在在的基礎方法明吩，也是這幾年會給帶的學生反復必講的入門輔導间学，有自己成熟方法表達的設計師可忽略這里，這里先說初階的設計關鍵要點印荔。
目錄：
概念類別設計技法要點系列成型圖標
一低葫、概念類別
扁平化圖標大部分無非就是剪影表現，而這里為什么重點是講圖標的形狀設計仍律，而非色彩嘿悬，因為一切先有形才考慮下一步。形不好再怎么營造整體風格都白費力水泉，好比建筑造型與裝修的關系善涨，而色彩等營造的風格都可另起文章分析 窒盐。圖標造型表現上無非就是典型的2種：面與線 。運用這兩種基礎元素去造型也可以進行多種組合不同的表現 钢拧。組合造型一般有單體造型蟹漓、多個元素組合造型，線與面之間的獨立與結合的變化源内。
簡化的微寫實圖標
這類通常是彩色一體表現葡粒，造型和組合上較寫實，不是純剪影膜钓，是寫實過渡來的簡化嗽交，又接近剪影，扁平簡化設計呻此，這里主要是利用面和顏色來進行造型的設計轮纫。質感風格上也有6種（已有人分析），大概是純平面焚鲜、折疊掌唾、輕質感、折紙風忿磅、長投影糯彬、微立體。這種相對剪影的好畫很多葱她，也更加容易塑造風格撩扒，更多是在色彩上有得發(fā)揮和考究，用在界面里也是最為突出的吨些。最近還非常流行用色塊來進行二維搓谆、三維的裝飾表達，叫所謂的“低面建暮朗“,感興趣的去搜一下泉手。
上面提到的元素組合，比如下圖這個圖標目前是2個元素–信封加信紙偶器，如果還要再加什么功能狀態(tài)示意斩萌，最多在右上角加個很小的消息提醒。因為元素越多越復雜屏轰，所表達的含義也就越多颊郎，同時也會影響造型的調動。不管多少個元素總有一個最重要的對象霎苗，其他為輔助圖形姆吭，在塑形大小復雜度上有區(qū)別。
剪影的正負形圖標
這類通常是單色表現唁盏，當然也有綜合彩色的猾编。其更加簡潔抽象瘤睹， 言簡意賅升敲，高度提煉精華答倡，講究表象意境，具有理解的門檻驴党。所以這才是最難設計的一關瘪撇。非常考究設計的理性與感性之間在功能傳達上的邏輯思維港庄。也是UI界所謂現代極簡主義的代表倔既，注意，沒把握好就會變得很“空虛”鹏氧，把握好了就是時尚的feel啦~
負形圖標
是以線繪制的圖形渤涌，高度的輪廓概括，就跟畫骨骼一樣的要求精準到位把还，也叫線形圖標实蓬。負形剪影是所有圖標中最講究也最難表達型的一種風格，如果畫不好就很容易俗氣和簡陋吊履。
正形圖標
是以面繪制的圖形安皱，也有和線綜合表現情況，自己根據需要進行創(chuàng)造變化吧艇炎。通常與負形圖標之間做當前狀態(tài)的轉換酌伊，手機tab上最常見，如ios7缀踪。
優(yōu)點：簡潔清新優(yōu)雅居砖；極具現代感（雖然遠古時代就有高度概括的符號表達，這里指的范圍是互聯(lián)網上的全新應用）驴娃；具有設計與涵義綜合的拓展性奏候；還可以完成一些抽象詞匯的圖形傳達。
圖標為上傳到云端的之意托慨，這里的主對象是云鼻由，所以箭頭和云的比例是不同的，上傳箭頭是輔助圖形厚棵。了解界定多元素之間的主次關系蕉世，就能夠把握一個整體的造型走向。典型的基礎表現就是上面兩種婆硬，然后在實際繪制中根據自己的喜好和設計來進行融合狠轻，可以得出更加豐富的表現。
二彬犯、設計技法要點
1向楼，關鍵節(jié)點繪制法
擬物化設計就是盡可能的繪制繁瑣細節(jié)查吊，追求豐富和相似度。而剪影圖標則是相反湖蜕，以簡練為繪制手段逻卖。但是細節(jié)就沒有嗎，不是的昭抒，而是更加謹慎認真的注重每一筆评也，且越來越優(yōu)雅。這里舉例剪影圖標繪制方法技巧灭返，3步驟可以搞定盗迟，看似又簡單又難，簡單的是只是繪制參照物輪廓熙含，保留基礎識別性罚缕，步驟很少；難的是這調整的過程與產品環(huán)境的融合性怎静，易用性邮弹，還有你自己的創(chuàng)意想法。
說簡單點就是去繁擇簡并經過思考改造過的設計過程消约。而最基本的最需要犀利眼神抓準的是造型的關鍵節(jié)點肠鲫，雛形出來后再根據想法調整。
提煉精華勾勒輪廓
通常在繪制已有參照物的基礎上去設計一個圖標或粮，可以根據你喜歡的造型參照物去進行分析导饲，先抓取到參照物的關鍵節(jié)點，幾何繪制出來一個相似的基本圖形氯材。
提煉的藝術渣锦，在這個教程里可以學習一下：《AI教程！教你創(chuàng)建超酷的權利的游戲家族線條抽象徽章》
調整線鋒優(yōu)雅得體
基礎雛形出來后就開始加入自己的想法調整線鋒氢哮，線條走向決定造型袋毙。這個時候就得要調多幾個版本了。設計師的處女座精細和糾結情結就在這里灑汗了冗尤，不斷調整對比听盖，挑選出一個最優(yōu)再進行下一步。
增特有細節(jié)出風格
最后一步的塑形裂七，就是畫龍點睛皆看！造型的特點就在這一步去完成。
對于新老設計師來說背零，這樣的方法都是比較可取好用的腰吟，交互設計師也可以這樣快速入門哦親！尤其是第一步驟徙瓶，能否非趁停快速的出雛形嫉称。下面是其他案例的設計方法欣賞，跟我上面總結的一樣道理灵疮。
2织阅，精致的基礎要素
精致即精細極致∈寂海看似簡單的圖標其實并不是隨便了事蒲稳，但知道了這些基本要素你就可以完成一個合格的圖標了。好的圖標是謹慎認真的注重每一筆每一像素每一矢量錨點的伍派，盡可能的往精美優(yōu)雅的方向努力吧騷年~
犀利清晰
需要鍛煉厲害的眼睛，使出你的火眼金星捕捉每個像素之差剩胁，像素滿格才能清晰的呈現诉植，細分出來通常會遇到以下3種情況，這也是最影響圖標基本質量的問題點昵观。
1) 輪廓發(fā)虛
圖標一定要用矢量繪制晾腔，但是新手很容易犯的第一個錯誤就是圖標模糊的問題，也不清楚為何會這樣啊犬。其實就是矢量邊緣模糊產生的問題灼擂，也是個人繪制的不良習慣造成。避免這個問題觉至，必須在100%畫布上繪制圖形剔应，而且不能直接推動圖標放大縮小，即使這樣改變大小了也要放大畫布調整路徑的錨點语御，反復查看及校正是否對齊1px網格峻贮，而不是0.1~0.9px茁计，正是不滿1px格才會生產虛線漓藕。而圓形的繪制保證十字架4個邊緣點對準就可以了。
2) 斜形發(fā)虛
斜線也是會有模糊與精致之分的活烙，不仔細對比其實是比較難看到問題碉纺，可能很多人都會碰到圖形進行傾斜效果時是有鋸齒的船万，那就是角度的處理問題了，自己進行多角度對比下試試骨田，會發(fā)現哪一個角度最清晰耿导。也可以將圖層進行雙層疊加，會非常犀利哦~
3) 像素不夠或多余
看下來都是像素發(fā)虛與清晰的原因都是一樣的盛撑，下面這個例子是箭頭在小尺寸情況下可點陣矢量像素繪制碎节，如果是大尺寸（如上面最大的箭頭示例）可以直接鋼筆繪制。
比例協(xié)調
圖形內部結構要注意元素構成之間的比例狮荔，有黃金比例分割也有感性的平衡方法胎撇。嚴謹的圖標比例可參照蘋果IOS圖標規(guī)范案例，打好內部統(tǒng)一結構線進行圖形繪制和比例分配殖氏。
