摘要：前端期望中的設(shè)計(jì)能給予的除了之外，還有設(shè)計(jì)上游崗位傳遞下來(lái)的東西。份文件一份好的文件是分層清晰，設(shè)計(jì)規(guī)范的文件。有些頁(yè)面設(shè)計(jì)師沒(méi)有考慮到。地址如下原文鏈接我們前端是怎么跟設(shè)計(jì)師溝通的豪情博客園

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

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

1份jpg文件
里邊有各個(gè)psd的動(dòng)作分解圖，包括頁(yè)面邏輯，或交互分解。設(shè)計(jì)師方程這樣的目的在于在做設(shè)計(jì)時(shí)方便的拷貝，但對(duì)開(kāi)發(fā)人員來(lái)說(shuō)，如果分級(jí)過(guò)于隱藏就會(huì)漏掉某個(gè)部分的開(kāi)發(fā)。

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

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

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

當(dāng)然這些所有的結(jié)果， 需要經(jīng)過(guò)層層開(kāi)會(huì)審核， 征得各個(gè)項(xiàng)目 組leader的同意之后通過(guò)郵件的方式發(fā)送給各個(gè)成員， 最粗笨的辦法就是放在局域網(wǎng)的共享地址可以去拿psd文件。然后，所有的中間需求變更、 界面變更都要抄送相關(guān)人員， 免得中間再次溝通， 浪費(fèi)時(shí)間。

一般的psd或許是這樣的：

前端人員期待的確實(shí)這樣的：

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

有的公司是這樣的：

需求提出，產(chǎn)品跟產(chǎn)品leader溝通需求

產(chǎn)品leader跟開(kāi)發(fā)、測(cè)試、ui/ue要人，要排期

要來(lái)的人大家一起開(kāi)發(fā)，挑戰(zhàn)PM，跟批斗似的，PM拿著需求文檔講PPT

需求回歸

繼續(xù)批斗（4、5一直重復(fù)）

需求ok了，開(kāi)始ui/ue設(shè)計(jì)

評(píng)審ui/ue

ui/ue回歸

開(kāi)發(fā)

提測(cè)

回歸

上線

有問(wèn)題回滾

而有的公司的設(shè)計(jì)卻是這樣：通常PSD要把交互效果的圖層都做好，出jpg的時(shí)候都會(huì)把默認(rèn)狀態(tài)，交互狀態(tài)，管理員狀態(tài)各處一個(gè)，然后彈窗布局出一個(gè)，都做得很精細(xì)。這樣導(dǎo)致的結(jié)果是想犯錯(cuò)都沒(méi)有機(jī)會(huì)。

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

還有的是跟產(chǎn)品開(kāi)需求會(huì)或項(xiàng)目立會(huì)的時(shí)候，會(huì)先就具體需求的功能點(diǎn)先做可行性方案的討論，如果開(kāi)發(fā)成本過(guò)高的話，通常都會(huì)說(shuō)服需求方用一些替代方案。又或者是一些高級(jí)的功能模塊，我們會(huì)把項(xiàng)目拆解，分成幾期，首先先出核心功能模塊，上線之后再做一些高級(jí)需求的模塊，實(shí)現(xiàn)產(chǎn)品的迭代開(kāi)發(fā)。

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

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

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

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

所有的東西都必須出效果圖， 并且所有團(tuán)隊(duì)成員達(dá)成一致， 有可執(zhí)行性。

所有的字體， 間距， 顏色， 必須約定統(tǒng)一并且完全標(biāo)識(shí)清楚。

杜絕直接這么說(shuō)那么干的做法。要不然最后做出的產(chǎn)品，產(chǎn)品說(shuō)的是一套， 測(cè)試測(cè)的一套， 開(kāi)發(fā)的一套， 老板看到的又是一套，返工的可能性很大。

比起這個(gè)返工的可能，前面多化點(diǎn)把設(shè)計(jì)稿做好是無(wú)可厚非的，而且從整個(gè)項(xiàng)目 開(kāi)發(fā)周期來(lái)看， 是節(jié)省開(kāi)發(fā)周期的。

有些頁(yè)面設(shè)計(jì)師沒(méi)有考慮到。
有些頁(yè)面在沒(méi)有數(shù)據(jù)的時(shí)候設(shè)計(jì)師沒(méi)考慮到，或者經(jīng)驗(yàn)不豐富就沒(méi)做。這時(shí)候必須要求設(shè)計(jì)師， 給出首頁(yè)或列表頁(yè)、 內(nèi)容詳細(xì)頁(yè)、 用戶中心等等沒(méi)有數(shù)據(jù)時(shí)的效果圖，以示團(tuán)隊(duì)所有成員知曉， 并達(dá)到一致。 要不然等上線之后， 測(cè)試數(shù)據(jù)刪除之后真實(shí)數(shù)據(jù)還沒(méi)有上來(lái)之前，老板心情好要看一下的時(shí)候， 頁(yè)面就整體失控。還有一種情況就是前端自己整的數(shù)據(jù)沒(méi)有的提示，從交互形式， 文案上都沒(méi)有規(guī)范， 導(dǎo)致最后一步測(cè)試的時(shí)候在返回來(lái)重新修改， 浪費(fèi)時(shí)間。

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

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

建議：除非你干過(guò)設(shè)計(jì)或者了解設(shè)計(jì)的創(chuàng)作過(guò)程， 否則從設(shè)計(jì)的角度最好不要提不同的意見(jiàn)。
可以從交互或功能或體驗(yàn)上給建設(shè)性的意見(jiàn)，另外講的時(shí)候是需要技巧的， 可以先正面肯定一下他的勞動(dòng)成果或努力的結(jié)果，然后說(shuō)， 我這兒看到幾點(diǎn)問(wèn)題， 跟你交流一下， 然后布啦布啦，而不是直接上去就說(shuō)， 我感覺(jué)這兒怎么怎么的， 很主觀的， 說(shuō)這樣根本沒(méi)有一個(gè)評(píng)判的標(biāo)準(zhǔn)或依據(jù)。最后一定要說(shuō)， 根據(jù)你的行業(yè)經(jīng)驗(yàn)或自我設(shè)計(jì)標(biāo)準(zhǔn)， 你肯定不會(huì)允許這樣的現(xiàn)象出現(xiàn)吧， 然后你看要不要在重新考慮一下。 我就是想到了給你提一下。強(qiáng)調(diào)這個(gè)非正式的提法， 給自 己或?qū)Ψ蕉剂粲杏嗟兀?都有可以退讓的空間， 皆大歡喜。

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

建議：設(shè)計(jì)的質(zhì)量如果本身就有問(wèn)題， 比方說(shuō)就沒(méi)考慮添加數(shù)據(jù)以后的情況，或者是其它頁(yè)面在流程上風(fēng)格上不統(tǒng)一怎么怎么的，客戶又不是很懂， 初期非要你按照他的想法來(lái)。這時(shí)候就需要站在一個(gè)更高的高度來(lái)有技巧的處理這個(gè)問(wèn)題。比如說(shuō)， 你這個(gè)頁(yè)面等上線后， 在用戶看來(lái)2個(gè)頁(yè)面看到的按鈕不一樣，感覺(jué)很外行， 從而導(dǎo)致的結(jié)果就是下次不在訪問(wèn)， 這樣用戶就會(huì)丟失。你看有沒(méi)有必要重新考慮一下。

2013年，克軍在廣州的 webrebuild 分享了他那個(gè) 還原活的設(shè)計(jì) 的主題，非常受用。地址如下：http://kejun.github.io/share2013_11/

  
原文鏈接：我們前端是怎么跟設(shè)計(jì)師溝通的 - 豪情 - 博客園