之前寫了一些關于APP原型文檔的文章：一款APP的互動文檔從撰寫到傳遞
這次想寫下關于APP設計規範文檔的内容，規範文檔這個東西，實際上大部分中小型公司沒有這方面的需求,也沒精力去制作這樣一個系統性的東西，是以文章篇幅不長。
但設計規範本身是個非常有助于保持産品品牌統一的好東西。
幾年以前寫設計規範文檔，都是一頁頁的手寫設計規範，效率低下，主要還是累~
最近又開始為新的産品項目撰寫設計規範了，時代進步，生産技術也要進步嘛~
于是我發現了個非常高效的設計規範制作工具：Mockplus摩客的設計系統。
它本身是個原型設計工具，在這個移動網際網路的時代，做互動設計或者PM的朋友應該經常使用或者知道Mockplus。
但今天不談它的原型設計，去官網下載下傳用戶端，10分鐘就上手，零門檻的原型工具。
主要想說的還是用它制作設計規範，首先它是個線上的制作系統；
為什麼選擇用Mockplus的設計系統來制作設計規範呢？原因有二：
①系統本身提供了設計規範的大綱。
比如标準色、标準字、圖示、布局等等這類大綱，幾乎囊括了一份設計規範文檔該有的所有内容。
你隻需要在對應的标簽下，自定義添加對應的内容就可以了；
因為是線上工具，制作完成後還可以分享連結或者直接導出PDF檔案，便捷性和流通性比較高；
②有對應的Sketch插件，可以在Sketch裡直接調用自己建立的設計規範資源庫。
也就是說，你制作完設計規範後，下載下傳Sketch插件；在Sketch裡做設計的時候，就可以直接使用設計規範的資源庫，對應的标注色，标準字等等都可以在Sketch裡一鍵使用。
這也是我比較看重的一點，設計規範是拿來用的，不是說我整理完了就放在這裡讓人看了，這個功能是我最喜歡的一點。
上述兩點後文都會提到，這裡隻是先說下選擇它的原因。
當然了，之前寫的文章也多次強調過：
工具隻是提高效率的手段，重心還是設計的思想，是以别被工具束縛了自己。
那我們首先談談一些概念性的東西吧~
Part 1 設計規範的概況
設計規範文檔是個什麼東西呢？
最簡單的了解就是，對産品的設計和體驗進行一個系統性整理和約定。
包括産品中使用的顔色，字型字号，各類控件樣式，布局樣式等等，都整理成一份可流通的文檔，這份文檔對之後的産品更新疊代起指導作用。
(下圖來自京東無線視覺規範，侵删)
①設計規範的撰寫時間
先說說這個設計規範應該什麼時候開始寫呢
設計規範，一定是産品發展到了一定階段，才會開始撰寫制作的産物；
通常是主體界面完成，總進度完成大概50%的時候，可以考慮嘗試整理設計規範了。
一般來說，大部分中小型企業整個部門，可能就搭配了1個啥都幹的UI設計師；
這時候如果你一個人需要制作規範文檔，可以簡單做一下，基本上标準字型、字号、色值、控件等等都可以快速記錄下來作為規範文檔的内容；
之後等項目完成，再補全規範文檔，作為後續版本的指導手冊。
那一些比較大型的公司和部門，可能不止一位設計師，比如我目前的設計團隊一共7個人：4個UI，2個UE，1個平面。
那這時候，需要其中工作經驗豐富的設計師作為設計規範制作項目的主導者，規範好各個子產品，由其他人協助統一完成一份比較全面的設計規範文檔。
②設計規範的作用
就我目前編寫過的設計規範以及使用其他人的設計規範的經驗來看，
最常見也是最實用的作用有以下2點：
1.對設計師而言：為後續版本疊代和多人協作提供指導，保持産品的統一性；
一個項目，從V1.0一直更新到2.0、3.0……,很多時候即使同一位設計師在不同版本裡做出的東西也可能會因為版本久遠，記不清而不小心導緻視覺風格不統一；
而一個項目有時會好幾個設計師共同參與，甚至還有不同時間段先後參與到項目中的，每個人的設計風格都不相同，這樣容易造成視覺界面的不統一，導緻體驗不佳。
是以統一的設計規範，能讓後續版本和不同設計師之間保持産品的視覺風格統一。
2.對開發而言：提供标準化的元件樣式，減少開發重複時間
很多标準化的頁面控件完全可以做成設計規範裡的标注好的标準元件樣式，這樣就不需要每次設計師都要再标注一遍給開發。
而且也可以避免有的開發粗心大意，兩個頁面的同類型元件樣式都寫的不統一。
③設計規範文檔的内容
現在網絡上有非常多的知名産品的設計規範文檔，幾乎都可以上網搜到。
我目前看過差不多有上百份的産品設計規範文檔，總結下來，無外乎以下幾項：
标準色：産品用色、字型用色、背景用色、分割線用色，以及各種色值的使用場景；
标準字：字型、字号，字間距、行間距，以及各類使用場景；
圖 标：圖示大小、位置、樣式，以及各類使用場景；
公用控件：分級導航樣式、标題欄樣式、輸入框、彈窗、按鈕、清單、toast、加載、loading、空白頁等等各類可作為設計規範的控件；
布 局：頁面布局樣式
模 塊：功能子產品樣式
基本上所有的設計規範文檔包含但不限于上述内容，是以你感覺毫無頭緒，可以考慮從這幾方面着手。
④設計規範文檔的适用人群
和之前寫過的互動文檔需要人手一份一樣，設計規範文檔也是要傳達到團隊的每個人手中；并不是UI設計師編寫完成後，就隻由UI設計師來使用的。
這些人包括但不限于PM、互動設計師、UI、開發、營運等等。
⑤設計規範文檔的更新疊代
設計規範文檔是為了更好的幫助設計師和開發完成工作，而不是限制發揮；
對人來說：
設計師有時候根據新的業務需求設計的東西，和原有的設計規範文檔的内容并不合适；
開發在實際開發中，也會出現一些文檔中規定的無法達成的情況；
對産品來說：
随着版本一代一代的更新，設計規範中的内容也逐漸會不适合現有的設計風格和技術。
那這時要根據實際情況，合理的更新疊代設計規範文檔的内容，而不是一成不變。
Part 2 使用Mockplus的設計系統制作設計規範
這是Mockplus的設計系統連結，注冊個賬号，進去就可以使用了：
Mockplus的設計系統 https://ds.mockplus.cn/
這系統本身非常簡單，一目了然，沒有學習成本。
這裡截圖給大家看看，快速了解之後可以去官網體驗下自己動手寫個設計規範。
①注冊之後，進入設計系統
下圖是進入設計系統後的頁面，包含一個系統提供的示範DEMO，一個添加自己規範資源庫的功能按鈕。
②檢視示範DEMO内容
下圖是示範DEMO的設計規範樣式：
左側是導航欄，包含了設計規範的内容，也就是我們上文說的規範文檔的内容；
你可以按照自身的需求自定義每個大類下的小标簽，然後填入對應的内容；
右側上部是項目簡介，可以自由編輯，可以寫寫項目概況，使用方式，細則等等；
右側下部是顯示區，和左側到導航欄内容呼應，也是内容的編輯區；
③建立自己的設計規範資源庫
點選DEMO旁的“+”，就可以建立自家産品的規範資源庫；
空白庫裡面内容都是空的，你需要重頭開始編輯所有内容；
示例庫就是示範DEMO的内容，可以重新編輯該示例庫的内容；
建立完自己的設計規範資源庫，剩下的就是在設計過程中，不斷的往資源庫裡填入對應的内容就可以了。
當所有的内容都編輯完成後，點選最右側導出按鈕，有三個選項，按需求導出即可；
又或者點選分享按鈕，分享該設計規範的連結位址。
到此使用設計系統就可以完成一份設計規範文檔了。
而下載下傳完Sketch插件後，在使用Sketch設計時，直接就可以調用資源庫裡已經編輯好的設計規範，這對保持産品的品牌統一性非常有幫助。
其實系統本身操作沒什麼可說的，重要的是出現了這麼一種能很大提升效率的工具，因為最近又開始撰寫新的設計規範文檔，使用後覺得這個效率還是非常高的，是以分享給大家。
Part 3 Mockplus設計系統的比賽
這個活動我覺得還是挺有意思的，活動時間是2018年7月20日~2018年9月5日。
詳情可以去這個連結下看看：
幕客設計系統大賽 https://ds.mockplus.cn/summer/
這個我覺得大家可以嘗試參加一下，為什麼呢，你看下比賽規則就明白了：
從他們官方提供的10個知名APP裡選一個，用他們的設計系統整理出一套設計規範，就可以參加比賽了。
這比賽有意思的地方就在于：
1.它不是設計能力的比賽，而是整理能力、細緻能力的比賽。
很多設計比賽對新人不怎麼友好，一些設計能力薄弱的朋友參加根本沒什麼機會；
但這個比賽我覺得對新人來說也挺不錯的，對設計經驗本身要求不是太高。
隻要你夠細心，邏輯性夠強，這比賽還是很有吸引力的。
2.可以用這個設計系統練習設計規範的撰寫能力
設計系統本身羅列出了設計規範的提綱，你需要的就是把産品零散的東西整理出來。
就算不參加比賽，使用這個設計系統也可以用來練習撰寫設計規範的能力，可以有效的了解如何撰寫一份設計規範，以及一份規範有哪些内容。
對個人幫助還是挺大的。
以上就是關于設計規範的一些内容~