編者按：有剛畢業(yè)的前端同學(xué)問，如何與公司里非專業(yè)的網(wǎng)頁設(shè)計(jì)師更有效地合作？在實(shí)現(xiàn)設(shè)計(jì)師的設(shè)計(jì)稿時，如果有自己的一些想法怎么辦？是直接什么也不說，直接照著設(shè)計(jì)稿做，還是提出一些建議交流？今天讓兩位前端前輩一一幫你解答！

大學(xué)畢業(yè)一年不到，期間算上實(shí)習(xí)也近一年半，沒有正式地與設(shè)計(jì)師合作過。近來公司來了一個平面的設(shè)計(jì)師，第一次嘗試網(wǎng)頁設(shè)計(jì)，雙方都沒有相互合作的經(jīng)驗(yàn)。網(wǎng)頁選擇了響應(yīng)式的設(shè)計(jì)，對設(shè)計(jì)師而言比較新穎，不能一開始很好理解。也因?yàn)閭€人的一些想法會與設(shè)計(jì)師不一致，想問幾個問題：

1. 如果非專業(yè)的網(wǎng)頁設(shè)計(jì)，如何可以盡快地讓雙方更有效的合作？
2. 作為一個前端工程師，在實(shí)現(xiàn)設(shè)計(jì)師的設(shè)計(jì)稿時，如果有自己的一些想法怎么辦？是直接什么也不說，直接照著設(shè)計(jì)稿做；還是提出一些建議交流？
3. 如果是設(shè)計(jì)師全權(quán)負(fù)責(zé)設(shè)計(jì)的話，那前端工程師在github、codrops，Dibbble上看到先進(jìn)優(yōu)秀的效果，是不是就沒有用武之地了？

豪情先就個人認(rèn)識方面的經(jīng)驗(yàn)，回答一下你的問題，僅供參考：

1. 如果非專業(yè)的網(wǎng)頁設(shè)計(jì)，如何可以盡快地讓雙方更有效的合作？

要有一個共同的目標(biāo)的前提下溝通，如果目標(biāo)不一致，或沒有目標(biāo)，那就沒辦法溝通。

比如我們有一個宣傳活動，這個活動的最終目的就是吸引新用戶注冊，那我們交流溝通時，完全以這個為目標(biāo)，與這個偏離太遠(yuǎn)的直接砍掉，否則加進(jìn)來。

另外要有第三者中立方存在的情況下溝通，比如技術(shù)負(fù)責(zé)人，項(xiàng)目經(jīng)理等。要不然責(zé)任劃分不明確，場面容易失控，意思就是討論是說的在多，最終得有個人拍板。

2. 作為一個前端工程師，在實(shí)現(xiàn)設(shè)計(jì)師的設(shè)計(jì)稿時，如果有自己的一些想法怎么辦？

是直接什么也不說，直接照著設(shè)計(jì)稿做；還是提出一些建議交流？

有想法可以跟設(shè)計(jì)來交流，但我個人的經(jīng)驗(yàn)，先做好前端本職的事情，一般的經(jīng)驗(yàn)就是工作不飽和，自己份內(nèi)的事情沒做好就想這想那的。

3. 如果是設(shè)計(jì)師全權(quán)負(fù)責(zé)設(shè)計(jì)的話，那前端工程師在github、codrops，Dibbble上看到先進(jìn)優(yōu)秀的效果，是不是就沒有用武之地了？

技術(shù)永遠(yuǎn)是在找尋發(fā)現(xiàn)價值，只是一個工具，不能本末倒置。

然后是分享一點(diǎn)我們積累的知識，僅供參考：

來自于群內(nèi)周五晚上的一次頭腦風(fēng)暴式的思維碰撞交流活動。

文章版權(quán)屬于群內(nèi)發(fā)過言的任何一位同學(xué)，我只是做了簡單的梳理或整理。

一般設(shè)計(jì)師給前端的只有psd，沒有其它多余的東西，連基礎(chǔ)的文檔都懶得給。前端期望中的設(shè)計(jì)能給予的除了psd之外，還有設(shè)計(jì)上游崗位傳遞下來的東西。比如：產(chǎn)品原型，需求文檔，交互文檔等等。

一般在真正的代碼開發(fā)進(jìn)行之前，前端期望中設(shè)計(jì)給的東西有：

1. 1份jpg文件: 里邊有各個psd的動作分解圖，包括頁面邏輯，或交互分解。設(shè)計(jì)師放成這樣的目的在于在做設(shè)計(jì)時方便的拷貝，但對開發(fā)人員來說，如果分級過于隱藏就會漏掉某個部分的開發(fā)。

2. 1份psd文件: 一份好的psd文件是分層清晰，設(shè)計(jì)規(guī)范的文件。

3. 1份需求文檔: 需求文檔是對當(dāng)前開發(fā)功能的基礎(chǔ)介紹或邏輯詳細(xì)描述。

4. 1份原型文檔: 原型設(shè)計(jì)文檔一般是由產(chǎn)品經(jīng)理對最初功能設(shè)想的一份粗稿，這份稿只是對布局或交互做簡單的設(shè)計(jì)，需要經(jīng)過設(shè)計(jì)進(jìn)行藝術(shù)的加工之后，才成為一個可以呈現(xiàn)給用戶的完整界面。

當(dāng)然這些所有的結(jié)果，需要經(jīng)過層層開會審核，征得各個項(xiàng)目組leader的同意之后通過郵件的方式發(fā)送給各個成員，最粗笨的辦法就是放在局域網(wǎng)的共享地址可以去拿psd文件。

恩，然后所有的中間需求變更、界面變更都要抄送相關(guān)人員，免得中間再次溝通，浪費(fèi)時間。

一般的psd或許是這樣的：

其實(shí)期望的是這樣的：

因?yàn)榍岸艘€原頁面的時候頻繁的去隱藏不同的圖層來觀察效果或切割圖片，設(shè)計(jì)師是組合不同的圖層到一塊，而前端恰恰是一個相反的過程。
所以一個好的圖層結(jié)構(gòu)會為下游崗位節(jié)省很多的時間。那這時候有個問題，做為前端，你為下游崗位提供了多少便利之處呢？

還有公司更詳細(xì)流程是這樣的：

1、需求提出，產(chǎn)品跟產(chǎn)品leader溝通需求
2、產(chǎn)品leader跟開發(fā)、測試、ui/ue要人，要排期
3、要來的人大家一起開發(fā)，挑戰(zhàn)產(chǎn)品經(jīng)理，跟批斗似的，產(chǎn)品拿著需求文檔講ppt
4、需求回歸
5、繼續(xù)批斗（4、5一直重復(fù)）
6、需求ok了，開始ui/ue設(shè)計(jì)
7、評審ui/ue
8、ui/ue回歸
9、開發(fā)
10、提測
11、回歸
12、上線
13、有問題回滾。

另外公司的設(shè)計(jì)是這樣的：通常PSD要把交互效果的圖層都做好，出JPG的時候，都會把默認(rèn)狀態(tài)，交互狀態(tài)，管理員狀態(tài)各自出一個，然后彈窗布局出一個，都做得很精細(xì)。

這樣導(dǎo)致的結(jié)果是想犯錯都沒有機(jī)會。

有的公司設(shè)計(jì)部有自己的規(guī)范，首先他們出的圖都是很合乎規(guī)范的，間距、色值、布局、字體不會很多，因?yàn)檎麄€產(chǎn)品多個頁面風(fēng)格要統(tǒng)一一致，所以越花哨是越給自己找麻煩，他們也不會有特別多種不同規(guī)格混揉在一起。

比如是這樣的：

還有的是跟產(chǎn)品開需求會或項(xiàng)目立會的時候，會先就具體需求的功能點(diǎn)先做可行性方案的討論，如果開發(fā)成本過高的話，通常都會說服需求方用一些替代方案。

又或者是一些高級的功能模塊，我們會把項(xiàng)目拆解，分成幾期，首先先出核心功能模塊，上線之后再做一些高級需求的模塊，實(shí)現(xiàn)產(chǎn)品的迭代開發(fā)。

關(guān)于標(biāo)注規(guī)范，推薦：Super Marker?小胡子哥的切圖神器。

另外一個觀點(diǎn)是從產(chǎn)品的高度來看，設(shè)計(jì)、前端、后端 應(yīng)該是一個整體，最終應(yīng)該結(jié)果導(dǎo)向，產(chǎn)出的產(chǎn)品不好，作為開發(fā)團(tuán)隊(duì)其實(shí)都有責(zé)任。

還有的情況是，每個項(xiàng)目都會有匯總目錄，原型是由需求直接提供的，PSD和JPG在設(shè)計(jì)的匯總目錄里，我們的制作稿又是一個匯總目錄，所有環(huán)節(jié)的童鞋都可以非常直觀方便的查看這些文件。

然后跟設(shè)計(jì)交流的時候的坑有以下幾種情況：

1. 有些界面出于時間或員工本身經(jīng)驗(yàn)素質(zhì)的問題就是不愿意出psd圖，然后口頭上通知前端，這樣來就可以那樣改就可以了，這就是一個坑。

按我們的經(jīng)驗(yàn)對這種情況做出的建議是：

所有的東西都必須出效果圖，并且所有團(tuán)隊(duì)成員達(dá)成一致，有可執(zhí)行性。所有的字體，間距，顏色，必須約定統(tǒng)一并且完全標(biāo)識清楚。

杜絕直接這么說那么干的做法。

要不然最后做出的產(chǎn)品，產(chǎn)品說的是一套，測試測的一套，開發(fā)的一套，老板看到的又是一套，返工的可能性很大。我感覺比起這個返工的可能呢，前面多化點(diǎn)把設(shè)計(jì)稿做好是無可厚非的，而且從整個項(xiàng)目開發(fā)周期來看，是節(jié)省開發(fā)周期的。

2. 有些頁面設(shè)計(jì)師沒有考慮到，比如：

有些頁面在沒有數(shù)據(jù)的時候設(shè)計(jì)師沒考慮到，或者經(jīng)驗(yàn)不豐富就沒做。

這時候必須要求設(shè)計(jì)師，給出首頁或列表頁、內(nèi)容詳細(xì)頁、用戶中心等等沒有數(shù)據(jù)時的效果圖，以示團(tuán)隊(duì)所有成員知曉，并達(dá)到一致。要不然等上線之后，測試數(shù)據(jù)刪除之后真實(shí)數(shù)據(jù)還沒有上來之前，

老板心情好要看一下的時候，頁面就整體失控。

還有一種情況就是前端自己整的數(shù)據(jù)沒有的提示，從交互形式，文案上都沒有規(guī)范，導(dǎo)致最后一步測試的時候在返回來重新修改，浪費(fèi)時間。

3. 數(shù)據(jù)過多的情況：

另外一種常見的問題是數(shù)據(jù)過多或者文字內(nèi)容過長撐開容器，這兩種問題再實(shí)際做的時候常常會被漏掉，然后等到測試的時候才發(fā)現(xiàn)問題提過來。

還有兩種情況會遇到：

A. 有些前端在看到設(shè)計(jì)稿的時候，難免看的不舒服，這時候就從非專業(yè)的角度開始提建議，但提的時候又不流行技巧，容易發(fā)生沖突。

這時候給出的建議是：

提意見是這樣的，除非你干過設(shè)計(jì)或者了解設(shè)計(jì)的創(chuàng)作過程，否則從設(shè)計(jì)的角度最好不要提不同的意見。

可以從交互或功能或體驗(yàn)上給建設(shè)性的意見，另外講的時候是需要技巧的，可以先正面肯定一下他的勞動成果或努力的結(jié)果，然后說，我這兒看到幾點(diǎn)問題，跟你交流一下，然后布啦布啦，而不是直接上去就說，我感覺這兒怎么怎么的，很主觀的，說這樣根本沒有一個評判的標(biāo)準(zhǔn)或依據(jù)。

最后一定要說，根據(jù)你的行業(yè)經(jīng)驗(yàn)或自我設(shè)計(jì)標(biāo)準(zhǔn)，你肯定不會允許這樣的現(xiàn)象出現(xiàn)吧，然后你看要不要在重新考慮一下。我就是想到了給你提一下。

強(qiáng)調(diào)這個非正式的提法，給自己或?qū)Ψ蕉剂粲杏嗟?，都有可以退讓的空間，皆大歡喜。

B. 要是效果圖是客戶提供的怎么破？在溝通是有什么經(jīng)驗(yàn)？

設(shè)計(jì)的質(zhì)量如果本身就有問題，比方說就沒考慮添加數(shù)據(jù)以后的情況，或者是其它頁面在流程上風(fēng)格上不統(tǒng)一怎么怎么的，客戶又不是很懂，初期非要你按照他的想法來。

這時候就需要站在一個更高的高度來有技巧的處理這個問題。

比如說，你這個頁面等上線后，在用戶看來2個頁面看到的按鈕不一樣，感覺很外行，從而導(dǎo)致的結(jié)果就是下次不在訪問，這樣用戶就會丟失。
你看有沒有必要重新考慮一下，最后設(shè)計(jì)和開發(fā)，去年克軍在廣州的webrebuild 分享了他那個“還原活的設(shè)計(jì)”的主題，我覺得挺受用的，跟大家分享一下。

還原活的設(shè)計(jì)地址：還原"活"的設(shè)計(jì) · kejun。

來自@Chuckie-Chang?的分享：

每個團(tuán)隊(duì)的合作方法不盡相同，我接觸過的比較好的合作方式，我就直白口水話方便易懂，僅供參考：如果你是前端，你可以給設(shè)計(jì)師提以下一些要求：

1.如果想要95%以上還原設(shè)計(jì)稿，你必須提供給設(shè)計(jì)師設(shè)計(jì)時的注意事項(xiàng)，當(dāng)然如果設(shè)計(jì)師有前端功底，他的設(shè)計(jì)會考慮到更多的協(xié)作性，通俗點(diǎn)說：比如設(shè)計(jì)的PSD稿件的圖層切圖的形狀不要太另類，不同的分辨率，元素布局上你能不能敲代碼實(shí)現(xiàn)，容不容易做出來，不要太自我主義不考慮前端，到時候做出來的東西又返回頭改死人，甚至前端出來后一塌糊涂，兩敗俱傷。

2.你看過的或者項(xiàng)目交互上想要的效果，讓設(shè)計(jì)師分析這種效果拆分后該設(shè)計(jì)些什么東西？設(shè)計(jì)量有多少？能不能用圖形的方式直觀的設(shè)計(jì)出來？等等

3.自己用鉛筆在紙上畫的草圖，設(shè)計(jì)中的部分重要細(xì)節(jié)和你自己的想法要親自提醒設(shè)計(jì)師。

4.項(xiàng)目碰頭的時間段，如何碰頭，使用遠(yuǎn)程工具？使用QQ？還是直接離開辦公椅面對面？還是茶水間？是1天碰頭一次？還是設(shè)計(jì)完某部分碰頭一次？發(fā)現(xiàn)問題就可以及時修改，避免事倍功半。

5.讓設(shè)計(jì)師準(zhǔn)備好詳細(xì)的設(shè)計(jì)說明文檔，文檔可以是直接套用html模板，可以是word，可以是圖片或者思維導(dǎo)圖，總之要讓前端設(shè)計(jì)師一目了然知道為什么這么設(shè)計(jì)，這樣設(shè)計(jì)讓前端怎么用，怎么配合。

6.如果設(shè)計(jì)師有前端功底，你還需要讓他提供一些他設(shè)計(jì)時考慮到的插件或者代碼（比如設(shè)計(jì)banner時他想要視差，3D，還是滑動等效果，要用到什么插件，用了什么框架等），這樣能提高前端的質(zhì)量和效率。

同時，你需要讓設(shè)計(jì)師給你提供：

1.完整的，規(guī)范的PSD分層文件，最好是要切圖的部分就是一個圖層或者 文件夾，使用photoshop的快速切圖插件，單獨(dú)導(dǎo)出圖片，快速準(zhǔn)確，不建議使用PS默認(rèn)的切圖工具。

2.詳細(xì)的，規(guī)范的設(shè)計(jì)說明文檔，標(biāo)注文檔。

3.對于有前端基礎(chǔ)的設(shè)計(jì)師，需要提供他設(shè)計(jì)時考慮到的前端效果插件或代碼，是否使用前端框架等。

4.適合你們的溝通協(xié)作方式。

5.如果是比較有經(jīng)驗(yàn)的設(shè)計(jì)師，能給你提供一個demo（可以是視頻，或者gif，甚至是用紙和筆畫出的交互效果），能大大提高前端的質(zhì)量和效率。

最后的最后，前端攻城師和設(shè)計(jì)師互相提供這些需求和資源的同時：

不要忘記了產(chǎn)品經(jīng)理或者老板或者你們部門的項(xiàng)目初衷，也要做好和上層的對接。
在過程中試錯，在試錯中體驗(yàn)，在體驗(yàn)中修改優(yōu)化，在修改優(yōu)化中培育協(xié)作能力和感情，在協(xié)作和感情中喝杯咖啡聊聊天泡泡妹子！

不要怕溝通起來，或者隨時跟著進(jìn)度溝通協(xié)作麻煩，其實(shí)互相交心，多溝通，大家都能開心的做好前端和設(shè)計(jì)，可以大幅度減少返修，減少加班，同時還有空一起去喝杯咖啡緩緩神！

你悶著頭做前端不去學(xué)習(xí)或者多了解一下他的設(shè)計(jì)和他的想法，或者他悶著頭做完設(shè)計(jì)從來不關(guān)心代碼是啥東西，做完就丟給你，只會兩敗俱傷，傷感情！

【優(yōu)設(shè)職場經(jīng)驗(yàn)合集】

總監(jiān)過來人的經(jīng)驗(yàn)分享！
《總監(jiān)必備技！聊聊如何做好設(shè)計(jì)師管理？》

如何管理兩種不同類型的設(shè)計(jì)師？
《總監(jiān)修煉之路！如何管理才氣型/實(shí)干型的設(shè)計(jì)師？》

人氣超旺的職場真相揭秘！
《這才是真相！為什么中國的甲方都不愿意為設(shè)計(jì)付出高額費(fèi)用？》

原文地址：zhihu
作者：豪情

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

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計(jì)師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量103萬的人氣微博@優(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