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

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

ALT：開發與設計溝通

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

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

設計規範是什麼？

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

設計規範的做用是什麼？

設計規範可以爲團隊解決諸多問題，大大提升團隊協做效率，其做用主要體如今以下方面：

1. 解決團隊協做項目控件使用混亂

一個包含幾十頁甚至幾百頁的大型項目，通常都是團隊協做一塊兒完成。若沒有制定的設計規範，想保持不一樣頁面同一控件的統一性，幾乎是不可能的。可是，若是在多人進行協做某一項目前，UI設計師制定一份設計規範，其餘協做成員都遵循此規範，就能夠有效的把控視覺統一性了，提升工做效率也就變得輕鬆多了。

ALT：控件使用混亂

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

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

ALT：品牌迭代

3. 大大提升開發人員工做效率，減小沒必要要的代碼重複

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

ALT：開發效率

設計規範系統有哪些？

今天，要給你們推薦的是國內首個設計系統-

摹客設計系統

。也許不少人都尚未據說過，可是我相信作產品，作設計的朋友必定據說過國產原型設計神器- Mockplus。這二者有什麼關係嗎？固然，這是由一家公司開發的，在設計系統裏面制定的規範可直接應用到原型設計中。

有沒有感受很牛？好了，廢話很少說，下面帶領你們一塊兒來認識一下這個設計系統，讓你先睹爲快。

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

制定規範

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

ALT：設計規範之LOGO

ALT：設計規範之品牌色

分享規範

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

ALT：設計規範分享

分享樣例：ds.mockplus.cn/lib/5b28753…

導出規範

在設計系統中，能夠快速地將本身的設計庫導出爲規範圖和樣式代碼。導出的樣式代碼可直接投入開發。

ALT：設計規範導出

完整文檔下載：i.loli.net/2018/06/21/…

與Mockplus及Sketch對接

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

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

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

ALT：設計規範應用

資源上傳

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

ALT：設計資源上傳

怎麼樣？是否是以爲若是有了設計規範，與開發人員的溝通就會變得輕鬆不少呢？咱們只需將導出的設計規範圖發給開發人員，讓他們直接看文檔就行了。

結語

開發和設計溝通有多難？歸根結底，你只差了一個設計規範。相信你們使用摹客設計系統後，必定會大大提升設計師和開發的協做溝通效率。

趕忙來試試

吧！