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

發(fā)現(xiàn)問題

慣例我們?cè)O(shè)計(jì)界面的時(shí)候配色不會(huì)太多，但是我們會(huì)在輸出的界面上密密麻麻的標(biāo)記著著色值，相同的設(shè)計(jì)在不同的界面上會(huì)反復(fù)去標(biāo)記，有的時(shí)候還會(huì)出錯(cuò)，還需要回頭去核對(duì)顏色，當(dāng)我們需要調(diào)整顏色的時(shí)候，找開發(fā)調(diào)整顏色的時(shí)候我們還需要截圖并標(biāo)記說明，說哪里顏色不對(duì)，一一標(biāo)記說明，開發(fā)也需要一一對(duì)應(yīng)的去修改，在這個(gè)過程中設(shè)計(jì)開發(fā)都非常抓狂

密密麻麻標(biāo)記示范（隨意感受下相同顏色標(biāo)記的煩惱）

前面說太多，總結(jié)就兩點(diǎn)：

當(dāng)同一界面更新的時(shí)候我們依然會(huì)再做一次顏色標(biāo)記

如果開發(fā)的代碼設(shè)計(jì)未進(jìn)行樣式設(shè)計(jì)，未進(jìn)行代碼規(guī)范，視覺設(shè)計(jì)要換相同元素的顏色就會(huì)非常困難，工作重復(fù)率很高，費(fèi)時(shí)間

注：在解決問題前有看相關(guān)設(shè)計(jì)規(guī)范的文章，有從里面學(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ì)的時(shí)候沒有將圖標(biāo)顏色納入規(guī)范，圖標(biāo)是命名好，替換圖片就可以了，具體根據(jù)產(chǎn)品需求來設(shè)計(jì)，圖標(biāo)開發(fā)也是可以疊色的）

輸出

當(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)簽代表的位置說明寫出來，然后將標(biāo)簽丟到界面上，和開發(fā)信息對(duì)齊，確定好規(guī)則顏色

假如你的圖標(biāo)也需要規(guī)范，就如下，不需要規(guī)范就不要

當(dāng)開發(fā)按照已經(jīng)設(shè)計(jì)好的規(guī)范完成整個(gè)產(chǎn)品的開發(fā)，我們需要換膚的時(shí)候，只需要給一個(gè)“word”文檔給開發(fā)，這樣就可以一鍵完成一整套產(chǎn)品的換色

規(guī)范好能夠?qū)崿F(xiàn)主題配色，日夜間模式，個(gè)性化主題設(shè)計(jì)，單個(gè)產(chǎn)品某一標(biāo)簽換色，讓同類型產(chǎn)品主題換膚無壓力，以下是規(guī)范產(chǎn)品展示，都是一套規(guī)范換色喲

最后

有什么不明白可以直接給我留言喲，請(qǐng)多多指教，謝謝