如何和工程師更好地合作，這是每一個(gè)設(shè)計(jì)師職業(yè)生涯中需要不斷去思考的一個(gè)課題。以下是我自己和大家總結(jié)的一些經(jīng)驗(yàn)教訓(xùn)，分為3個(gè)步驟，從設(shè)計(jì)師專業(yè)素養(yǎng)的提升到合作的溝通技巧都有，全是實(shí)戰(zhàn)總結(jié)出來的，建議閱讀。

歡迎關(guān)注點(diǎn)融設(shè)計(jì)中心DDC微信公眾號(hào)（微信ID：DR_DDC）

作為一枚摸爬滾打多年的設(shè)計(jì)師，每天接觸最多的除了Sketch就是各色各樣的攻城獅了。他們中有些可愛，有些呆萌，有些幽默，還有些胡攪蠻纏，雖然網(wǎng)絡(luò)上經(jīng)常會(huì)有設(shè)計(jì)師與攻城獅的兩大陣營(yíng)的爭(zhēng)論，但不得不承認(rèn)的是，對(duì)于一個(gè)好的產(chǎn)品來說，這兩者可以說是成敗至關(guān)重要的兩個(gè)環(huán)節(jié)，缺哪個(gè)都是不行的。

First Step：自身的專業(yè)素養(yǎng)決定了合作的基礎(chǔ)

1.1 每個(gè)設(shè)計(jì)都要有據(jù)可依

設(shè)計(jì)師經(jīng)常會(huì)遇到這樣一種情況，攻城獅在實(shí)現(xiàn)你的設(shè)計(jì)稿效果時(shí)，向你提出這樣的問題：這個(gè)輸入框放這里不太好，這個(gè)顏色看起來不好看，這邊的邏輯好像不對(duì)。這時(shí)候我相信作為設(shè)計(jì)師都會(huì)有種哭笑不得的感覺，覺得他們是在質(zhì)疑自己的專業(yè)水平。然而，如果設(shè)計(jì)師在做設(shè)計(jì)的時(shí)候，只是憑感覺，或者自認(rèn)為用戶會(huì)如何操作，這樣的設(shè)計(jì)經(jīng)常會(huì)經(jīng)不起推敲和質(zhì)疑。所以為了避免這種情況的發(fā)生，在做設(shè)計(jì)的時(shí)候一定要有據(jù)可依，在面對(duì)疑問的時(shí)候能夠去說服對(duì)方。

1.2 標(biāo)注大過天

標(biāo)注可以說是設(shè)計(jì)稿的說明書。每個(gè)設(shè)計(jì)師都會(huì)有自己習(xí)慣標(biāo)注的方式，不必贅述。但是在攻城獅與設(shè)計(jì)師的溝通之中，標(biāo)注又是至關(guān)重要的一個(gè)環(huán)節(jié)。如果一份標(biāo)注很凌亂，沒有統(tǒng)一的單位，又沒有標(biāo)出重點(diǎn)信息，那攻城獅在開發(fā)的時(shí)候就會(huì)丈二和尚摸不著頭腦，無從下手，最后實(shí)現(xiàn)的效果肯定也是相距甚遠(yuǎn)。

在標(biāo)注上，我的經(jīng)驗(yàn)心得就是，統(tǒng)一單位，統(tǒng)一格式，重點(diǎn)標(biāo)亮。統(tǒng)一單位指的是文檔的開始需要說明標(biāo)注所使用的單位以及分辨率。統(tǒng)一格式，拿我的標(biāo)注習(xí)慣打比方，就是每個(gè)界面3張圖，縱向橫向和文字，每個(gè)方向上一張圖，避免了縱橫交錯(cuò)的凌亂感。重點(diǎn)標(biāo)亮指的是一些熱區(qū)、點(diǎn)擊狀態(tài)和圖片大小、元素居中方式和其他特殊情況的標(biāo)注需要用高亮顏色標(biāo)出。

具體教程可參考：《UI設(shè)計(jì)師如何做一份讓工程師淚流滿面的標(biāo)注？》

1.3 設(shè)計(jì)規(guī)范和模塊化開發(fā)來幫忙

對(duì)于一個(gè)成熟的項(xiàng)目來說，一份設(shè)計(jì)規(guī)范會(huì)對(duì)設(shè)計(jì)和開發(fā)都有相當(dāng)?shù)膸椭?。設(shè)計(jì)規(guī)范主要包含了顏色、字號(hào)、常用控件、常用模塊的定義，對(duì)于設(shè)計(jì)師來說研習(xí)規(guī)范能夠幫助更好的設(shè)計(jì)出風(fēng)格統(tǒng)一的界面，而開發(fā)團(tuán)隊(duì)若能夠合作將其中的一些模塊化，對(duì)于產(chǎn)品的開發(fā)效率無疑是一種極大的提高。

再次強(qiáng)烈推薦網(wǎng)易內(nèi)部的設(shè)計(jì)規(guī)范：《超實(shí)用6步透視網(wǎng)易設(shè)計(jì)規(guī)范（附完整PDF下載）》

Second Step：攻城獅是設(shè)計(jì)師的好朋友

2.1 換位思考，讓夢(mèng)想照進(jìn)現(xiàn)實(shí)

無論是在生活還是工作中，換位思考都是團(tuán)隊(duì)協(xié)作的良藥利器。作為設(shè)計(jì)師，總會(huì)有一種理想設(shè)計(jì)的情懷，比如酷炫的動(dòng)效，完美的過場(chǎng)流程等等，然而現(xiàn)實(shí)往往會(huì)四處碰壁，開發(fā)小哥會(huì)甩出絕招：這個(gè)我們實(shí)現(xiàn)不了。所以對(duì)于設(shè)計(jì)師來說，可以去主動(dòng)的了解一些代碼實(shí)現(xiàn)的原理，在設(shè)計(jì)的時(shí)候就考慮到開發(fā)實(shí)現(xiàn)的可能性，相信開發(fā)小哥們會(huì)更愿意去努力實(shí)現(xiàn)你的設(shè)計(jì)。

準(zhǔn)確描述你的動(dòng)效也是一門功夫活：《超實(shí)用！如何準(zhǔn)確的向工程師傳達(dá)動(dòng)效設(shè)計(jì)？》

如果學(xué)會(huì)配合制作就更厲害了：《現(xiàn)身說法！設(shè)計(jì)師怎么和工程師配合制作UI動(dòng)效？》

2.2 溝通，溝通，溝通，重要的事情說三遍

交付標(biāo)注稿絕不是設(shè)計(jì)工作的結(jié)束符。設(shè)計(jì)師要及時(shí)主動(dòng)的跟進(jìn)進(jìn)度，和工程師溝通在設(shè)計(jì)稿中可能會(huì)比較難以理解的部分，這樣可以很大程度上去避免實(shí)現(xiàn)效果與預(yù)期不符，工程師因此返工抱怨的情況出現(xiàn)。當(dāng)然，在開發(fā)完成后的測(cè)試也是非常關(guān)鍵的一環(huán)，因?yàn)楣こ處熗鼘Ｗ⒋a結(jié)構(gòu)和性能方面的優(yōu)化，并不都像設(shè)計(jì)師那樣具有“像素之眼”，如果發(fā)現(xiàn)實(shí)現(xiàn)效果與設(shè)計(jì)稿有出入，也要和開發(fā)小哥及時(shí)提出和修改。雖然這個(gè)環(huán)節(jié)往往會(huì)讓人忽視，但確實(shí)是產(chǎn)品上線之前，作為設(shè)計(jì)師來說最后一次可以修正結(jié)果的時(shí)候，當(dāng)然在開發(fā)小哥如你所愿的實(shí)現(xiàn)最終效果的時(shí)候，也別吝嗇你的鼓勵(lì)哦。

同樣的，你也可以給工程師小哥看這篇：《過來人的經(jīng)驗(yàn)！前端工程師如何與設(shè)計(jì)師合作？》

Last but not Least：Trouble is a friend

3.1 設(shè)計(jì)師與攻城獅的恩怨情仇錄

在與工程師的合作中遇到問題是再平常不過的事情，上周我們的茶話會(huì)提到這個(gè)話題，大家都是滔滔不絕自己與開發(fā)小哥們不得不說的故事。幾位資深設(shè)計(jì)師的經(jīng)驗(yàn)總結(jié)起來，基本上就是這幾個(gè)方面：就事論事的態(tài)度，以毒攻毒的方法，再加上曉之以理動(dòng)之以情的情感攻勢(shì)等。就事論事的態(tài)度就是把討論的重心放在當(dāng)前出現(xiàn)的問題上，不要扯太遠(yuǎn)，也不要扯陳芝麻舊谷子，大家都齊心協(xié)力想辦法來解決問題。以毒攻毒的方法就是，可以讓對(duì)方說一下自己的想法，然后從中發(fā)現(xiàn)一些不合理的情況，再適時(shí)推出自己的方法，讓對(duì)方信服。曉之以理動(dòng)之以情就是字面上的意思，大家都是打工仔，為了產(chǎn)品考慮，或者各退一步海闊天空等等。用以上的方法，基本能解決90%的問題。

關(guān)于溝通技巧，這兒還有24個(gè)：《看完轉(zhuǎn)系列！24個(gè)幫設(shè)計(jì)師與工程師更好溝通的實(shí)用技巧》

3.2 幸福只是晚來了一點(diǎn)兒

所以還有10%的問題可以用備選方案，或者分批實(shí)現(xiàn)效果的迂回戰(zhàn)術(shù)。這一點(diǎn)需要設(shè)計(jì)師用自己的經(jīng)驗(yàn)去判斷實(shí)現(xiàn)的工作量以及可行性。總而言之，言而總之，要做一個(gè)百辯不倒，忽悠不了，人見人愛，花見花開的設(shè)計(jì)師！

以上。

希望諸位設(shè)計(jì)師們都能和工程師們互相理解，打成一片，合作愉快！

歡迎關(guān)注點(diǎn)融設(shè)計(jì)中心DDC微信公眾號(hào)（微信ID：DR_DDC）：

【從新人到大牛的交互設(shè)計(jì)完全修煉手冊(cè)】

菜鳥入門必讀好文！
《網(wǎng)易美女設(shè)計(jì)主管！交互設(shè)計(jì)菜鳥如何入門？》

阿里資深設(shè)計(jì)師手把手帶你認(rèn)識(shí)交互設(shè)計(jì)！
《交互設(shè)計(jì)那些事兒（一）》
《交互設(shè)計(jì)那些事兒（二）》

多位資深前輩經(jīng)驗(yàn)合集！交互設(shè)計(jì)師自學(xué)指南！
《交互設(shè)計(jì)師修煉指南！教你從零開始成為優(yōu)秀交互設(shè)計(jì)師》

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量160萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com