如何建立設計規範

9 人贊了文章

為何寫這篇文章？

進入公司半年多，一直all in在一個項目里，從需求到原型到交互文檔到UI——全權負責。這對於初創公司的設計師來說是很正常的事情，我也很樂意這樣的工作，因為能夠學習和總結出許多。

在與開發合作的這半年裡，讓我了解到即使設計圖再高保真，開發也不一定能夠完全複製。在一次次踩坑後的反思中讓我意識到一些規範和說明是多麼的重要。一個項目的開發肯定不止是一個人，在多人合作開發的項目中，很難做到每個人的實現完全相同。在第一代產品上線後，很多樣式不統一的問題浮現在水面，而對於自己在之後的版本更新迭代時也有很多的困擾。所以努力的摸索和學習，發現制定一套設計規範是十分必要的。想通過這篇文章和大家一起分享自己做這項工作時的經驗和感受。

1.為什麼要制定規範？

在前面我也有提到一些。就是在IT小哥哥實現你的設計時沒有抓住你在意的重點，很多時候靠自己的感覺來寫，就會導致產品和設計圖差別大，漏洞多的問題。這個時候就需要把這些重要的點強調出來給開發看，告訴他這些地方要按照這種方式來寫，而強調出來的方式，就是形成一份規範的文檔，這是其一。其二，對於設計師來說，在一個產品中，每一個頁面的控制項和元素都應該具有一致性和統一性。設計師在復用控制項和元素時常常會用到symbol，這就能保證幾百個頁面的同一個元素能夠做到完全相同。可是即使這樣，做的頁面越來越多還是會有一兩個像素級別的差別的可能，在開發實現的時候就會出現跟你想像中的偏差。對於設計師這麼強迫症的物種，即使一兩個像素也是不能夠忍受的。所以如果你有一份規範，即使你有一點偏差，開發也能夠意識的到，就會減少很多問題。還有一點原因很重要，就是在你的規範文檔中，一定會用「重要」「次要」這樣的語句來分類你的內容。用這種方式可以很好的將你的產品風格定義出來，主要色調，主要版式等等。在之後的版本迭代中就會起到很重要的作用，避免新版本上沒有舊版本風格的延續，讓人看起來完全是兩個東西的問題。

2.設計規範該什麼時候建立？

「什麼時候」這個問題我覺得很好回答——「在你找到這篇文章的時候」。當你發現有制定規範的需求的時候，大多數就是制定規範的時機了。

設計規範不能建立的太早也不能建立的太晚，大概就在已經有上線的產品，或者設計已經穩定的實現出來的時候。規範是一個大方向的規則制定，如果建立的太早，可能設計的還不夠完整，思考的不夠全面，問題也還沒暴露出來，那麼你的規範很有可能不夠全，只是你自己yy的東西，可能在具體實現上實用性不強。而建立的太晚，很容易在已經有龐大的設計圖的情況下發現自己的設計都不統一，而真正的產品也很雜亂，這樣再去一個個修正，重新來過將會很累心。所以說在已經有了一定的成品時，讓自己的設計和開發的代碼都從混亂到規範，再進行優化和迭代就會變得比較輕鬆了。

3.制定規範的方法。

剛開始進行這項工作的時候我也很頭大，不知道怎麼開始。直到自己完成了也就總結出一些經驗和想法。

圈1:畫一個思維導圖

思維導圖的意義是整理你的思路。既然你想制定規範，自然是有你想制定規範的內容。可能起初這些內容是零散的，比如你想規範一下按鈕的操作，制定一下顏色的規範...那就把這些都平鋪出來。把你所能想到的所有內容都寫出來後再去分類整理，再然後根據你的產品填充這些分類，盡量做到包含所有內容。我不建議一開始就去搜尋很多的範例，因為範例也是准對於不同的產品的，參照範例很有可能局限住你自己的思路，導致內容太泛泛，不夠針對。但需要注意的是，在分類的方式上要盡量提升高度，不要一下子就跳進很小的細節。像字體、顏色這種全局的規範要單獨分類，不要和其他內容混合在一起說明。上圖中展示的是我設計的產品的規範類目，僅供參考。

圈2:組件化你的設計

每個人做設計都會有自己常用的工具。我一直認為工具不重要，因為他只是做事的手段。只要結果讓人滿意，用哪種方式都是可以的。當然，你的工具應該對你來說是可用性強且高效的。我做設計習慣用sketch，這可能也是大多數交互設計師、UI設計師常用的軟體。而其中最好用的功能就是symbol。我之所以提了一句設計工具是因為我想說對於一個大框架的設計，組件化是特別重要的，不管你用哪種工具，都應該保證可以高效的復用。

其實不管你沒有制定設計規範，你產品的組件庫都應該是有的，這可以大大減輕你的工作量，同時也保證頁面間的一致性。當然，如果你先前沒有這樣的概念，那在制定設計規範時一定要好好考慮了。你的規範文檔中，很大一部分都是你的組件庫的說明與標註。如果你連用到了哪些組件都不清楚，就更不可能讓開發實現的明白了。在建立組件庫時，你就會自然的對於每一個組件進行多狀態的考慮，以及組件的分類，這些非常有助於在做設計規範時的一些前期準備。具體如何去創建你的組件庫就需要另一篇文章來解釋了。簡單來說，就是在你的產品中反覆使用的一些內容要建立一個組，把他們都放在組中，方便再次應用時的直接使用。上圖展示的是我設計的產品的library一部分的縮略圖。

圈3:考慮完整多種場景、狀態

如果你已經準備好了你要規範的內容，也把組件整理好了，那前期的準備工作就完成了。下面就是設計規範文檔具體的撰寫了。強調的第一個點就是考慮完整多種場景和狀態。一般在進行表述時，會用類似於表格的方式進行排布。也就是有橫縱的描述性文字。一般會詳述樣式、狀態和使用場景，並且要把內容進行「主」「次」的劃分。比如主色、輔助色、補充色，再比如常態、懸停狀態、點擊狀態、禁用狀態。根據你的產品描述清楚每一狀態下應該有怎樣的樣式或交互變化。同時附加使用場景的描述，這有助於開發對組件的理解，也方便在之後設計時的使用。就如我開始說的，這份文檔既是給開發看的，同時也是方便於設計的使用的。上圖是我制定的設計規範中截取的一部分，在圖文的排布上可以根據內容的需要進行合理化布局，重點是方便與理解與使用。

圈4:定好尺寸規範

對於規範文檔來說，尺寸的標註無疑是很重要的一部分。這部分不是拿起插件隨便標標那麼簡單，而是要多個方面深思熟慮過的。有幾個比較重要的點提醒大家，第一，對於每一個組件，都要考慮他的極限尺寸（因為本人是做web端的，所以在屏幕適配上要求比較高） ，當超過了極限尺寸應該如何顯示，或者就限定最大尺寸是多少，最小尺寸是多少。第二，當屏幕縮放時就會有內容位置的移動，所以你要限定好最初的相對位置，並且制定好縮放時位置移動的規則。第三，在標註尺寸時要有一定的規則，比如間距用綠色，尺寸用紅色。如果有範圍性的尺寸規範，就在圖層上添加一個蒙版來標註，讓其邊緣更加清晰。

圈5:文字說明很重要

設計規範文檔除了圖很重要外，配合的文字說明也很重要。我們往往就是因為給開發呈現的只是一張圖，誤認為自己把想表達的都隱藏在圖中了，沒有把重要的地方標註清楚，才導致了開發對於一些細節一頭霧水，自己yy。在規範文檔中出現說明文字的主要在這樣幾個位置：第一，標題後。這個位置的說明文字主要為了描述這一部分內容的功能特點或是一些共性的描述。例如，在圖標說明上表述這一部分圖標一般用作什麼功能；第二，示例樣式說明。有些內容比如標誌、輸入框等，雖然具體內容有差別，但在整體樣式上是統一的，所以往往我們會把這種統一的樣式描述做一個示例性的說明。比如某類圖標的尺寸，與文字搭配時的間距等；第三，具體樣式說明。這是最常出現的說明文字，對於每一個樣式、狀態、使用場景的具體描述。此描述最好詳盡，但注意不要針對於哪一個頁面，一定是可以復用的規則，避免太強的特殊性。

4.如何實施規範？

在制定了規範後，一定要針對於新的規範更新設計圖。這個工作雖然可能枯燥且繁雜，但是是非常必要的一步。開發會在你制定好規範後，按照你的規則寫好每一個組件，然後在頁面中應用。而在應用時，還是要參照設計稿來做。如果你的規範制定的很好，但是設計稿還是一團糟，那麼很可能開發小哥哥們把每一個組件都寫好了，可是在應用時還是很混亂，主要按鈕用成次要按鈕，單選框用作多選框等等。然而如何更新設計圖上我們團隊也有自己的一套方法。

首先，把制定好的規範給前端小哥哥，他們把每一個組件先寫好。然後，我們將整個產品按模塊劃分、排期，制定一個規範產品的時間表。並且把這個排期與新功能的開發加在一起。在每一個階段的工作中，我們會先開發新功能，同時將該排期內的舊內容按規範重新寫過（其實也沒有重寫那麼誇張），設計這邊也會把該模塊的設計稿更新成最規範的版本。測試也會在測新功能的同時把規範化的頁面再測一遍。這樣經過幾個版本的迭代，在一個成熟的版本生成時，就可以有一個規範化的產品呈現了！

5.關於設計規範的局限

有很多言論說制定了設計規範後設計師就沒有發揮的空間了，相信這種言論也有無數的人批判過了。設計規範是對於產品風格、調性的確定，是可以讓團隊合作更高效的媒介，也是對於產品迭代時追溯的根據。俗話說無規矩不成方圓，沒有制定規範的產品肯定缺少很多細節的考慮，划水的部分一定有很多。我們制定的規範只是為了更高效的工作，對於設計師一些創意的發揮並不會有影響。或者說，設計師在發揮創意時，也一定要符合規範上的內容，這也是非常必須的。你是一個搞美食的產品，設計師做成了搞音樂的產品，即使再美再有創意，也是不能去做的。而且產品的迭代一定要能有看到前身的影子的感覺。百事可樂的品牌形象也迭代過多次，但是即使只是看到顏色或是瓶身的曲線，你也能一眼認出它是百事可樂來，這就是重要元素延續的重要性。而規範，就是把重要的這些元素封裝起來，助於你在設計時不會偏離主線，同時產品也更加嚴謹、細緻。

ps：提醒一下大家，在做設計規範時要常與開發溝通，只有你想不到的，沒有做不到的也要看實際情況的。如果你制定了一套開發根本不能實現的規範，那就gg了。

以上就是我對制定設計規範的一些心得，希望是乾貨。很多知識怎麼看都學不會，只有自己真正實施過才能真的有所感悟。