開發和設計溝通有多難？ - 你只差一個設計規範

在網路上或是我們的日常工作中，經常會看到設計師和開發人員兩大陣營的爭論。設計師可能經常會遇到這樣一些情況，當開發人員對著設計稿想實現一些效果時，會提出一大堆的問題。如：這個按鈕的顏色是什麼呢？這個導航欄一級菜單的字體大小是多少呢？這兩頁的LOGO一樣，大小尺寸有什麼區別嗎？等等。雖然兩者時常會爭論不休，但是，一款好的產品，絕對離不開設計師和開發兩者的密切溝通配合。

溝通？看起來簡單，但在實際工作中並非易事。設計師與開發人員的溝通必須做到兩點。一是讓開發人員清晰的明白產品交互設計需求（可直接查看需求文檔、原型圖）；二是讓開發人員能夠嚴格執行界面設計元素（色彩、尺寸、字體、LOGO等），也就是我們常說的設計規範。

現在市場上能夠解決需求文檔（word、excel、MindManager、visio、紙等）和原型圖（Axure、國產Mockplus、justinmind等）的工具很多，在之前的文章中（APP原型設計利器！【附】人人都是產品經理APP原型剖析）也有給大家推薦，在此不再贅述。然而，能夠讓我們自定義設計規範的工具屈指可數。

設計規範是什麼？

小編的理解：能夠對界面UI中的設計元素（如：Logo、配色、字體、排版等）資源進行管理和歸納的規範性文檔。

設計規範的作用是什麼？

設計規範能夠為團隊解決諸多問題，大大提高團隊協作效率，其作用主要體現在如下方面：

1. 解決團隊協作項目控制項使用混亂

一個包含幾十頁甚至幾百頁的大型項目，一般都是團隊協作一起完成。若沒有制定的設計規範，想保持不同頁面同一控制項的統一性，幾乎是不可能的。但是，如果在多人進行協作某一項目前，UI設計師制定一份設計規範，其他協作成員都遵循此規範，就可以有效的把控視覺統一性了，提高工作效率也就變得輕鬆多了。

2. 保持產品迭代過程中品牌一致性

在產品的後期維護過程中，少不了迭代。若沒有制定的設計規範，在經過多次迭代後，我們很可能忘記了設計初衷。版本3中的LOGO樣式可能和版本1相差越來越遠。若有了設計規範，在後期迭代過程中就很容易保持初衷，良好的維護品牌形象。

3. 大大提高開發人員工作效率，減少不必要的代碼重複

有了設計規範，開發人員可快速調用一套代碼，大大提高工作效率。

設計規範系統有哪些？

今天，要給大家推薦的是國內首個設計系統-摹客設計系統。也許很多人都還沒有聽說過，但是我相信做產品，做設計的朋友一定聽說過國產原型設計神器-Mockplus。這兩者有什麼關係嗎？當然，這是由一家公司開發的，在設計系統裡面制定的規範可直接應用到原型設計中。

有沒有感覺很牛？好了，廢話不多說，下面帶領大家一起來認識一下這個設計系統，讓你先睹為快。

目前摹客設計系統可以對界面UI中的Logo、標準色、字體、段落樣式、圖標、圖片、組件、度量、陰影等資源進行管理和歸納。

制定規範

進入設計系統後，新建空白庫，可根據自己團隊需求快速對Logo、標準色、字體、圖標、圖片、組件等設計規範。

分享規範

當你完成設計規範後，可一鍵分享給其它小夥伴。

分享樣例：https://ds.mockplus.cn/lib/5b287538e24d4d34a9ffa613/preview

導出規範

在設計系統中，可以快速地將自己的設計庫導出為規範圖和樣式代碼。導出的樣式代碼可直接投入開發。

完整文檔下載：https://i.loli.net/2018/06/21/5b2b5317f1271.png

與Mockplus及Sketch對接

設計規範制定好後，最終的目的是要快速應用規範。打開Mockplus或Sketch中的設計系統插件，可獲取設計系統中設計資源。

通過拖拽的方式將Logo、標準字、圖標、圖片和組件添加到Sketch或Mockplus中。

可通過點擊的方式應用標準字、標準色資源。

資源上傳

從Mockplus和Sketch中製作好設計資源後，可快速上傳到設計系統。

怎麼樣？是不是覺得如果有了設計規範，與開發人員的溝通就會變得輕鬆很多呢？我們只需將導出的設計規範圖發給開發人員，讓他們直接看文檔就好了。

結語

開發和設計溝通有多難？歸根結底，你只差了一個設計規範。相信大家使用摹客設計系統後，一定會大大提高設計師和開發的協作溝通效率。趕緊來試試吧！

相關閱讀：

最佳設計規範20例

獨家設計系統發布——摹客，定製你的設計規範！

關於設計規範，你不可不知的三件事

[設計]GUI設計規範的規範

5分鐘玩轉摹客設計系統

在Mockplus和Sketch中對接設計系統

分享和導出

資源庫和資源分類