一悉抵、圖標(biāo)定義

1.1 什么是圖標(biāo)

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

1.2 什么是功能圖標(biāo)

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

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

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

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

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

3.1 面性圖標(biāo)

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

3.1.1 不透明度圖標(biāo)

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

3.1.2 光影圖標(biāo)

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

3.1.3 多彩色圖標(biāo)

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

3.2 線性圖標(biāo)

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

3.2.1 圓角圖標(biāo)

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

3.2.2 直角圖標(biāo)

直角圖標(biāo)給人以銳利，堅(jiān)強(qiáng)友浸，果斷峰尝，不拖泥帶水的一面。最先讓人眼前一亮的是魅族系統(tǒng)Flyme6里面的圖標(biāo)就是用的直角收恢，給人明快干凈的感覺(jué)武学。真正更好的詮釋它內(nèi)在的含義的非京東金融里的圖標(biāo)了，投資理財(cái)?shù)臅r(shí)候需要人們果斷作出判斷伦意。理財(cái)有風(fēng)險(xiǎn)火窒，投資需謹(jǐn)慎。直角的感覺(jué)讓人當(dāng)機(jī)立斷驮肉，不拖泥帶水熏矿，快買快出。如果用圓角就感覺(jué)柔一點(diǎn)，感覺(jué)做事優(yōu)柔寡斷曲掰。所以一下子在金融領(lǐng)域被做成了標(biāo)桿式的功能圖標(biāo)疾捍。

3.2.3 斷點(diǎn)圖標(biāo)

斷點(diǎn)圖標(biāo)是點(diǎn)線面演化的一種產(chǎn)物。在最開(kāi)始ui興起的時(shí)候栏妖，設(shè)計(jì)師們不滿足于單線條的功能圖標(biāo)乱豆，通過(guò)點(diǎn)線面增加形式感。最早新浪體育運(yùn)用到這一風(fēng)格吊趾，還是很不錯(cuò)的一種風(fēng)格宛裕。很遺憾只留在了我的記憶力，網(wǎng)上并沒(méi)有找到之前的設(shè)計(jì)论泛。(圖design by Catalin Mihut)

3.2.4 高光式圖標(biāo)

高光式圖標(biāo)是傳統(tǒng)繪畫(huà)的產(chǎn)物揩尸，我們?cè)趥鹘y(tǒng)繪畫(huà)的時(shí)候往往最后一筆都是添加高光，起到畫(huà)龍點(diǎn)睛的效果屁奏。高光式的功能圖標(biāo)采用里細(xì)外粗的規(guī)律岩榆，和斷點(diǎn)式功能圖標(biāo)差不多一個(gè)年代的產(chǎn)物。在不斷扁平不斷簡(jiǎn)潔的今天坟瓢，也會(huì)感覺(jué)那最后一筆也是多余的勇边。(圖design by Udisk6353)

3.2.5 不透明度圖標(biāo)

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

3.2.6 雙色圖標(biāo)

雙色圖標(biāo)在實(shí)際應(yīng)用中非常廣泛，也是跟百搭的那種诚镰。一種可以有彩色跟無(wú)彩色結(jié)合奕坟，有彩色的顏色可以是企業(yè)色，可以是代表行業(yè)或者產(chǎn)品的顏色跟無(wú)彩色黑色相結(jié)合清笨。一種是主體色跟點(diǎn)綴色組合而成的雙色月杉，使用時(shí)要考慮到當(dāng)前界面中的配色不宜過(guò)多，多了就容易花函筋。(圖design by stay )

3.2.7 線面結(jié)合圖標(biāo)

線面結(jié)合圖標(biāo)也是一種很出彩的風(fēng)格沙合，線是高度概括的圖標(biāo)奠伪，這時(shí)候面更多的是充當(dāng)裝飾點(diǎn)綴的作用跌帐。面的表現(xiàn)方式也有很多種，可以是單色的绊率，漸變色的谨敛，也可以像MBE風(fēng)格那樣提取主體結(jié)構(gòu)形成的面，也可以提取圖標(biāo)里面有閉合路徑所形成的面滤否。這種風(fēng)格應(yīng)用也非常廣泛脸狸。(圖design by Ted Kulakevich and Prakhar Neel Sharma )

3.2.8 結(jié)構(gòu)圖標(biāo)

結(jié)構(gòu)圖標(biāo)算比較有爭(zhēng)議性的圖標(biāo)，結(jié)構(gòu)圖標(biāo)是我們學(xué)繪畫(huà)的時(shí)候老師要我們起形，要開(kāi)始繪畫(huà)結(jié)構(gòu)炊甲，對(duì)基礎(chǔ)的三大面五大調(diào)有很好的理解∧嗤現(xiàn)在結(jié)構(gòu)圖標(biāo)正好相反，比如對(duì)于一個(gè)具像圖標(biāo)卿啡，我們要分析出它的每一筆每一畫(huà)吟吝，看清每一個(gè)結(jié)構(gòu)，然后用固定的形式來(lái)表現(xiàn)出來(lái)颈娜。固定的形式可以像優(yōu)酷圖標(biāo)的相交結(jié)構(gòu)點(diǎn)剑逃，可以像上海瑪娜花園一筆一個(gè)顏色官辽，等等

3.2.9 一筆畫(huà)圖標(biāo)

一筆畫(huà)圖標(biāo)是難度系數(shù)比較高的一種風(fēng)格蛹磺，也是我非常喜歡的一種風(fēng)格，當(dāng)才開(kāi)始流行斷點(diǎn)圖標(biāo)的時(shí)候同仆，錘子設(shè)計(jì)師歐陽(yáng)娜娜就提出了一筆畫(huà)圖標(biāo)的概念萤捆，當(dāng)時(shí)也是有爭(zhēng)議的一種圖標(biāo)。當(dāng)網(wǎng)易云音樂(lè)也出了這種圖標(biāo)后就更具有說(shuō)服力俗批。一般也很難駕馭鳖轰，做應(yīng)該基本都能做出來(lái)，但是視覺(jué)上看上午很舒服還是要有深厚的功底扶镀。

3.2.10 logo類圖標(biāo)

logo類圖標(biāo)跟一筆畫(huà)算是同等級(jí)別難度的蕴侣，需要圖標(biāo)足夠精致到可以直接拿來(lái)當(dāng)應(yīng)用圖標(biāo)，乃至于logo臭觉。這種在app中屈指可數(shù)昆雀。再細(xì)講就到設(shè)計(jì)logo大的范疇里了，自己想想也害怕的蝠筑。就到這吧狞膘。最為經(jīng)典的就當(dāng)屬網(wǎng)易云音樂(lè)的logo了，其實(shí)它也屬于一筆畫(huà)圖標(biāo)什乙，又做了logo挽封，它的含金量可想而知。

3.2.11 情感化圖標(biāo)

情感化圖標(biāo)是提取人的五官跟圖標(biāo)相結(jié)合具有擬人化的圖標(biāo)臣镣，這種擬人化的場(chǎng)景模仿人在真實(shí)場(chǎng)景的應(yīng)用辅愿。QQ的底部圖標(biāo)通過(guò)五官方向大小移動(dòng)變化很好的表現(xiàn)出當(dāng)前場(chǎng)景。QQ開(kāi)了先河忆某，相信后續(xù)會(huì)有很多情感化圖標(biāo)出現(xiàn)点待，會(huì)有它的一席之地。

3.3 如何轉(zhuǎn)換線性圖標(biāo)與面性圖標(biāo)弃舒？

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

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

繪畫(huà)結(jié)構(gòu)＋點(diǎn)線面＋色彩，繪畫(huà)結(jié)構(gòu)可以清晰的分析出事物的主體結(jié)構(gòu)通铲，勾勒出主體輪廓瓦呼，對(duì)創(chuàng)造新的圖標(biāo)風(fēng)格有很大幫助。繪畫(huà)結(jié)構(gòu)選的角度是人很熟知的角度比如正面测暗，盡量不要選擇帶有透視角度進(jìn)行設(shè)計(jì)央串。點(diǎn)線面是設(shè)計(jì)的基礎(chǔ)，通過(guò)從點(diǎn)線面角度去構(gòu)思會(huì)獲得更多的靈感碗啄。色彩方面可以是企業(yè)色质和、行業(yè)色、主題色稚字、點(diǎn)綴色等等饲宿。(圖design by Ted-Kulakevich and Graphéine )

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

4.1統(tǒng)一性

4.1.1 大小的統(tǒng)一

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

在移動(dòng)端ios規(guī)范中在2倍圖下最適合人點(diǎn)擊的區(qū)域大小為48*48px瘫想，ios功能圖標(biāo)其他尺寸為48加或減4的倍數(shù)；安卓android功能圖標(biāo)其他尺寸為48加或減8的倍數(shù)昌讲。

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

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

4.1.2 風(fēng)格的統(tǒng)一

風(fēng)格上面已經(jīng)歸納的很全了证逻，直角圖標(biāo)和圓角圖標(biāo)基礎(chǔ)上可以添加一個(gè)其他風(fēng)格如雙色風(fēng)格乐埠；但是剩余的其他風(fēng)格最好就不要倆倆相加，很容易亂囚企，也不夠簡(jiǎn)潔丈咐，主次不明。

4.1.2 規(guī)范的統(tǒng)一

視覺(jué)的規(guī)范

為什么我們?cè)偻瑯拥拇笮^(qū)域去繪制正方形洞拨、圓形扯罐、三角形负拟，雖然符合了大小統(tǒng)一的特性烦衣，但是從視覺(jué)上還是不能看上去很均衡？

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

圓角的規(guī)范

4.2 簡(jiǎn)潔性

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

4.3 層次明確

圖標(biāo)具有可點(diǎn)擊性和標(biāo)識(shí)性〗癫迹可點(diǎn)擊性就會(huì)有點(diǎn)擊前经备、點(diǎn)擊時(shí)、點(diǎn)擊后三種狀態(tài)部默，主流底部標(biāo)簽欄會(huì)在點(diǎn)擊前使用線性圖標(biāo)侵蒙，點(diǎn)擊時(shí)和點(diǎn)擊后使用面性圖標(biāo)；也有使用顏色來(lái)區(qū)分傅蹂。

4.4 延展性

圖標(biāo)的延展性之前在圖標(biāo)的風(fēng)格也講到纷闺，好的圖標(biāo)可以直接當(dāng)應(yīng)用圖標(biāo)或者logo來(lái)使用。好的圖標(biāo)還可以通過(guò)點(diǎn)線面動(dòng)效變化做下拉加載動(dòng)畫(huà)份蝴。

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

5.1 頭腦風(fēng)暴

頭腦風(fēng)暴看似一個(gè)不知道怎么解釋的詞婚夫，簡(jiǎn)單的說(shuō)就是多動(dòng)腦子浸卦，越用越活。頭腦風(fēng)暴不單單是這里用到案糙，是所有設(shè)計(jì)師做設(shè)計(jì)之前必備工作镐躲。頭腦風(fēng)暴完你會(huì)覺(jué)得你的設(shè)計(jì)思路會(huì)很寬，然后就是要合理的分析每個(gè)的可行度侍筛，完成的工作量萤皂，自己當(dāng)前設(shè)計(jì)的水平是否可以有效完成。其實(shí)很多設(shè)計(jì)師能有效的搜索到自己想要的東西也算是頭腦風(fēng)暴的一種匣椰，雖然你不會(huì)想出很多點(diǎn)子但還是很明確的知道自己想要什么裆熙，一定一定注意不要直接拿來(lái)主義，還是要通過(guò)平時(shí)的練習(xí)掌握更多的風(fēng)格禽笑。為以后頭腦風(fēng)暴想出的很多點(diǎn)子能很好的實(shí)踐出來(lái)入录。頭腦風(fēng)暴很重要，頭腦風(fēng)暴很重要佳镜，頭腦風(fēng)暴很重要僚稿，重要的事情說(shuō)三遍。

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

5.2 搜集資料

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

具象的事物可以看看該事物好的品牌公司的產(chǎn)品刹孔，品牌公司的工業(yè)設(shè)計(jì)相對(duì)較好啡省，對(duì)后面提取元素也會(huì)有很大的幫助。也可以通過(guò)提取好的關(guān)鍵詞髓霞，翻譯成英文卦睹，再到國(guó)外的網(wǎng)站追波、be搜上一搜看看方库。搜索到的素材和元素一定要再設(shè)計(jì)泣港，不能拿來(lái)直接用检吆，如果直接用后面就沒(méi)必要寫了秀睛。

5.3 提取元素

提取元素又歸結(jié)到繪畫(huà)結(jié)構(gòu)中去了抽兆，繪畫(huà)好的看到具象事物，心里默默打開(kāi)一個(gè)燈酪穿，三大面五大調(diào)凳干，光影關(guān)系都有了。不是很理解的還是多練習(xí)吧被济，關(guān)于如何提取元素暫時(shí)還不能寫出很好的方法救赐。具象圖標(biāo)就是提取主要輪廓線，保留可要可不要的元素只磷，到最后的時(shí)候做統(tǒng)一刪減经磅；抽象圖標(biāo)有時(shí)候確實(shí)沒(méi)有一點(diǎn)的思路的時(shí)候就iconutopia、iconfont钮追、iconfinder预厌、iconmonstr找找，找到了合適的還要進(jìn)行redesign元媚。有想法后選擇一種圖標(biāo)風(fēng)格這樣的繪制效率會(huì)很快轧叽。

5.4 規(guī)范化

上面元素提取好后，需要開(kāi)始選擇一種圖標(biāo)風(fēng)格進(jìn)行繪制刊棕。開(kāi)始繪制的時(shí)候不要過(guò)于追求圖標(biāo)的風(fēng)格炭晒，還是要從圖標(biāo)本身出發(fā)快速的繪制好。等全部繪制好了突然想換一種圖標(biāo)風(fēng)格也是很快的甥角，水到渠成网严。可能剛開(kāi)始很難在規(guī)范化的框框里直接就提取元素開(kāi)始繪制嗤无，那就只能先繪制要你想要?jiǎng)?chuàng)意的元素圖標(biāo)震束，全部畫(huà)好后在統(tǒng)一的規(guī)范里面再繪制一遍怜庸。規(guī)劃化的目的就是讓圖標(biāo)統(tǒng)一，任何倆個(gè)圖標(biāo)拿出來(lái)從視覺(jué)大小驴一、風(fēng)格都是一個(gè)統(tǒng)一的整體休雌。

5.5加減法

一套圖標(biāo)繪制好了之后還是在放在一起看一下整理的感覺(jué)灶壶，最后通過(guò)加減法適當(dāng)?shù)男扌扪a(bǔ)補(bǔ)肝断，對(duì)于視覺(jué)上看上去過(guò)于繁瑣的圖標(biāo)要保留大輪廓的同時(shí)減少結(jié)構(gòu)達(dá)到視覺(jué)平衡；對(duì)于確實(shí)很簡(jiǎn)單但有沒(méi)辦法添加任何的東西來(lái)增加的時(shí)候是否可以放大來(lái)增加它的視覺(jué)豐滿感驰凛。

總結(jié)

玩追波的時(shí)候每次發(fā)icon都有很多人喜歡胸懈，可能自己對(duì)icon圖標(biāo)理解還可以。就陸陸續(xù)續(xù)恰响、洋洋灑灑的寫了這么多趣钱，第一次寫文章過(guò)于口語(yǔ)化了希望大家多海涵。還是希望更多的人get到更多的點(diǎn)胚宦。最后的最后還是來(lái)看看我設(shè)計(jì)的一些功能圖標(biāo)吧首有。

本文章來(lái)源【學(xué)UI設(shè)計(jì)網(wǎng)】http://www.xueuisheji.com/?p=6347