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

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

整理

整理出界面元素:背景(承載內(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ì)的時(shí)候沒(méi)有將圖標(biāo)顏色納入規(guī)范,圖標(biāo)是命名好,替換圖片就可以了,具體根據(jù)產(chǎn)品需求來(lái)設(shè)計(jì),圖標(biāo)開(kāi)發(fā)也是可以疊色的)

_0326424332-2.jpg

輸出

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

將每個(gè)標(biāo)簽代表的位置說(shuō)明寫(xiě)出來(lái),然后將標(biāo)簽丟到界面上,和開(kāi)發(fā)信息對(duì)齊,確定好規(guī)則顏色