圖標(biāo)設(shè)計的規(guī)范涵蓋顏色、符號的表達(dá)、線條的運(yùn)用等等。當(dāng)整個設(shè)計系統(tǒng)還沒那么明朗要建立圖標(biāo)庫時,應(yīng)選擇比較保守的作法,將設(shè)計系統(tǒng)會影響到的層面抽離本次建立的圖標(biāo) 規(guī)范。
規(guī)范將會涵蓋Icon 圖標(biāo)最基本的構(gòu)成:畫布尺寸、線條、視覺重量。
視覺上的重量
同樣高與寬的圖像會因?yàn)樾螤疃胁煌囊曈X重量,例如直徑14px 的圓與14px 高寬的正方形在視覺上看起來就不一樣大。
在Sketch 中常常會用高與寬來判斷物件尺寸,觀察不同形狀形成的負(fù)空間,在視覺上并不一樣大。
觀察上圖可以看見方形在視覺上最大,而圓形與三角形較?。灰虼嗽谝曈X重量上盡量維持每一個icon 看起來是一樣大的。
當(dāng)然會有一些例外的圖標(biāo),例如:方向(左右上下)用于下拉選單或上一頁等,在繪制這些icon圖標(biāo) 時將其維持在「視覺的」正中心。
畫布尺寸與繪圖空間
制作icon圖標(biāo)的畫布尺寸為14px * 14px。繪圖空間會隨著構(gòu)圖而有所不同,以方形構(gòu)圖為基準(zhǔn):
方形構(gòu)圖
因?yàn)榉叫卧谝曈X上為最大的圖形,因此方形構(gòu)圖在14px* 14px 的畫布上會預(yù)留1px 空間。
圓形構(gòu)圖
圓形構(gòu)圖則會超出預(yù)留1px 的空間,為了讓它在視覺上的重量與方形構(gòu)圖相當(dāng)。
線條運(yùn)用
線條的運(yùn)用可以分成三種元素:
1px 線條元素(主要構(gòu)圖)
主要構(gòu)圖將會構(gòu)成icon圖標(biāo)的主要形狀。描繪icon圖標(biāo) 主體部分使用1px 粗細(xì)圓頭線條,在轉(zhuǎn)折處的圓角為1px。
0.8px 線條元素(用于細(xì)節(jié))
主要形狀之外,在圖標(biāo) 內(nèi)部的細(xì)節(jié),0.8px 線條的圓角是使用Sketch 線條圓角。
1.4px 元素(通常用于原點(diǎn)、正方形)
用于比較特殊的情形,當(dāng)icon 細(xì)節(jié)有圓形時則會使用。
小結(jié)
目前只規(guī)范icon 最基本的組成,當(dāng)然線條的使用多少也會受到設(shè)計系統(tǒng)所訂定的風(fēng)格影響,這在未來也會持續(xù)修正調(diào)整。
全站高品質(zhì)素材免費(fèi)下載!