作為UI設(shè)計師，我們無法避免的跟icon打交道舞丛，它不但更有利于我們設(shè)計表達(dá)各個功能點，而且在有些頁面中頁占據(jù)著非常重要的篇幅果漾。但是實際工作中球切，當(dāng)設(shè)計人手缺乏，項目節(jié)奏過快的時候绒障，我們不得不從網(wǎng)上下載一些圖標(biāo)素材進(jìn)行快速輸出吨凑。
當(dāng)我們打開APP的時候甚至?xí)l(fā)現(xiàn)里面的icon有虛邊、圖標(biāo)尺寸過大或過小户辱、圖標(biāo)大小不統(tǒng)一的現(xiàn)象鸵钝。相信這是我們每位設(shè)計者都不想看到這樣尷尬的情形。為了讓我們的設(shè)計更有理有據(jù)庐镐，避免被業(yè)內(nèi)人事批判恩商，哪怕項目再緊，我們在快速輸出之前都要先考慮我們的圖標(biāo)的風(fēng)格的定位必逆，制定統(tǒng)一的標(biāo)準(zhǔn)規(guī)范怠堪。那么我們就需要掌握以下基本的圖標(biāo)繪制原則：
圖標(biāo)繪制基本規(guī)則
首先整個圖標(biāo)虛邊這種情況是絕對避免的揽乱，最基本的問題這里就不多說了。
圖標(biāo)的粗細(xì)和對應(yīng)尺寸效果
下面我們來說下圖標(biāo)繪制特殊情況下的虛邊問題：
通常我們在繪制成套的圖標(biāo)的時候不可避免的會出現(xiàn)上圖這種圖標(biāo)中線粟矿，我們會發(fā)現(xiàn)哎呀虛邊了凰棉，怎么搞？
當(dāng)我們圖標(biāo)尺寸為奇數(shù)陌粹，線條為偶數(shù)的時候中線顯示虛邊撒犀。同樣圖標(biāo)尺寸為偶數(shù)，粗細(xì)為奇數(shù)的時候也顯示虛邊掏秩。那么怎么絕對避免虛邊呢或舞？
當(dāng)圖標(biāo)尺寸為奇數(shù)的時候，圖標(biāo)粗細(xì)也要為奇數(shù)嚷那。同理圖標(biāo)尺寸為偶數(shù)的時候，圖標(biāo)粗細(xì)也要為偶數(shù)杆煞。
盡可能不要混合使用奇數(shù)和偶數(shù)尺寸（如果你不混合會抓狂，那么也確保不同軸使用不同粗細(xì)的線條）
圖標(biāo)繪制的尺寸統(tǒng)一
圖標(biāo)避免過大和過小决乎，同樣在一系列圖標(biāo)中由于圖標(biāo)所表達(dá)的內(nèi)容不同队询，各種不同的樣式會造成視覺大小的差異性构诚。那么我們是憑感覺調(diào)整大小么蚌斩？你確定你一定是像素眼？
我們可以看到上圖范嘱，人類在認(rèn)識圖形的過程中送膳，會產(chǎn)生各式各樣的視覺錯覺。萊爾和艾賓浩斯錯覺中丑蛤，實際上兩條線的長度是相等的，兩個圓的大小也是相同的受裹。厄任斯坦錯覺：中間矩形和內(nèi)部頂邊的圓，它們的高度是相等的棉饶，但視覺上矩形比圓形要大很多厦章。
那么我們首先繪制一個32x32的網(wǎng)格，用一個 2px邊界 來留出喘息的空間照藻。外面的這個藍(lán)色區(qū)域除非特殊情況袜啃，通常避免圖標(biāo)出現(xiàn)在這個區(qū)域。
當(dāng)我們要統(tǒng)一圓形和方形圖標(biāo)的視覺差的時候幸缕，就需要相對調(diào)整矩形的大小囊骤。在保證圖標(biāo)都在藍(lán)色區(qū)域內(nèi)部的同時晃择，矩形要相對縮小2px也物，也就是黃色區(qū)域內(nèi)宫屠。
如果圖標(biāo)是不規(guī)則圖形滑蚯，以圓形為軸心只需要保證圖形在縱向或者橫向的藍(lán)色安全區(qū)域內(nèi)即可浪蹂。
同理對角圖標(biāo)的安全區(qū)域旋轉(zhuǎn)45度即可告材。藍(lán)色區(qū)域超出出血區(qū)域也沒有關(guān)系，通常對角圖標(biāo)不會出血斥赋。
但不必每次都遵循網(wǎng)格和參考線. 網(wǎng)格在這里的作用是為了幫助你讓圖標(biāo)保持一致性, 但是如果要設(shè)計一個特殊個性的圖標(biāo)，規(guī)則只是規(guī)則疤剑，沒有什么不能打破的滑绒。
有人或許會問，斜角圖標(biāo)回不去出現(xiàn)不是45度的情況呢疑故？在這里建議不管是整體還是局部最好都遵循45度或者45度的倍數(shù)的傾斜角度。由于像素的原因纵势，45°角的情況下是抗鋸齒的，這個角度下會有一個完美的清晰的邊緣線管钳，我們把虛邊情況降到最低，人眼看起來會更舒服才漆。
下周我們會聊一聊icon設(shè)計風(fēng)格變化規(guī)則，以及品牌概念的植入栽烂。敬請期待恋脚！
