之前寫了一些關于APP原型文檔的文章：
一款APP的交互文檔從撰寫到交付?http://www.ui.cn/detail/270000.html
這次想寫下關于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/summer/?hmsr=cherry
這系統本身非常簡單，一目了然，沒有學習成本。
這里截圖給大家看看，快速了解之后可以去官網體驗下自己動手寫個設計規范。
①注冊之后，進入設計系統
下圖是進入設計系統后的頁面，包含一個系統提供的演示DEMO，一個添加自己規范資源庫的功能按鈕。
②查看演示DEMO內容
下圖是演示DEMO的設計規范樣式：
左側是導航欄，包含了設計規范的內容，也就是我們上文說的規范文檔的內容；
你可以按照自身的需求自定義每個大類下的小標簽，然后填入對應的內容；
右側上部是項目簡介，可以自由編輯，可以寫寫項目概況，使用方式，細則等等；
右側下部是顯示區，和左側到導航欄內容呼應，也是內容的編輯區；
③創建自己的設計規范資源庫
點擊DEMO旁的“+”，就可以創建自家產品的規范資源庫；
空白庫里面內容都是空的，你需要重頭開始編輯所有內容；
示例庫就是演示DEMO的內容，可以重新編輯該示例庫的內容；
創建完自己的設計規范資源庫，剩下的就是在設計過程中，不斷的往資源庫里填入對應的內容就可以了。
當所有的內容都編輯完成后，點擊最右側導出按鈕，有三個選項，按需求導出即可；
又或者點擊分享按鈕，分享該設計規范的鏈接地址。
到此使用設計系統就可以完成一份設計規范文檔了。
而下載完Sketch插件后，在使用Sketch設計時，直接就可以調用資源庫里已經編輯好的設計規范，這對保持產品的品牌統一性非常有幫助。
其實系統本身操作沒什么可說的，重要的是出現了這么一種能很大提升效率的工具，因為最近又開始撰寫新的設計規范文檔，使用后覺得這個效率還是非常高的，所以分享給大家。
Part 3 Mockplus設計系統的比賽
這個活動我覺得還是挺有意思的，活動時間是2018年7月20日~2018年9月5日。
詳情可以去這個鏈接下看看：
幕客設計系統大賽?https://ds.mockplus.cn/summer/?hmsr=cherry
這個我覺得大家可以嘗試參加一下，為什么呢，你看下比賽規則就明白了：
從他們官方提供的10個知名APP里選一個，用他們的設計系統整理出一套設計規范，就可以參加比賽了。
這比賽有意思的地方就在于：
1.它不是設計能力的比賽，而是整理能力、細致能力的比賽。
很多設計比賽對新人不怎么友好，一些設計能力薄弱的朋友參加根本沒什么機會；
但這個比賽我覺得對新人來說也挺不錯的，對設計經驗本身要求不是太高。
只要你夠細心，邏輯性夠強，這比賽還是很有吸引力的。
2.可以用這個設計系統練習設計規范的撰寫能力
設計系統本身羅列出了設計規范的提綱，你需要的就是把產品零散的東西整理出來。
就算不參加比賽，使用這個設計系統也可以用來練習撰寫設計規范的能力，可以有效的了解如何撰寫一份設計規范，以及一份規范有哪些內容。
對個人幫助還是挺大的。
以上就是關于設計規范的一些內容~
本文經作者授權轉載。
原文地址：http://www.ui.cn/detail/377262.html
原作者：精分青年鹵大濕，懂交互、愛設計、可編程的全棧設計師；目前就職于某軟件技術企業，任職UI設計師，交互設計師。在通信、安防、智能TV、企業管理、直播等產品領域都有涉獵。喜歡總結分享自己的工作經驗和感悟，喜歡的話可關注大濕，UI中國ID：精分青年鹵大濕。
