純正乾貨:圖標設計的三點最基本規範你會?

圖標設計的規範涵蓋顏色、符號的表達、線條的運用等等。當整個設計系統還沒那麼明朗要建立圖標庫時,應選擇比較保守的作法,將設計系統會影響到的層面抽離本次建立的圖標 規範。

規範將會涵蓋Icon 圖標最基本的構成:畫布尺寸、線條、視覺重量。

視覺上的重量

同樣高與寬的圖像會因為形狀而有不同的視覺重量,例如直徑14px 的圓與14px 高寬的正方形在視覺上看起來就不一樣大。

純正乾貨:圖標設計的三點最基本規範你會?

在Sketch 中常常會用高與寬來判斷物件尺寸,觀察不同形狀形成的負空間,在視覺上並不一樣大。

觀察上圖可以看見方形在視覺上最大,而圓形與三角形較小;因此在視覺重量上儘量維持每一個icon 看起來是一樣大的。

純正乾貨:圖標設計的三點最基本規範你會?

當然會有一些例外的圖標,例如:方向(左右上下)用於下拉選單或上一頁等,在繪製這些icon圖標 時將其維持在「視覺的」正中心。

純正乾貨:圖標設計的三點最基本規範你會?

畫布尺寸與繪圖空間

純正乾貨:圖標設計的三點最基本規範你會?

製作icon圖標的畫布尺寸為14px * 14px。繪圖空間會隨著構圖而有所不同,以方形構圖為基準:

方形構圖

因為方形在視覺上為最大的圖形,因此方形構圖在14px* 14px 的畫布上會預留1px 空間。

圓形構圖

圓形構圖則會超出預留1px 的空間,為了讓它在視覺上的重量與方形構圖相當。

線條運用

線條的運用可以分成三種元素:

1px 線條元素(主要構圖)

主要構圖將會構成icon圖標的主要形狀。描繪icon圖標 主體部分使用1px 粗細圓頭線條,在轉折處的圓角為1px。

純正乾貨:圖標設計的三點最基本規範你會?

0.8px 線條元素(用於細節)

主要形狀之外,在圖標 內部的細節,0.8px 線條的圓角是使用Sketch 線條圓角。

純正乾貨:圖標設計的三點最基本規範你會?

1.4px 元素(通常用於原點、正方形)

用於比較特殊的情形,當icon 細節有圓形時則會使用。

純正乾貨:圖標設計的三點最基本規範你會?

小結

目前只規範icon 最基本的組成,當然線條的使用多少也會受到設計系統所訂定的風格影響,這在未來也會持續修正調整。


分享到:


相關文章: