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

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

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

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

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

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

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

注：在解決問題前有看相關(guān)設(shè)計規(guī)范的文章，有從里面學(xué)習(xí)和吸取到方法，希望見過的朋友不要驚訝，那一定是我取來用的）

解決問題

整理

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

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

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

定義

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

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

輸出

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

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

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

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

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

最后

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