配色教程,教大家如何規(guī)范配色

2022-12-26 18:09:24 來源/作者: / 己有:19人學(xué)習(xí)過

整理

整理出界面元素:背景(承載內(nèi)容信息的背景),圖標(biāo)(功能圖標(biāo),豐富內(nèi)容圖標(biāo)),文字,按鈕,線條

整理界面元素樣式:顏色,大小,邊距(據(jù)相鄰元素上下左右邊距,內(nèi)外邊距等)

理清產(chǎn)品的模塊以及界面構(gòu)成

定義

將文字,背景,按鈕,線條顏色進(jìn)行“標(biāo)簽定義” 可以根據(jù)自己的習(xí)慣進(jìn)行定義

(我設(shè)計(jì)的時候沒有將圖標(biāo)顏色納入規(guī)范,圖標(biāo)是命名好,替換圖片就可以了,具體根據(jù)產(chǎn)品需求來設(shè)計(jì),圖標(biāo)開發(fā)也是可以疊色的)

_0326424332-2.jpg

輸出

當(dāng)定義好元素后我們就去界面上做標(biāo)記,將你會復(fù)用,并一直復(fù)用的元素定義為一個標(biāo)簽,比如文字:進(jìn)行文字序列排號T1,T2,T3......并命名,一級標(biāo)題T1,正文文字T2,亮色文字T3...

將每個標(biāo)簽代表的位置說明寫出來,然后將標(biāo)簽丟到界面上,和開發(fā)信息對齊,確定好規(guī)則顏色