發現問題

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

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

前面說太多，總結就兩點：

當同一界面更新的時候我們依然會再做一次顏色標記

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

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

解決問題

整理

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

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

理清產品的模塊以及界面構成

定義

將文字，背景，按鈕，線條顏色進行“標簽定義” 可以根據自己的習慣進行定義

（我設計的時候沒有將圖標顏色納入規范，圖標是命名好，替換圖片就可以了，具體根據產品需求來設計，圖標開發也是可以疊色的）

輸出

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

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

假如你的圖標也需要規范，就如下，不需要規范就不要

當開發按照已經設計好的規范完成整個產品的開發，我們需要換膚的時候，只需要給一個“word”文檔給開發，這樣就可以一鍵完成一整套產品的換色

規范好能夠實現主題配色，日夜間模式，個性化主題設計，單個產品某一標簽換色，讓同類型產品主題換膚無壓力，以下是規范產品展示，都是一套規范換色喲

最后

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