玩dribbble的時候每次發(fā)icon都有很多人喜歡，可能自己對icon圖標(biāo)理解還可以，所以寫下了自己的想法，希望對大家有幫助。

一、圖標(biāo)的定義

1. 什么是圖標(biāo)

圖標(biāo)是具有明確指代含義的計算機(jī)圖形。從功能分類角度分為啟動圖標(biāo)、應(yīng)用圖標(biāo)、功能圖標(biāo)。

2.?什么是功能圖標(biāo)

功能圖標(biāo)是具有指代意義且具有功能標(biāo)識的圖形，它不僅是一種圖形，更是一種標(biāo)識，它具有高度濃縮并快捷傳達(dá)信息、便于記憶的特性。

二、圖標(biāo)的種類

具象圖標(biāo)：保持事物本來固有形態(tài)進(jìn)行優(yōu)化設(shè)計。如汽車，輪船，飛機(jī)，車票…

抽象圖標(biāo)：不是一個具體的事物，更趨于概念化。如個人中心，空間，模式，最近等……

三、圖標(biāo)的風(fēng)格

1. 面性圖標(biāo)

面性圖標(biāo)是由一根封閉的線造成了面，面性圖標(biāo)同樣具有大小、形狀、色彩、肌理等造型元素。直面圖標(biāo)具有穩(wěn)重、剛毅的男性化特征；曲面具有動態(tài)、柔和的女性化特征。

（1）不透明度圖標(biāo)?

不透明度圖標(biāo)是通過調(diào)節(jié)圖標(biāo)的部分面性結(jié)構(gòu)來增加層次感，從配色角度屬于同色系。(圖design by NO-921)

（2）光影圖標(biāo)?

三大面五大調(diào)，通過調(diào)節(jié)面的反光和陰影來增加面性圖標(biāo)的紋理。在扁平時代的今天保留著微擬物風(fēng)。

（3）多彩色圖標(biāo)?

多彩色給人很酷炫的感覺，從明度角度還是要提取深淺的顏色來代表圖標(biāo)的黑白灰。(圖design by Kyle Anthony Miller)

2. 線性圖標(biāo)

線性圖標(biāo)是通過粗細(xì)一致的線條繪制，高度概括出來的圖標(biāo)，既能讓人賞心悅目，又給用戶帶來創(chuàng)造和應(yīng)用的樂趣。

（1）圓角圖標(biāo)?

圓角圖標(biāo)給人以親和力，也有柔軟，軟弱的一面。在圖標(biāo)設(shè)計越來越精美的今天，圓角圖標(biāo)的應(yīng)用行業(yè)已經(jīng)越來越廣泛。比如女性，母嬰，兒童，旅游… (圖design by Stephen Andrew Murrill)

（2）直角圖標(biāo)?

直角圖標(biāo)給人以銳利，堅強(qiáng)，果斷，不拖泥帶水的一面。最先讓人眼前一亮的是魅族系統(tǒng)Flyme6里面的圖標(biāo)，它就是用的直角，給人明快干凈的感覺。

真正更好的詮釋它內(nèi)在的含義的非京東金融里的圖標(biāo)了 ，投資理財?shù)臅r候需要人們果斷作出判斷。理財有風(fēng)險，投資需謹(jǐn)慎。

直角的感覺讓人當(dāng)機(jī)立斷，不拖泥帶水，快買快出。如果用圓角就感覺柔一點，感覺做事優(yōu)柔寡斷。所以一下子在金融領(lǐng)域被做成了標(biāo)桿式的功能圖標(biāo)。

（3）斷點圖標(biāo)

斷點圖標(biāo)是點線面演化的一種產(chǎn)物。在最開始uiUI興起的時候，設(shè)計師們不滿足于單線條的功能圖標(biāo)，通過點線面增加形式感。

最早新浪體育運(yùn)用到這一風(fēng)格，算是還是很不錯的一種風(fēng)格。很遺憾只留在了我的記憶力，網(wǎng)上并沒有找到之前的設(shè)計。(圖design by Catalin Mihut)

（4）高光式圖標(biāo)?

高光式圖標(biāo)是傳統(tǒng)繪畫的產(chǎn)物，我們在傳統(tǒng)繪畫的時候往往最后一筆都是添加高光，起到畫龍點睛的效果。

高光式的功能圖標(biāo)采用里細(xì)外粗的規(guī)律，和斷點式功能圖標(biāo)差不多一個年代的產(chǎn)物。在不斷扁平不斷簡潔的今天，也不會感覺那最后一筆也是多余的。(圖design by Udisk6353)

（5）不透明度圖標(biāo)

不透明度圖標(biāo)是調(diào)節(jié)圖標(biāo)的部分結(jié)構(gòu)的不透明度來增加圖標(biāo)的層次。色彩上面跟雙色圖標(biāo)是一樣的，只不過從配色角度屬于同色系的范疇。(圖design by Laura Reen)

（6）雙色圖標(biāo)

雙色圖標(biāo)在實際應(yīng)用中非常廣泛，也是跟百搭的那種。

一種可以有彩色跟無彩色結(jié)合，有彩色的顏色可以是企業(yè)色，可以是代表行業(yè)或者產(chǎn)品的顏色跟無彩色黑色相結(jié)合。

一種是主體色跟點綴色組合而成的雙色，但使用時要考慮到當(dāng)前界面中的配色不宜過多，多了就容易花。(圖design by stay )

（7）線面結(jié)合圖標(biāo)?

線面結(jié)合圖標(biāo)也是一種很出彩的風(fēng)格，線是高度概括的圖標(biāo)，這時候面更多的是充當(dāng)裝飾點綴的作用。

面的表現(xiàn)方式也有很多種，可以是單色的，漸變色的，也可以像MBE風(fēng)格那樣提取主體結(jié)構(gòu)形成的面，也可以提取圖標(biāo)里面有閉合路徑所形成的面。

這種風(fēng)格應(yīng)用也非常廣泛。(圖design by Ted Kulakevich and Prakhar Neel Sharma )

（8）結(jié)構(gòu)圖標(biāo)?

結(jié)構(gòu)圖標(biāo)算比較有爭議性的圖標(biāo)，結(jié)構(gòu)圖標(biāo)是我們學(xué)繪畫的時候老師要我們起形，要開始繪畫結(jié)構(gòu)，對基礎(chǔ)的三大面五大調(diào)有很好的理解。

現(xiàn)在結(jié)構(gòu)圖標(biāo)正好相反，比如對于一個具像圖標(biāo)，我們要分析出它的每一筆每一畫，看清每一個結(jié)構(gòu)，然后用固定的形式來表現(xiàn)出來。

固定的形式可以像優(yōu)酷圖標(biāo)的相交結(jié)構(gòu)點，可以像上?，斈然▓@一筆一個顏色，等等。

（9）一筆畫圖標(biāo)?

一筆畫圖標(biāo)是難度系數(shù)比較高的一種風(fēng)格，也是我非常喜歡的一種風(fēng)格，當(dāng)才開始流行斷點圖標(biāo)的時候，錘子設(shè)計師歐陽念念就提出了一筆畫圖標(biāo)的概念，當(dāng)時也是有爭議的一種圖標(biāo)。

當(dāng)網(wǎng)易云音樂也出了這種圖標(biāo)后就更具有說服力。一般也很難駕馭，做應(yīng)該基本都能做出來，但是視覺上看上去很舒服還是要有深厚的功底。

（10）logo類圖標(biāo)?

logo類圖標(biāo)跟一筆畫算是同等級別難度的，需要圖標(biāo)足夠精致到可以直接拿來當(dāng)應(yīng)用圖標(biāo)，乃至于logo。

這種在app中屈指可數(shù)。再細(xì)講就到設(shè)計logo大的范疇里了，自己想想也害怕的。就到這吧。

最為經(jīng)典的就當(dāng)屬網(wǎng)易云音樂的logo了，其實它也屬于一筆畫圖標(biāo)，同時又用做了logo，它的含金量可想而知。

（11）情感化圖標(biāo)?

情感化圖標(biāo)是提取人的五官跟圖標(biāo)相結(jié)合具有擬人化的圖標(biāo)，這種擬人化的場景模仿人在真實場景的應(yīng)用。

QQ的底部圖標(biāo)，通過五官方向大小移動變化很好的表現(xiàn)出當(dāng)前場景。QQ開了先河，相信后續(xù)會有很多情感化圖標(biāo)出現(xiàn)，會有它的一席之地。

3. 如何轉(zhuǎn)換線性圖標(biāo)與面性圖標(biāo)？

線性的閉合路徑的圖形變面性圖標(biāo)，閉合路徑里面的線條反白，重要的關(guān)聯(lián)結(jié)構(gòu)線反白，讓面性圖標(biāo)透氣；線性的不閉合路徑的圖形變面性圖標(biāo)，應(yīng)適當(dāng)?shù)脑黾泳€的粗度來達(dá)到視覺上的平衡。(圖design by Jory Raphael and Sebo)

4. 如何去創(chuàng)造新的圖標(biāo)風(fēng)格

繪畫結(jié)構(gòu)＋點線面＋色彩，繪畫結(jié)構(gòu)可以清晰的分析出事物的主體結(jié)構(gòu)，勾勒出主體輪廓，對創(chuàng)造新的圖標(biāo)風(fēng)格有很大幫助。

繪畫結(jié)構(gòu)選的角度是人很熟知的角度比如正面，盡量不要選擇帶有透視角度進(jìn)行設(shè)計。

點線面是設(shè)計的基礎(chǔ)，通過從點線面角度去構(gòu)思會獲得更多的靈感。

色彩方面可以是企業(yè)色、行業(yè)色、主題色、點綴色等等。(圖design by Ted-Kulakevich and Graphéine )

四、圖標(biāo)的特性

1. 統(tǒng)一性

（1）大小的統(tǒng)一

在網(wǎng)頁設(shè)計中圖標(biāo)的主流尺寸有16×16, 24×24, 32×32, 48×48, 64×64, 96×96, 128×128, 256×256, 512×512。

iOS上，蘋果建議44x44pt作為最小的點擊目標(biāo)區(qū)域。但實際中，ios和安卓正常出一個設(shè)計版本，倆者結(jié)合我們在2倍圖下最適合的大小為48*48px。

ios功能圖標(biāo)其他尺寸為48加或減4的倍數(shù)；安卓android功能圖標(biāo)其他尺寸為48加或減8的倍數(shù)。

為什么ios是4的倍數(shù)，一個數(shù)除以2倍圖在乘以3倍圖要是偶數(shù)最小的數(shù)為4；為什么安卓android是8的倍數(shù)，安卓開發(fā)中最小的單位是1dp，1dp=2px，同時也要滿足一個數(shù)除以2倍圖在乘以3倍圖要是偶數(shù)最小的數(shù)為4，所以安卓要是8的倍數(shù)。

在很多帶有色塊的圖標(biāo)，不僅要保證色塊48*48px的大小統(tǒng)一，也要保證里面色塊里面的功能圖標(biāo)的大小統(tǒng)一。

（2）風(fēng)格的統(tǒng)一

風(fēng)格上面已經(jīng)歸納的很全了，直角圖標(biāo)和圓角圖標(biāo)基礎(chǔ)上可以添加一個其他風(fēng)格，如雙色風(fēng)格；但是剩余的其他風(fēng)格最好就不要倆倆相加，不然就會給用戶感覺很容易亂，也不夠簡潔，主次不明。

（3）規(guī)范的統(tǒng)一

視覺的規(guī)范

為什么我們再同樣的大小區(qū)域去繪制正方形、圓形、三角形，雖然符合了大小統(tǒng)一的特性，但是從視覺上還是不能看上去很均衡？

這就需要我們規(guī)范化的去繪制圖標(biāo)，安卓android規(guī)范里給出了圖標(biāo)的繪制方法。

圓角的規(guī)范

2. 簡潔性

簡潔性不單單體驗在圖標(biāo)的簡潔，還要體現(xiàn)在從創(chuàng)意到實際落地的簡潔。在使用軟件ai或者sketch的時候繪制基礎(chǔ)圖形不要出現(xiàn)小數(shù)點和基數(shù)，多用偶數(shù)。

3. 層次明確

圖標(biāo)具有可點擊性和標(biāo)識性?？牲c擊性就會有點擊前、點擊時、點擊后三種狀態(tài)，主流底部標(biāo)簽欄會在點擊前使用線性圖標(biāo)，點擊時和點擊后使用面性圖標(biāo)；也有使用顏色來區(qū)分。

4. 延展性

圖標(biāo)的延展性之前在圖標(biāo)的風(fēng)格也講到，好的圖標(biāo)可以直接當(dāng)應(yīng)用圖標(biāo)或者logo來使用。同時好的圖標(biāo)還可以通過點線面動效變化做下拉加載動畫。

五、如何學(xué)會合理的設(shè)計功能圖標(biāo)？

1. 頭腦風(fēng)暴

頭腦風(fēng)暴看似一個不知道怎么解釋的詞，簡單的說就是多動腦子，越用越活。

頭腦風(fēng)暴不單單是這里用到，是所有設(shè)計師做設(shè)計之前必備工作。

頭腦風(fēng)暴完你會覺得你的設(shè)計思路會很寬，然后就是要合理的分析每個的可行度，完成的工作量，自己當(dāng)前設(shè)計的水平是否可以有效完成。

其實很多設(shè)計師能有效的搜索到自己想要的東西，也算是頭腦風(fēng)暴的一種。雖然你不會想出很多點子，但還是很明確的知道自己想要什么，一定一定注意不要直接拿來主義，還是要通過平時的練習(xí)掌握更多的風(fēng)格，為以后頭腦風(fēng)暴想出的很多點子能很好的實踐出來。

頭腦風(fēng)暴很重要，頭腦風(fēng)暴很重要，頭腦風(fēng)暴很重要，重要的事情說三遍。

比如以旅游為主體進(jìn)行頭腦風(fēng)暴，這個就能想到很多很多。

2. 搜集資料

搜集資料的時候要很好的提取關(guān)鍵詞，直接從iconutopia、iconfont、iconfinder、iconmonstr搜索獲取靈感。

具象的事物可以看看該事物好的品牌公司的產(chǎn)品，品牌公司的工業(yè)設(shè)計相對較好，對后面提取元素也會有很大的幫助。

也可以通過提取好的關(guān)鍵詞，翻譯成英文，再到國外的網(wǎng)站追波、be搜上一搜看看。搜索到的素材和元素一定要再設(shè)計，不能拿來直接用，如果直接用后面就沒必要寫了。

3.?提取元素

提取元素又歸結(jié)到繪畫結(jié)構(gòu)中去了，繪畫好的看到具象事物，心里默默打開一個燈，三大面五大調(diào)，光影關(guān)系都有了。不是很理解的還是多練習(xí)吧。關(guān)于如何提取元素暫時還不能寫出很好的方法。

具象圖標(biāo)就是提取主要輪廓線，保留可要可不要的元素，到最后的時候做統(tǒng)一刪減。

抽象圖標(biāo)，確實沒有一點的思路的時候可以在就iconutopia、iconfont、iconfinder、iconmonstr找找，找到了合適的還要進(jìn)行redesign。有想法后選擇一種圖標(biāo)風(fēng)格這樣的繪制效率會很快。

4. 規(guī)范化

上面元素提取好后，需要開始選擇一種圖標(biāo)風(fēng)格進(jìn)行繪制。

開始繪制的時候不要過于追求圖標(biāo)的風(fēng)格，還是要從圖標(biāo)本身出發(fā)快速的繪制好。

等全部繪制好了突然想換一種圖標(biāo)風(fēng)格也是很快的，水到渠成。

可能剛開始很難在規(guī)范化的框框里直接就提取元素開始繪制，那就只能先繪制要你想要創(chuàng)意的元素圖標(biāo)，全部畫好后在統(tǒng)一的規(guī)范里面再繪制一遍。

規(guī)劃化的目的就是讓圖標(biāo)統(tǒng)一，任何倆個圖標(biāo)拿出來從視覺大小、風(fēng)格都是一個統(tǒng)一的整體。

5.?加減法

一套圖標(biāo)繪制好了之后還是在放在一起看一下整理的感覺，最后通過加減法適當(dāng)?shù)男扌扪a(bǔ)補(bǔ)。

對于視覺上看上去過于繁瑣的圖標(biāo)，要保留大輪廓的同時，減少結(jié)構(gòu)達(dá)到視覺平衡。

對于確實很簡單，但又沒辦法添加任何元素的圖標(biāo)，為它做加法，增加它的視覺豐滿感。

作者：水手哥，微信公眾號：水手哥學(xué)設(shè)計

本文由 @水手哥 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖由作者提供