你的產品需要設計規范嗎？

　　不是所有的網站或移動應用都需要設計規范。你表弟的博客就未必需要，你鄰居自己搭建的用來賣貓草的小電商網站也不那麼需要，當然這也要看他能賣掉多少，能做到多大規模。

　　通常，只有那些需要維護專業形象和品牌一致性的產品才真正需要設計規范(或是風格指南一類的說法)。不要把這事兒想的太容易，真正意義上的設計規范需要你花費大量的時間成本去創建並持續維護，所以在決定動手之前，最好確認一下你的產品是否真的需要設計規范，它所需要投入的成本是否能夠被接受。

　　什麼是設計規范?

　　在確認是否需要設計規范之前，我們首先應該明確一下設計規范到底是什麼。簡單的說，它就是一份由很多范例組成文檔(電子文檔、印刷文檔或HTML文件等)，用來描述和展示你的產品應該具有怎樣的外觀和交互方式。它就是一份指南，讓你在創建和更新網站或應用時知道在什麼地方使用怎樣的風格標准。設計規范可以幫助你了解一些典型的問題包括“這裡應該使用怎樣的配色?”、“H1標題要用多大的字號?”、“這部分文字內容應該左對齊還是兩側對齊?”等等。

　　雅虎風格指南

　　你需要設計規范嗎?何時需要?

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

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

　　你也可以試著回答如下這些問題，如果其中大部分的答案都是肯定的，那麼你可以考慮創建一份設計規范了：

　　1.你是否想節省腦細胞?

　　2.你是否希望在產品中落實良好的用戶體驗?

　　3.你是否覺得有必要在產品的設計方面保持一致性?

　　4.除了當前的網站或應用之外，你的品牌和產品在將來是否延續性和擴展性?

　　5.是否有第三方合作者會用到你的品牌元素?

　　6.你的產品當中是否會有頻繁而規律的內容更新?

　　7.在自己的團隊之外是否有第三方的內容提供者?

　　8.你的產品是否有提供給第三方設計師與開發人員的API接口?

　　9.你是否准備以公司的形式長期維護當前產品或是繼續開發新產品?

　　10.你是否就職於一家大公司?

　　Netflix公司的API規范(PDF)

　　怎樣創建設計規范?

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

　　我列了兩個清單，分別是“包含哪些內容?”和“還需要些什麼?”。其中第一個清單裡列出了設計規范當中通常需要涉及到的內容，後者則包括了你有可能需要進行額外處理的內容。當然，這兩份清單並不是標准摸板一類的東西，你只需要在創建規范時結合自己的實際情況對這些要點加以考慮。

　　包含哪些內容? 品牌元素

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

　　文字

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

　　布局

　　定義不同的區塊和元素在界面當中的位置，還有它們彼此之間的關系。對於那些在全局范圍內普遍適用的外間距(margin)、內邊距 (padding)、網格模式等規則也要作以說明;另外，有些元素會根據界面環境的不同產生相應的變化，這些也需要在規范中也要進行說明，最好可以搭配圖片進行展示。

　　鏈接和按鈕

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

　　導航

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

　　視覺繼承

　　定義頁頭、標題、段落、圖片等元素是怎樣在視覺上保持關聯性的，提供必要的圖例，並通過文字描述出視覺繼承關系對於整個產品的外觀氣質的影響作用。

　　圖片與圖標

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

　　UI標准

　　定義不同的UI元素所對應的交互模式，以及它們的視覺表現形式，例如在哪些情況下使用復選框(check box)或單選按鈕(radio button)。可以試著將網站涉及到的所有類型的UI元素都陳列出來，提供圖例及前端代碼。

　　表單和驗證

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

　　W3C – 標志的使用規范

　　還需要些什麼? 多元化

　　有時你也許需要面向不同的使用者創建不同版本的規范。例如，對於某些類型的網站來說，有著不同級別和權限的內容創建者與管理人員，最有效的做法是針對不同的角色提供特定的規范指導;當然你也可以將完整版本的規范面向不同職能的人員進行訂制性的簡化。

　　目標任務

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

　　代碼

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

　　文件規范

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

　　內容標准

　　面向內容的創建者及管理者，你也有必要在規范中對人工生成的內容進行格式化的定義，例如正文內容的長度、標題的字符數等等。另外對於內容的基調，提交與編輯操作的流程、版權處理方式等等也要作以具有實際指導意義的說明。

　　評論和論壇

　　如果你的產品為用戶提供了評論功能，或是開設了相關的論壇，那麼你同樣需要對這些方面的管理進行規范。例如，評論內容的審核標准是什麼，怎樣回復用戶的評論，怎樣處理負面內容，在哪些情況下需要關閉評論功能等等。

　　可下載，可打印

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

　　做的漂亮些

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

　　參考范例

　　最後我們來看一些設計規范的實際范例;這些實例主要展示了設計規范在品牌元素的使用規則方面起到的作用。