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