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

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

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

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

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

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

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

解決問題

整理

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

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

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

定義

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

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

輸出

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

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

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

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

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

最后

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