今天給大家分享一些畫圖標(biāo)icon應(yīng)該注意的細(xì)節(jié)&規(guī)范，希望對大家有一點幫助。
1、柵格規(guī)范
柵格作為圖表繪制的底層結(jié)構(gòu)，是一切屬性設(shè)計的基礎(chǔ)。線條的長短粗細(xì)、圖標(biāo)的大小比例等關(guān)鍵因素均在其基礎(chǔ)上制定。圖標(biāo)常見尺寸為16
*16；20*
20；24
*24；32*
32這四種輸出尺寸。這些尺寸均可以清晰的顯示在常規(guī)的顯示器上。TDesign 最終選擇以16*16px 的尺寸作為圖標(biāo)繪制的統(tǒng)一柵格尺寸。
 
2、像素點對齊
由于屏幕像素的特性，非整數(shù)像素將會以灰度顯示，那樣將影響圖標(biāo)的清晰度以及整體的含義表達(dá)，所以在柵格內(nèi)繪制時應(yīng)盡量對齊像素點，最大程度上保證圖標(biāo)的清晰度。
 
3、畫布
畫布作為圖標(biāo)設(shè)計的實際操作區(qū)域起到了控制畫面、限制大小、調(diào)整間距等作用。在 TDesign 圖標(biāo)的設(shè)計上實際畫布應(yīng)控制在柵格中心14*14px的區(qū)域，周圍留有1px的出血。在一些特殊情況下如 icon 過長或者有突出的邊角等，允許內(nèi)容適當(dāng)延展，以確保圖標(biāo)視覺重量上的統(tǒng)一（ 超出部分建議為多邊形的邊角，并不宜超過 0.5px ）
 
4、輔助線
輔助線有助于約束圖標(biāo)的大小以及一些線條的走向，在制作時應(yīng)盡量根據(jù)輔助線進(jìn)行繪制以保持各圖標(biāo)間視覺重量的統(tǒng)一。我們對柵格內(nèi)的圓形、方形、斜線等路徑進(jìn)行了規(guī)范并生成了一套輔助線系統(tǒng)。在圖標(biāo)設(shè)計的過程中應(yīng)根據(jù)設(shè)計對象的特性選取相應(yīng)的輔助線來控制圖形樣式。
 
5、線條
繪制時建議使用1px寬度的筆畫，這樣以便在小尺寸的柵格內(nèi)保證更多的樣式可能性，在 16px 時為 1px， 24px 時等比加粗
 
6、長度為2的倍數(shù)
在處理長線線條的長度時建議使用 2 的倍數(shù)，這樣更易進(jìn)行對稱處理。而短線上建議使用 3 個像素
 
7、角度
線條如需傾斜最好與柵格內(nèi) 45° 輔助線相平行，或使用 15° 的倍數(shù)。以便在低分辨率的情況下仍有較高的線條清晰度