你需要設(shè)計規(guī)范嗎，何時需要？

答案取決于你的產(chǎn)品類型，以及設(shè)計規(guī)范的使用者會有哪些。這里所說的使用者包括設(shè)計師、開發(fā)人員、內(nèi)容創(chuàng)建者等角色。搞清楚“規(guī)范的使用者是誰”，這非常重要——很多管理人員或設(shè)計師會告訴你，如果我們創(chuàng)建一份設(shè)計規(guī)范，它會在接下來很長一段時間內(nèi)幫助團隊節(jié)省大量的時間，叭啦叭啦；但實際情況是，你們很有可能在投入了巨大的時間與人力成本去做這件事之后，卻發(fā)現(xiàn)這份規(guī)范當中的內(nèi)容對團隊里的任何一個職能類型都沒有很大的參考價值；最壞的情況是，無論設(shè)計師還是開發(fā)人員，他們壓根就不會去看它。

“時間”也是一個重要的因素。如果你們當前正忙于新產(chǎn)品的設(shè)計開發(fā)，那么顯然無法抽出足夠的時間去做規(guī)范方面的事情。設(shè)計規(guī)范是一項長期投資，如果眼下不確定自己有足夠的資源可以投入，那么就不要去做，但你可以從現(xiàn)在開始為此做些準備，在新產(chǎn)品的設(shè)計開發(fā)過程中留意那些有可能寫入設(shè)計規(guī)范的方方面面，將它們作為素材搜集起來，到創(chuàng)建規(guī)范的時候加以整理。

你也可以試著回答如下這些問題，如果其中大部分的答案都是肯定的，那么你可以考慮創(chuàng)建一份設(shè)計規(guī)范了：

你是否想節(jié)省腦細胞？
你是否希望在產(chǎn)品中落實良好的用戶體驗？
你是否覺得有必要在產(chǎn)品的設(shè)計方面保持一致性？
除了當前的網(wǎng)站或應(yīng)用之外，你的品牌和產(chǎn)品在將來是否延續(xù)性和擴展性？
是否有第三方合作者會用到你的品牌元素？
你的產(chǎn)品當中是否會有頻繁而規(guī)律的內(nèi)容更新？
在自己的團隊之外是否有第三方的內(nèi)容提供者？
你的產(chǎn)品是否有提供給第三方設(shè)計師與開發(fā)人員的API接口？
你是否準備以公司的形式長期維護當前產(chǎn)品或是繼續(xù)開發(fā)新產(chǎn)品？
你是否就職于一家大公司？

怎樣創(chuàng)建設(shè)計規(guī)范？

如果你確定自己需要一份設(shè)計規(guī)范，那么怎樣著手進行創(chuàng)建呢？正如前面提到的，這也要取決于你的產(chǎn)品和團隊的實際情況。有可能你只需要為自己創(chuàng)建設(shè)計規(guī)范，這時它更像是一種備忘或歸納，那么你就沒必要做的非常細致，也不需要在表現(xiàn)形式上花費太多時間；而多數(shù)情況下，設(shè)計規(guī)范是面向產(chǎn)品系列及大中型團隊的，這時你就必須在個各方面都深入的進行，同時保證必要的細節(jié)。

我列了兩個清單，分別是“包含哪些內(nèi)容？”和“還需要些什么？”。其中第一個清單里列出了設(shè)計規(guī)范當中通常需要涉及到的內(nèi)容，后者則包括了你有可能需要進行額外處理的內(nèi)容。當然，這兩份清單并不是標準摸板一類的東西，你只需要在創(chuàng)建規(guī)范時結(jié)合自己的實際情況對這些要點加以考慮。

包含哪些內(nèi)容？

品牌元素。給出官方logo和標準配色方案的定義及范例，介紹logo在全彩、黑白或不同背景色等狀況下的使用方式，提供標準配色的HEX及RGB值，另外也可以提供logo文件的下載，包括.png、.jpg甚至是.ai或.psd文件。

文字。對頁頭、段落、引用、標簽、表單標題等任何有可能出現(xiàn)格式化文字的地方進行規(guī)范定義，包括字體、字號、行高、字間距等方面。

布局。定義不同的區(qū)塊和元素在界面當中的位置，還有它們彼此之間的關(guān)系。對于那些在全局范圍內(nèi)普遍適用的外間距(margin)、內(nèi)邊距(padding)、網(wǎng)格模式等規(guī)則也要作以說明；另外，有些元素會根據(jù)界面環(huán)境的不同產(chǎn)生相應(yīng)的變化，這些也需要在規(guī)范中也要進行說明，最好可以搭配圖片進行展示。

鏈接和按鈕。定義鏈接和按鈕的視覺風格，為不同模塊中的鏈接以及不同類型表單中的按鈕提供色值及圖例。這個過程也有可能幫助你對一些過于復(fù)雜的界面進行簡化。

導(dǎo)航。定義各級導(dǎo)航的視覺風格及交互方式，特別是對于那些具有層級關(guān)系的導(dǎo)航項來說，要完整的展示出嵌套關(guān)系及展開方式。

視覺繼承。定義頁頭、標題、段落、圖片等元素是怎樣在視覺上保持關(guān)聯(lián)性的，提供必要的圖例，并通過文字描述出視覺繼承關(guān)系對于整個產(chǎn)品的外觀氣質(zhì)的影響作用。

圖片與圖標。對內(nèi)容和界面元素當中的圖片及圖標進行定義，包括文件類型、尺寸、文件大小、比例、風格等方面。內(nèi)容中是否會有特色圖片？正文中的圖片是左右浮動還是居中？是否有一套特定的圖標素材？

UI標準。定義不同的UI元素所對應(yīng)的交互模式，以及它們的視覺表現(xiàn)形式，例如在哪些情況下使用復(fù)選框(check box)或單選按鈕(radio button)?？梢栽囍鴮⒕W(wǎng)站涉及到的所有類型的UI元素都陳列出來，提供圖例及前端代碼。

表單和驗證。定義表單的整體風格及元素布局，對表單涉及到的功能流程進行描述；定義表單的驗證規(guī)則以及各種有可能出現(xiàn)的錯誤提示等。

還需要些什么？

多元化。有時你也許需要面向不同的使用者創(chuàng)建不同版本的規(guī)范。例如，對于某些類型的網(wǎng)站來說，有著不同級別和權(quán)限的內(nèi)容創(chuàng)建者與管理人員，最有效的做法是針對不同的角色提供特定的規(guī)范指導(dǎo)；當然你也可以將完整版本的規(guī)范面向不同職能的人員進行訂制性的簡化。

目標任務(wù)。為了使相關(guān)配合部門在大方向上達成默契，你也許需要在設(shè)計規(guī)范中結(jié)合具體內(nèi)容對整個的產(chǎn)品目標及階段性的工作任務(wù)加以描述，這也可以讓大家充分理解規(guī)范的必要性，理解一致化的表現(xiàn)風格及用戶體驗對產(chǎn)品策略的推動作用。

代碼。根據(jù)設(shè)計規(guī)范所面向的人員范圍的實際情況，可以考慮將前端代碼標準及最佳實踐模式配合圖例進行展示，包括HTML、CSS、JavaScript等。

文件規(guī)范。你也許需要面向所有的內(nèi)容創(chuàng)建者制訂文件使用方面的規(guī)范，包括文件類型限定、命名規(guī)則、版本號更新方式等。從長遠的角度來看，這樣可以避免很多瑣碎的潛在問題。

內(nèi)容標準。面向內(nèi)容的創(chuàng)建者及管理者，你也有必要在規(guī)范中對人工生成的內(nèi)容進行格式化的定義，例如正文內(nèi)容的長度、標題的字符數(shù)等等。另外對于內(nèi)容的基調(diào)，提交與編輯操作的流程、版權(quán)處理方式等等也要作以具有實際指導(dǎo)意義的說明。

評論和論壇。如果你的產(chǎn)品為用戶提供了評論功能，或是開設(shè)了相關(guān)的論壇，那么你同樣需要對這些方面的管理進行規(guī)范。例如，評論內(nèi)容的審核標準是什么，怎樣回復(fù)用戶的評論，怎樣處理負面內(nèi)容，在哪些情況下需要關(guān)閉評論功能等等。

可下載、可打印。如果你通過在線的方式創(chuàng)建的設(shè)計規(guī)范，那么要盡量確保相關(guān)人員可以將它下載或打印出來，方便離線使用。不過這里也存在一個問題，就是在更新規(guī)范的時候無法對他人手中的離線版本進行同步處理。這種情況下可以嘗試通過郵件通知的方式加以彌補。

做的漂亮些。既然是設(shè)計規(guī)范，那么其自身的外觀形象也是很重要的。在時間允許的情況下盡量多的使用圖片范例，即保證內(nèi)容形式上的豐富，也能對設(shè)計開發(fā)人員更有直觀的參考價值。從某種程度上講，設(shè)計規(guī)范也是產(chǎn)品整體質(zhì)量和形象的一個組成部分。當然，如果涉及規(guī)范只是供內(nèi)部設(shè)計開發(fā)使用，不涉及第三方合作的話，那么在資源和成本上進行充分的控制也是合理的，譬如一個內(nèi)部wiki系統(tǒng)就可以滿足最基本的需求。

參考范例。最后我們來看一些設(shè)計規(guī)范的實際范例；這些實例主要展示了設(shè)計規(guī)范在品牌元素的使用規(guī)則方面起到的作用。

英文原文