還在手工製作APP規範文件？這款設計神器你不容錯過

之前寫了一些關於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.可以用這個設計系統練習設計規範的撰寫能力

設計系統本身羅列出了設計規範的提綱，你需要的就是把產品零散的東西整理出來。

就算不參加比賽，使用這個設計系統也可以用來練習撰寫設計規範的能力，可以有效的瞭解如何撰寫一份設計規範，以及一份規範有哪些內容。

對個人幫助還是挺大的。

以上就是關於設計規範的一些內容~​​​​

本文經作者授權轉載。

原文地址：http://www.ui.cn/detail/377262.html

原作者：精分青年滷大溼，懂互動、愛設計、可程式設計的全棧設計師；目前就職於某軟體技術企業，任職UI設計師，互動設計師。在通訊、安防、智慧TV、企業管理、直播等產品領域都有涉獵。喜歡總結分享自己的工作經驗和感悟，喜歡的話可關注大溼，UI中國ID：精分青年滷大溼。