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

一.概念類別

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2.2圖例來源于Digial Art

2.3圖例來源于iconwerk

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

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

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

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

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

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

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

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

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

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

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

總結(jié)一下上面的處理方法，堅(jiān)持最少發(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)線進(jìn)行圖形繪制和比例分配。

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

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

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

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

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

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

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

3.1圖例來源于iconwerk

3.5圖例來源于Jee

結(jié)尾

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