△ iOS kit 同樣的，前端開發(fā)也會在開發(fā)過程中形成組件庫，避免代碼重復(fù)編寫。最經(jīng)典的例子就是Bootstrap，就職于 Twitter 的一個設(shè)計師和一個工程師創(chuàng)造了這個廣受歡迎的前端開發(fā)框架，里面包含了按鈕、輸入框、模態(tài)框等網(wǎng)站需要的各種組件。 △ Bootstrap 也就是說，不僅設(shè)計師需要一套完整的設(shè)計規(guī)范，開發(fā)者也同樣需要一套組件庫及文檔。將二者結(jié)合再產(chǎn)出規(guī)范，將會提升設(shè)計師和開發(fā)者的協(xié)作效率。此外，由于設(shè)計師和開發(fā)者的思維不同，制定時相輔相成，制定出的規(guī)范將更加完整且更具有實用性。 那么這樣一套設(shè)計規(guī)范該怎樣做呢？前段時間我司網(wǎng)站改版，就制定了一套這樣的規(guī)范，我們給其命名為Musikit。現(xiàn)在我回顧一下整個過程，希望能給你帶來一些思考。 △ Musikit △ Musikit首頁 一、設(shè)計師在初步設(shè)計中制定一些基礎(chǔ)規(guī)范 產(chǎn)品文檔交付之后，設(shè)計師就開始進行整體風(fēng)格把控，并制定一些基礎(chǔ)規(guī)范，比如字體使用、字號層級、基本色調(diào)等。這些東西完成之后，設(shè)計師就會開始具體頁面的設(shè)計。不考慮特殊頁面（專題、活動等），此時必定需要諸如按鈕之類的基礎(chǔ)控件，那么設(shè)計師就會對其進行提取。 當(dāng)控件具有一定數(shù)量時，一個基本的設(shè)計規(guī)范就有了雛形。在此階段設(shè)計師不用考慮太多全局的東西，不能因為規(guī)范限制思維，只需要順著思路往下做，遇到公共控件提取出來即可。
二、前端開發(fā)加入，對控件進行擴展 在設(shè)計師進行到上述狀態(tài)的時候，前端開發(fā)就要加入了。前端開發(fā)在此時可以對設(shè)計師的設(shè)計稿進行技術(shù)評估，對控件進行擴展補充。比如，設(shè)計稿中評論區(qū)回復(fù)按鈕有兩種：回復(fù)和取消。設(shè)計師考慮到了使用不同樣式區(qū)分不同功能，但是沒有考慮到按鈕的狀態(tài)：鼠標(biāo)移上去時、點按時及按鈕禁用時。
△ 回復(fù)按鈕和取消按鈕 因此，前端就對其進行了補充，完善了按鈕的不同狀態(tài)。 △ 按鈕的狀態(tài)（行為） 同時，注意到該頁面設(shè)計稿中還有一些比較大的按鈕，考慮到按鈕尺寸也是變化的，我們一致討論決定將按鈕擴充到五種尺寸：高度從20px到60px每個相差10px。 接著我們又初步確定了三種不同顏色以滿足當(dāng)前設(shè)計情景，這樣，一套按鈕組件就基本完成了。在此過程中前端開發(fā)需要及時了解設(shè)計師的想法，憑借以往經(jīng)驗對控件做出一定的擴展。當(dāng)然也無需過于全面，以通用場景為主，特殊場景再作考慮。 三、設(shè)計師和前端開發(fā)的“輪回戰(zhàn)” 后續(xù)設(shè)計及開發(fā)過程中，設(shè)計師和前端就需要按一定頻率相互溝通反饋，重復(fù)第二步過程，共同完善這一套規(guī)范。 隨著組件增多，我們先對其進行了簡單分類，按照復(fù)雜程度簡單的分成了部件和插件。 △ Musikit導(dǎo)航 部件是經(jīng)常使用的一些簡單控件，比如按鈕、輸入框、表格、頁碼等等。這些東西大多比較簡單，沒有太多交互，只需要CSS樣式就可以實現(xiàn)。 而插件則比較復(fù)雜，通常包含一些復(fù)雜交互，也包含一些基本部件。彈出提示、模態(tài)框、表單提交等就是插件，他們不僅需要CSS樣式還需要JS來實現(xiàn)交互。 接下來的過程，設(shè)計師和前端開發(fā)都需要一定的敏感度，在工作過程中注意哪些東西是可以作為部件或作為組件的。比如我們在登錄注冊彈出層的設(shè)計及開發(fā)過程中就注意到了發(fā)送短信驗證碼是可以作為一個組件的，因為不僅這里需要用到，賬號綁定手機等場景也需要它。 △ 發(fā)送短信驗證碼 有些組件可能很復(fù)雜，要適應(yīng)多個場景，前端開發(fā)就需要找設(shè)計師了解以后可能會怎么用，哪些屬性不能寫死要作為一個配置項等。我們在最初設(shè)計模態(tài)框時，將其寬度寫死了，后來設(shè)計師新出的設(shè)計稿中模態(tài)框出現(xiàn)了不同的寬度，我們就及時將模態(tài)框的寬度調(diào)整為可配置項。 △ 模態(tài)框 四、形成文檔 一般的設(shè)計文檔，是設(shè)計師制作的圖片存檔。既然這一次前端開發(fā)也參與了，我們就把設(shè)計規(guī)范做成了網(wǎng)頁，并增加了代碼部分。 △ 代碼部分 這樣一來，設(shè)計師和前端都可以進行參閱，而且這些控件還是可以交互的，清晰明了，簡單易懂。 我們將這些東西放在了主站下，并對訪問權(quán)限做了限制。考慮到有些代碼很長，而設(shè)計師有可能會有代碼恐懼癥，我們增加了一個角色切換按鈕，切換成設(shè)計版時會隱藏代碼。 △ 角色切換 結(jié)語 改版第一階段完成后，Musikit就上線了。相信有了Musikit在第二階段的工作過程中大家的效率都會提升，但是這套設(shè)計規(guī)范遠(yuǎn)遠(yuǎn)沒有完成。這個過程中，設(shè)計師了解了前端開發(fā)的一些簡單原理，前端開發(fā)也能及時了解設(shè)計師的想法，大家不再是各做各的而是真正協(xié)同起來，這也許是共同制定設(shè)計規(guī)范的最大收獲。
