用戶界面最重要的組成部分之一是圖標(biāo)。隨著平面設(shè)計的發(fā)展趨勢，越來越注重圖標(biāo)的簡約和寓意表達，平面圖標(biāo)一直占據(jù)主導(dǎo)地位。每個設(shè)計師在不同階段關(guān)注的重點是不一樣的。我把圖標(biāo)設(shè)計分為兩個階段——初級階段和高級階段。這種劃分是為了循序漸進的學(xué)習(xí)和高級強化。當(dāng)然新人很難一步到位，需要實際工作指導(dǎo)和自己的經(jīng)驗總結(jié)。我不會說花里胡哨、文質(zhì)彬彬的語言，但我可以分享一些實用的基本方法，這也是近年來學(xué)生們會反復(fù)教授的入門指導(dǎo)。有自己成熟表達方法的設(shè)計師可以忽略這一點。這里先說一下初步設(shè)計的要點。

一.概念類別

大多數(shù)平面圖標(biāo)無非是剪影，為什么這里的重點是圖標(biāo)的形狀設(shè)計，而不是顏色，因為在考慮下一步之前，一切都是有形的？造型再差，創(chuàng)造整體風(fēng)格也是徒勞的，比如建筑造型和裝飾的關(guān)系，色彩創(chuàng)造的風(fēng)格可以分開分析。圖標(biāo)無非就是兩種典型的類型：面和線。使用這兩個基本元素來建模也可以用于各種組合和不同的性能。組合一般包括單元素建模、多元素組合建模、線和面之間獨立組合變化。

1.簡化的微現(xiàn)實圖標(biāo)

這種通常是色彩的組合，在造型和組合上更為寫實，不是純粹的剪影，而是從寫實過渡而來的簡化，接近剪影和平面的簡化設(shè)計。在這里，我們主要使用面和顏色來設(shè)計形狀。還有六種紋理(有人分析過)，大概是純平面，折疊，輕紋理，折紙，長投影，微立體。這種好的素描有很多，造型比較容易。更多的是用在了色彩和精致上，在界面上也是最突出的。最近也很流行用色塊進行二維和三維的裝飾表達，叫做“低面造型”。如果你感興趣，就搜索一下。

上面提到的元素組合，比如下圖中的圖標(biāo)目前是兩個元素——信封加信紙。如果想添加任何功能狀態(tài)指示，最多在右上角添加一個小消息提醒。因為元素越多，越復(fù)雜，表達的意思就越多，同時也會影響造型的動員。無論有多少元素，總有一個是最重要的對象，其他都是輔助圖形，在塑造大小的復(fù)雜程度上是不同的。

1.1這個半原創(chuàng)的傳說

這種剪影的正負(fù)形圖標(biāo)通常是單色的，當(dāng)然也有綜合色的。它更簡潔抽象，簡潔凝練，高度精煉，外觀和意境細(xì)膩，有理解的門檻。所以這是最難設(shè)計的層次。非常講究設(shè)計理性與感性之間功能溝通的邏輯思維。也是UI領(lǐng)域所謂現(xiàn)代極簡主義的代表。注意，把握不好會變“空”，把握好了會有時尚感~

負(fù)形圖標(biāo)是一個線條勾勒的人物，輪廓很高。就像畫骨頭一樣，需要精度，也叫線性圖標(biāo)。負(fù)面剪影是所有圖標(biāo)中最精致、最難表達的風(fēng)格。如果畫得不好，很容易俗氣、粗糙。

正形圖標(biāo)是由曲面繪制的圖形，也有線和線的綜合表現(xiàn)。根據(jù)自己的需要做出改變。通常情況下，當(dāng)前狀態(tài)是用負(fù)圖標(biāo)轉(zhuǎn)換的，這在手機標(biāo)簽上最常見，比如ios7。

優(yōu)點：簡單、清新、優(yōu)雅；非常現(xiàn)代(雖然古代有高度泛化的符號表達，這里的范圍是指互聯(lián)網(wǎng)上全新的應(yīng)用)；隨著設(shè)計和意義的全面拓展；也可以完成一些抽象詞語的圖形化交流。

1.2本文原創(chuàng)圖例

圖標(biāo)意味著上傳到云端。這里的主要對象是云，所以箭頭與云的比例不同，上<愛尬聊_讓生活聊出新高度>傳箭頭是輔助圖。通過了解多種元素之間的主次關(guān)系，我們可以掌握

1's擬物化設(shè)計就是盡可能地畫出繁瑣的細(xì)節(jié)，追求豐富性和相似性。另一方面，剪影圖標(biāo)則相反，以簡潔為繪制方法。但是沒有細(xì)節(jié)，沒有，反而更加細(xì)心認(rèn)真的注意每一筆，而且越來越優(yōu)雅。這里有一個如何繪制剪影圖標(biāo)的例子。它可以分三步完成，看起來簡單又困難。簡單的就是畫出參考對象的輪廓，保持基本的識別，步驟少。難的是這個調(diào)整過程與產(chǎn)品環(huán)境、易用性和你自己的創(chuàng)意的融合。簡單來說就是.關(guān)鍵節(jié)點繪制法和去繁擇簡并經(jīng)過,最基本需要犀利眼光的是建模的關(guān)鍵節(jié)點，原型出來后會根據(jù)思路進行調(diào)整。

思考改造過的設(shè)計過程。通常在繪制現(xiàn)有參考對象的基礎(chǔ)上設(shè)計一個圖標(biāo)，可以根據(jù)你喜歡的建模參考對象進行分析。首先抓取參考對象的關(guān)鍵節(jié)點，在幾何上畫出一個類似的基本圖形。提煉精華勾勒輪廓基金會的雛形出來后，開始加入自己的想法調(diào)整線鋒，線向決定造型。這時候就需要再調(diào)整幾個版本。設(shè)計師處女座細(xì)膩糾結(jié)的情結(jié)在這里揮汗如雨，不斷調(diào)整對比，挑出最好的，再進行下一步。塑造調(diào)整線鋒優(yōu)雅得體的最后一步是畫龍點睛！建模的特點在這一步完成。

2.1本文原創(chuàng)圖例

對于新老設(shè)計師來說，這種方法更可取，也更容易使用，交互設(shè)計師也可以快速上手。尤其是第一步，是否能很快成型。以下是它的

他案例的設(shè)計方法欣賞，跟我上面總結(jié)的一樣道理。

2.2圖例來源于Digial Art

2.3圖例來源于iconwerk

2、精致的基礎(chǔ)要素精致即精細(xì)極致。看似簡單的圖標(biāo)其實并不是隨便了事，但知道了這些基本要素你就可以完成一個合格的圖標(biāo)了。好的圖標(biāo)是謹(jǐn)慎認(rèn)真的注重每一筆每一像素每一矢量錨點的，盡可能的往精美優(yōu)雅的方向努力吧騷年~
犀利清晰

需要鍛煉厲害的眼睛，使出你的火眼金星捕捉每個像素之差，像素滿格才能清晰的呈現(xiàn)，細(xì)分出來通常會遇到以下3種情況，這也是最影響圖標(biāo)基本質(zhì)量的問題點。

第一種情況：輪廓發(fā)虛

圖標(biāo)一定要用矢量繪制，但是新手很容易犯的第一個錯誤就是圖標(biāo)模糊的問題，也不清楚為何會這樣。其實就是矢量邊緣模糊產(chǎn)生的問題，也是個人繪制的不良習(xí)慣造成。避免這個問題，必須在100%畫布上繪制圖形，而且不能直接推動圖標(biāo)放大縮小，即使這樣改變大小了也要放大畫布調(diào)整路徑的錨點，反復(fù)查看及校正是否對齊1px網(wǎng)格，而不是0.1~0.9px，正是不滿1px格才會生產(chǎn)虛線。而圓形的繪制保證十字架4個邊緣點對準(zhǔn)就可以了。

2.4本文原創(chuàng)圖例

第二種情況：斜形發(fā)虛

斜線也是會有模糊與精致之分的，不仔細(xì)對比其實是比較難看到問題，可能很多人都會碰到圖形進行傾斜效果時是有鋸齒的，那就是角度的處理問題了，自己進行多角度對比下試試，會發(fā)現(xiàn)哪一個角度最清晰。也可以將圖層進行雙層疊加，會非常犀利哦~

2.5本文原創(chuàng)圖例

第三種情況：像素不夠或多余

看下來都是像素發(fā)虛與清晰的原因都是一樣的，下面這個例子是箭頭在小尺寸情況下可點陣矢量像素繪制，如果是大尺寸（如上面最大的箭頭示例）可以直接鋼筆繪制。

2.6本文原創(chuàng)圖例

總結(jié)一下上面的處理方法，堅持最少發(fā)虛原則：

2.7本文原創(chuàng)圖例

比例協(xié)調(diào)圖形內(nèi)部結(jié)構(gòu)要注意元素構(gòu)成之間的比例，有黃金比例分割也有感性的平衡方法。嚴(yán)謹(jǐn)?shù)膱D標(biāo)比例可參照蘋果iOS圖標(biāo)規(guī)范案例，打好內(nèi)部統(tǒng)一結(jié)構(gòu)線進行圖形繪制和比例分配。

2.8來自蘋果圖標(biāo)及來自Seevi Kargwal圖例

如果頭眼昏花嫌麻煩，也可靠經(jīng)驗感覺快速完成一個具有平衡感的圖標(biāo)。

2.9本文原創(chuàng)圖例

視差平衡同一個尺寸規(guī)格，但根據(jù)不同形狀的圖標(biāo)，會導(dǎo)致面積占比引起的視差大小不同，但要在參考尺寸范圍內(nèi)繪制進行調(diào)整。以下圖標(biāo)示例都是撐滿方框邊緣繪制，按道理這好像是準(zhǔn)確的，但由于人的肉眼會有視差問題，所以做的設(shè)計就要暫時拋開科學(xué)，以人的真實情況去判斷再調(diào)整。

2.10本文原創(chuàng)圖例

三.系列成型圖標(biāo)

能夠熟悉掌握完以上基礎(chǔ)要素，恭喜你可以大膽的去創(chuàng)造系列圖標(biāo)了，當(dāng)個數(shù)圖標(biāo)設(shè)計確定好后，接力的圖標(biāo)必須延展其風(fēng)格設(shè)定：造型規(guī)則、樣式、細(xì)節(jié)特征等要素統(tǒng)一設(shè)計–繁衍具同視覺與內(nèi)在含義屬性的圖標(biāo)。

3.1圖例來源于iconwerk

3.5圖例來源于Jee

結(jié)尾

值得注意的是在簡約與裝飾之間的平衡要靠自己的把握，正是這個把握的度是考驗設(shè)計師是否成熟的表現(xiàn)。進階的優(yōu)秀圖標(biāo)是能夠平衡于識別性、簡約與裝飾之間的琢磨，具有功能又具情感的。希望本文對新同學(xué)有幫助，歡迎一起探討和補充。