『嘿瘟芝！設(shè)計師』是我的一個新欄目，主要從一個前端開發(fā)者的角度講一些設(shè)計師關(guān)心的代碼原理褥琐，或者聊一聊開發(fā)者和設(shè)計師之間協(xié)作的一些事兒锌俱，也偶爾教設(shè)計師一些能提高效率的獨特技巧。借此希望開發(fā)者和設(shè)計師之間能夠彼此了解更多敌呈，工作起來更加順暢贸宏。
作為設(shè)計師的你看到這個標題可能會奇怪：制定設(shè)計規(guī)范不是設(shè)計師的事兒嗎？為什么要和前端開發(fā)一起呢磕洪？
不同于以前的網(wǎng)站吭练，樣式基礎(chǔ)、交互簡單析显，前端們都是以頁面為單位進行開發(fā)■暄剩現(xiàn)在的網(wǎng)站要復雜龐大很多，前端開發(fā)普遍采用組件式開發(fā)叫榕，即不再以頁面為單位而是將頁面再拆分浑侥，這和設(shè)計師的工作有著許多相通之處。
一般來說晰绎，設(shè)計師會在設(shè)計過程中有意識地對視覺元素進行提取，形成一個組件庫用以復用括丁。比如iOS的組件庫：
同樣的荞下，前端開發(fā)也會在開發(fā)過程中形成組件庫，避免代碼重復編寫。最經(jīng)典的例子就是Bootstrap尖昏，就職于 Twitter 的一個設(shè)計師和一個工程師創(chuàng)造了這個廣受歡迎的前端開發(fā)框架仰税，里面包含了按鈕、輸入框抽诉、模態(tài)框等網(wǎng)站需要的各種組件陨簇。
也就是說，不僅設(shè)計師需要一套完整的設(shè)計規(guī)范迹淌，開發(fā)者也同樣需要一套組件庫及文檔河绽。將二者結(jié)合再產(chǎn)出規(guī)范，將會提升設(shè)計師和開發(fā)者的協(xié)作效率唉窃。此外耙饰，由于設(shè)計師和開發(fā)者的思維不同，制定時相輔相成纹份，制定出的規(guī)范將更加完整且更具有實用性苟跪。
那么這樣一套設(shè)計規(guī)范該怎樣做呢？前段時間我司網(wǎng)站改版蔓涧，就制定了一套這樣的規(guī)范件已，我們給其命名為musikit。現(xiàn)在我回顧一下整個過程元暴，希望能給你帶來一些思考篷扩。
一、設(shè)計師在初步設(shè)計中制定一些基礎(chǔ)規(guī)范
產(chǎn)品文檔交付之后昨寞，設(shè)計師就開始進行整體風格把控瞻惋，并制定一些基礎(chǔ)規(guī)范，比如字體使用援岩、字號層級歼狼、基本色調(diào)等。這些東西完成之后享怀，設(shè)計師就會開始具體頁面的設(shè)計羽峰。不考慮特殊頁面（專題、活動等）添瓷，此時必定需要諸如按鈕之類的基礎(chǔ)控件梅屉，那么設(shè)計師就會對其進行提取。
當控件具有一定數(shù)量時鳞贷，一個基本的設(shè)計規(guī)范就有了雛形坯汤。在此階段設(shè)計師不用考慮太多全局的東西，不能因為規(guī)范限制思維搀愧，只需要順著思路往下做惰聂，遇到公共控件提取出來即可疆偿。
二、前端開發(fā)加入搓幌，對控件進行擴展
在設(shè)計師進行到上述狀態(tài)的時候杆故，前端開發(fā)就要加入了。前端開發(fā)在此時可以對設(shè)計師的設(shè)計稿進行技術(shù)評估溉愁，對控件進行擴展補充处铛。比如，設(shè)計稿中評論區(qū)回復按鈕有兩種：回復和取消拐揭。設(shè)計師考慮到了使用不同樣式區(qū)分不同功能撤蟆，但是沒有考慮到按鈕的狀態(tài)：鼠標移上去時、點按時及按鈕禁用時投队。
因此枫疆，前端就對其進行了補充，完善了按鈕的不同狀態(tài)敷鸦。
同時息楔，注意到該頁面設(shè)計稿中還有一些比較大的按鈕，考慮到按鈕尺寸也是變化的扒披，我們一致討論決定將按鈕擴充到五種尺寸：高度從20px到60px每個相差10px值依。
接著我們又初步確定了三種不同顏色以滿足當前設(shè)計情景，這樣碟案，一套按鈕組件就基本完成了愿险。在此過程中前端開發(fā)需要及時了解設(shè)計師的想法，憑借以往經(jīng)驗對控件做出一定的擴展价说。當然也無需過于全面辆亏，以通用場景為主，特殊場景再作考慮鳖目。
三扮叨、設(shè)計師和前端開發(fā)的“輪回戰(zhàn)”
后續(xù)設(shè)計及開發(fā)過程中，設(shè)計師和前端就需要按一定頻率相互溝通反饋领迈，重復第二步過程彻磁，共同完善這一套規(guī)范。
隨著組件增多狸捅，我們先對其進行了簡單分類衷蜓，按照復雜程度簡單的分成了部件和插件。
部件是經(jīng)常使用的一些簡單控件尘喝，比如按鈕磁浇、輸入框、表格朽褪、頁碼等等扯夭。這些東西大多比較簡單鳍贾，沒有太多交互鞍匾，只需要CSS樣式就可以實現(xiàn)交洗。
而插件則比較復雜，通常包含一些復雜交互橡淑，也包含一些基本部件构拳。彈出提示、模態(tài)框梁棠、表單提交等就是插件置森，他們不僅需要CSS樣式還需要JS來實現(xiàn)交互。
接下來的過程符糊，設(shè)計師和前端開發(fā)都需要一定的敏感度凫海，在工作過程中注意哪些東西是可以作為部件或作為組件的。比如我們在登錄注冊彈出層的設(shè)計及開發(fā)過程中就注意到了發(fā)送短信驗證碼是可以作為一個組件的男娄，因為不僅這里需要用到行贪，賬號綁定手機等場景也需要它。
有些組件可能很復雜模闲，要適應(yīng)多個場景建瘫，前端開發(fā)就需要找設(shè)計師了解以后可能會怎么用，哪些屬性不能寫死要作為一個配置項等尸折。我們在最初設(shè)計模態(tài)框時啰脚，將其寬度寫死了，后來設(shè)計師新出的設(shè)計稿中模態(tài)框出現(xiàn)了不同的寬度实夹，我們就及時將模態(tài)框的寬度調(diào)整為可配置項橄浓。
四、形成文檔
一般的設(shè)計文檔亮航，是設(shè)計師制作的圖片存檔荸实。既然這一次前端開發(fā)也參與了，我們就把設(shè)計規(guī)范做成了網(wǎng)頁塞赂，并增加了代碼部分泪勒。
這樣一來，設(shè)計師和前端都可以進行參閱宴猾，而且這些控件還是可以交互的圆存，清晰明了，簡單易懂仇哆。
我們將這些東西放在了主站下沦辙，并對訪問權(quán)限做了限制《锾蓿考慮到有些代碼很長油讯，而設(shè)計師有可能會有代碼恐懼癥详民，我們增加了一個角色切換按鈕，切換成設(shè)計版時會隱藏代碼陌兑。
結(jié)語
改版第一階段完成后沈跨，musikit就上線了。相信有了musikit在第二階段的工作過程中大家的效率都會提升兔综，但是這套設(shè)計規(guī)范遠遠沒有完成饿凛。這個過程中，設(shè)計師了解了前端開發(fā)的一些簡單原理软驰，前端開發(fā)也能及時了解設(shè)計師的想法涧窒，大家不再是各做各的而是真正協(xié)同起來，這也許是共同制定設(shè)計規(guī)范的最大收獲锭亏。
未經(jīng)允許纠吴，禁止轉(zhuǎn)載
