『嘿！設計師』是我的一個新欄目，主要從一個前端開發者的角度講一些設計師關心的程式碼原理，或者聊一聊開發者和設計師之間協作的一些事兒，也偶爾教設計師一些能提高效率的獨特技巧。藉此希望開發者和設計師之間能夠彼此瞭解更多，工作起來更加順暢。
作為設計師的你看到這個標題可能會奇怪：制定設計規範不是設計師的事兒嗎？為什麼要和前端開發一起呢？
不同於以前的網站，樣式基礎、互動簡單，前端們都是以頁面為單位進行開發。現在的網站要複雜龐大很多，前端開發普遍採用元件式開發，即不再以頁面為單位而是將頁面再拆分，這和設計師的工作有著許多相通之處。
一般來說，設計師會在設計過程中有意識地對視覺元素進行提取，形成一個元件庫用以複用。比如iOS的元件庫：
同樣的，前端開發也會在開發過程中形成元件庫，避免程式碼重複編寫。最經典的例子就是Bootstrap，就職於 Twitter 的一個設計師和一個工程師創造了這個廣受歡迎的前端開發框架，裡面包含了按鈕、輸入框、模態框等網站需要的各種元件。
也就是說，不僅設計師需要一套完整的設計規範，開發者也同樣需要一套元件庫及文件。將二者結合再產出規範，將會提升設計師和開發者的協作效率。此外，由於設計師和開發者的思維不同，制定時相輔相成，制定出的規範將更加完整且更具有實用性。
那麼這樣一套設計規範該怎樣做呢？前段時間我司網站改版，就制定了一套這樣的規範，我們給其命名為musikit。現在我回顧一下整個過程，希望能給你帶來一些思考。
一、設計師在初步設計中制定一些基礎規範
產品文件交付之後，設計師就開始進行整體風格把控，並制定一些基礎規範，比如字型使用、字號層級、基本色調等。這些東西完成之後，設計師就會開始具體頁面的設計。不考慮特殊頁面（專題、活動等），此時必定需要諸如按鈕之類的基礎控制元件，那麼設計師就會對其進行提取。
當控制元件具有一定數量時，一個基本的設計規範就有了雛形。在此階段設計師不用考慮太多全域性的東西，不能因為規範限制思維，只需要順著思路往下做，遇到公共控制元件提取出來即可。
二、前端開發加入，對控制元件進行擴充套件
在設計師進行到上述狀態的時候，前端開發就要加入了。前端開發在此時可以對設計師的設計稿進行技術評估，對控制元件進行擴充套件補充。比如，設計稿中評論區回覆按鈕有兩種：回覆和取消。設計師考慮到了使用不同樣式區分不同功能，但是沒有考慮到按鈕的狀態：滑鼠移上去時、點按時及按鈕禁用時。
因此，前端就對其進行了補充，完善了按鈕的不同狀態。
同時，注意到該頁面設計稿中還有一些比較大的按鈕，考慮到按鈕尺寸也是變化的，我們一致討論決定將按鈕擴充到五種尺寸：高度從20px到60px每個相差10px。
接著我們又初步確定了三種不同顏色以滿足當前設計情景，這樣，一套按鈕元件就基本完成了。在此過程中前端開發需要及時瞭解設計師的想法，憑藉以往經驗對控制元件做出一定的擴充套件。當然也無需過於全面，以通用場景為主，特殊場景再作考慮。
三、設計師和前端開發的“輪迴戰”
後續設計及開發過程中，設計師和前端就需要按一定頻率相互溝通反饋，重複第二步過程，共同完善這一套規範。
隨著元件增多，我們先對其進行了簡單分類，按照複雜程度簡單的分成了部件和外掛。
部件是經常使用的一些簡單控制元件，比如按鈕、輸入框、表格、頁碼等等。這些東西大多比較簡單，沒有太多互動，只需要CSS樣式就可以實現。
而外掛則比較複雜，通常包含一些複雜互動，也包含一些基本部件。彈出提示、模態框、表單提交等就是外掛，他們不僅需要CSS樣式還需要JS來實現互動。
接下來的過程，設計師和前端開發都需要一定的敏感度，在工作過程中注意哪些東西是可以作為部件或作為元件的。比如我們在登入註冊彈出層的設計及開發過程中就注意到了傳送簡訊驗證碼是可以作為一個元件的，因為不僅這裡需要用到，賬號繫結手機等場景也需要它。
有些元件可能很複雜，要適應多個場景，前端開發就需要找設計師瞭解以後可能會怎麼用，哪些屬性不能寫死要作為一個配置項等。我們在最初設計模態框時，將其寬度寫死了，後來設計師新出的設計稿中模態框出現了不同的寬度，我們就及時將模態框的寬度調整為可配置項。
四、形成文件
一般的設計文件，是設計師製作的圖片存檔。既然這一次前端開發也參與了，我們就把設計規範做成了網頁，並增加了程式碼部分。
這樣一來，設計師和前端都可以進行參閱，而且這些控制元件還是可以互動的，清晰明瞭，簡單易懂。
我們將這些東西放在了主站下，並對訪問許可權做了限制。考慮到有些程式碼很長，而設計師有可能會有程式碼恐懼症，我們增加了一個角色切換按鈕，切換成設計版時會隱藏程式碼。
結語
改版第一階段完成後，musikit就上線了。相信有了musikit在第二階段的工作過程中大家的效率都會提升，但是這套設計規範遠遠沒有完成。這個過程中，設計師瞭解了前端開發的一些簡單原理，前端開發也能及時瞭解設計師的想法，大家不再是各做各的而是真正協同起來，這也許是共同制定設計規範的最大收穫。