因此我們可以在品牌logo中提取“粗胖飽滿”的品牌基因，在這樣的背景下就不用再糾結(jié)圖標(biāo)使用2px描邊還是3px的描邊了：

我們可以很確定的使用3px描邊，因?yàn)樗�既符合品牌基因又符合用戶性�?肥胖圓潤(rùn)顯得可愛)。

4.飽滿

很多時(shí)候我們做出來的圖標(biāo)不夠精致，其中一個(gè)很大的原因就是不夠飽滿。如何判斷圖標(biāo)是否飽滿呢?我常用的衡量方法就是在圖標(biāo)上面加一個(gè)矩形，看圖標(biāo)的正形的面積是否還可以增加。例如下圖，藍(lán)色是正形，紅色是負(fù)形：

很明顯藍(lán)色的正形面積是可以增加的，例如：

這就是在增加圖標(biāo)的飽滿度，我也是按照這個(gè)思路來改版圖標(biāo)飽滿度的。舉個(gè)真實(shí)的例子，我們?cè)�版的續(xù)看圖標(biāo)是上下結(jié)構(gòu)，而上面部門的圖形太窄，導(dǎo)致左上角、右上角的空白太多(也就是綠色部分太多)，沒有撐滿矩形，如下圖：

于是我對(duì)圖標(biāo)的結(jié)構(gòu)進(jìn)行了調(diào)整，盡可能的減少綠色部分，最后達(dá)到了下圖這樣的效果：

最后提醒大家，對(duì)于圖標(biāo)的飽滿度，還需要結(jié)合整套圖標(biāo)的視覺效果來進(jìn)行調(diào)試，雖然上面這個(gè)方法可以解決大部門圖標(biāo)的飽滿問題，但還是要具體場(chǎng)景具體分析，切記，我們的目標(biāo)是讓整套圖標(biāo)看起來和諧、統(tǒng)一、精致!

5.細(xì)節(jié)

細(xì)節(jié)也包含很多方面，例如：

5.1 角度是否一致或者遵循某種規(guī)律：

我們定制的角度規(guī)范是30度的倍數(shù)，這樣可以很大程度的提高圖標(biāo)統(tǒng)一性。

5.2 描邊末端的細(xì)節(jié)處理

下圖就是一個(gè)錯(cuò)誤的例子，一個(gè)描邊末端是直角，一個(gè)又是圓角：

我們?cè)谔幚磉@樣的細(xì)節(jié)時(shí)，一定要保證統(tǒng)一性。

5.3 像素對(duì)齊問題

大家會(huì)覺得只要把一個(gè)尺寸的圖標(biāo)做好像素對(duì)齊，導(dǎo)出其他倍數(shù)的圖標(biāo)就是ok的，其實(shí)這樣的想法是不對(duì)的，因?yàn)樵趯?dǎo)出0.5或1.5倍數(shù)關(guān)系的時(shí)候，像素很容易再次產(chǎn)生不對(duì)齊的情況。

舉個(gè)例子，我們做圖標(biāo)是以2倍圖為基礎(chǔ)，然后統(tǒng)一導(dǎo)出3倍圖，那這時(shí)候3倍圖就是2倍圖的1.5倍，導(dǎo)出的時(shí)候就發(fā)生了下面這樣的情況：

雖然2倍圖是像素對(duì)齊的，但3倍圖卻沒有對(duì)齊，如果設(shè)計(jì)師沒有仔細(xì)檢查切圖，就會(huì)發(fā)生線上圖標(biāo)發(fā)虛的情況，所以我們?cè)谳敵銮袌D時(shí)，一定要仔細(xì)核查，發(fā)現(xiàn)錯(cuò)誤及時(shí)調(diào)整，免得造成不良影響。除了以上這些，還有視覺大小、圓角、描邊粗細(xì)是否統(tǒng)一的細(xì)節(jié)，當(dāng)然，這些都比較容易理解，就不一一舉例說明了，大家在做圖標(biāo)設(shè)計(jì)的時(shí)候一定要多多注意。

總結(jié)

本次梳理的五緯自檢法可以用在圖標(biāo)設(shè)計(jì)的自我檢查、改版優(yōu)化等多個(gè)方面，或許它并不全面，但一定具有參考價(jià)值，希望能給大家?guī)�來啟發(fā)和靈感，我們也會(huì)更加努力，爭(zhēng)取做出更好的作品和教程與在設(shè)計(jì)道路上的你們分享交流!

原文地址：TCD設(shè)計(jì)中心

作者： 菜心