工作中我們會接觸很多圖標(biāo)的繪制酱固，時下流行的不外乎也就是：線性圖標(biāo)、面性圖標(biāo)和線面結(jié)合圖標(biāo)头朱；
初學(xué)者可能接觸的最多也就是線性圖標(biāo)运悲，也可能認為是最容易掌握的吧……?? ??
線性圖標(biāo)的特征
目前市面上的線性圖標(biāo)以 2px、3px 最為主流项钮。為什么大部分的產(chǎn)品會使用 2px 和 3px 的線性圖標(biāo)呢班眯？因為圖標(biāo)線條的寬度越大，可展示的細節(jié)就越少烁巫，但是圖標(biāo)的表現(xiàn)力卻能夠得到極大的提升署隘，這也是為什么面性圖標(biāo)的直觀表現(xiàn)力一直都比線性要好的原因。
線性圖標(biāo)線條的寬度越小亚隙，能展示的細節(jié)就越豐富磁餐，同時直觀的表現(xiàn)力也會降低，因為東西太多會產(chǎn)生視覺干擾阿弃。
當(dāng)然現(xiàn)在也有少數(shù)一些產(chǎn)品的線性圖標(biāo)用 1px 和 4px诊霹，而且也在圖標(biāo)上做了減法，所有我們會看到一些用 1px 的圖標(biāo)整個圖形表現(xiàn)很簡單恤浪，但是因為線條太細畅哑，導(dǎo)致整個底部操作欄的圖標(biāo)視覺表現(xiàn)上偏弱;
而 4px 的圖標(biāo)會顯得略微厚重肴楷；
因此線性圖標(biāo)表達力最好的是在 2px 和 3px水由，同時減少一些圖標(biāo)細節(jié)，能夠更大的提升圖標(biāo)的表達力赛蔫。但是同樣的圖形砂客，面性的圖標(biāo)直觀表現(xiàn)力要優(yōu)于線性圖標(biāo)泥张，因此面性圖標(biāo)更易上手。
描邊怎么選鞠值？（這是個知識點 ??）
以 sketch 來畫圖標(biāo)舉例媚创，首先我們需要遵循像素網(wǎng)格，點擊 sketch 頂部右上角彤恶，選擇顯示像素钞钙，你會發(fā)現(xiàn)你的界面從矢量變成了像素，這么做的好處是能夠保證我們的圖標(biāo)在畫的時候能看出來有沒有虛邊声离。
在畫線性圖標(biāo)的時候芒炼，我們首先面對的問題就是選擇的是內(nèi)描邊、外描邊還是居中术徊？
這個時候我們面對的是兩種情況本刽，當(dāng)你的描邊像素是偶數(shù)的時候，比如：2px赠涮，4px子寓，居中，內(nèi)外描邊視覺上看起來都是可以的笋除，就算是在
顯示像素網(wǎng)格的情況下斜友，也不會發(fā)生虛邊的情況。如下圖所示：
但是如果描邊數(shù)值變成奇數(shù)的時候垃它，比如：1px蝙寨，3px，5px嗤瞎，這個時候就不能用居中墙歪，應(yīng)該使用內(nèi)或者外描邊，因為居中的描邊會模糊掉贝奇。如下圖所示：
在做閉合路徑的線性圖標(biāo)時虹菲，通常采用內(nèi)描邊的對齊方式，因為外描邊的矢量圖形視覺上其實是比實際數(shù)值要大的掉瞳，不利于我們控制圖標(biāo)大小毕源。而且描邊的數(shù)值一定不要出現(xiàn) 2.31 或者 1.68 這樣的情況。
如上圖陕习，有小數(shù)點的描邊同樣也會出現(xiàn)虛邊的問題霎褐，而這種情況經(jīng)常會出現(xiàn)在圖標(biāo)的等比縮放之后，因此我們在縮放圖標(biāo)之后该镣，需要每個小細節(jié)都確認一下冻璃。
斷點圖標(biāo)怎么處理？
因此為了達到這樣的效果，就需要將描邊改成居中省艳，如果選擇內(nèi)描邊或者外描邊就會變得復(fù)雜很多娘纷，因為線不居中的情況下是無法直接設(shè)置成斷線處弧形的。如果直接設(shè)置跋炕，會變成下圖所示：
這無疑增加了設(shè)計的工作難度赖晶，為什么要將線條端口變成圓形呢，同理可參照按鈕為什么都選擇圓角矩形作為底部的道理辐烂。因為直直的切割線會讓圖標(biāo)整個變得很生硬遏插，沒有親和力，讓用戶對界面整體營造的氛圍產(chǎn)生抵觸心理纠修。
