? ? ? ? 在制作網站或者制作WebAPP前端開發和設計師關系比較緊密，通常情況下是由設計師完成了設計，然后把設計圖交給前端工程師，前端工程師來實現這個設計方案，所以設計師在把設計圖PSD文件交給前端工程師的時候就有一點必要的規范，才能讓前端工程師減少切圖的工作量，節省時間然后可以去做更多的事。? ? ??

? ? ? ? 我在做前端的時候發現了一些問題，這些最好成為一個給設計師和前端工程師交接的一個標準，我想了一下大概的一些對于設計師的要求

? ? ? ? 1.PSD文件內部文件夾要清楚，每一個獨立模塊作為一個文件夾。許多小的文件夾最后構成一個大的頁面，文件夾標題要寫下這個模塊的名字，這樣可以提醒前端，這里是個什么樣的。

? ? ? ? 2.PSD文件內部元素切好圖片交給前端工程師。寫代碼比做設計慢的多，往往設計師改動一下現實效果，動動鼠標的事，對于前端來說，就可能改變很多代碼，前端會PS切圖就可以，但一般情況下，除非很簡單的一個小圖片，不然圖片太多，前端不是設計師，切圖會很慢。

? ? ? ? ?3.切圖要保證清晰度的情況下，盡可能的圖片要小。這一點對于設計師和前端都重要，2014年中國的平均網速只有3.45MB/s，所以遇到一些圖片較多的頁面，圖片盡可能的壓縮，不然做出來的頁面，用戶用起來很痛苦，心急的人會沒等加載完所有的圖片就會關了這個頁面，下次估計再也不想來訪問這個頁面了。

? ? ? ? 4.設計師如果想要修改設計方案，最好立刻通知一下前端，讓前端有個心理上的準備。如果即將修改的部分還沒寫，前端就可以繞過去，先做其他的部分，節省了時間；如果已經寫了，提醒一下，讓前端可以對于自己手里的工作由各時間上的重新安排。? 通知到了之后，設計師盡快把新的東西在PSD文件上修改好，重新交給前端，而不是口頭上通知，口頭上的修改意見要形成一個可見的PSD文件。

? ? ? ? ?5.雙方在交接的時候，設計師應該對前端說明PSD文件的哪些地方需要動態效果，前端當然也要記下來。最好是寫下來，因為好記性不如爛筆頭嘛，然后前端要想清楚這個需要動態效果的地方，需不需要背景透明的PNG圖片，每個PNG圖片需要大概的尺寸，讓設計師切圖出來。

? ? ? ? 6.字體是一個比較重要的問題，主要是字體樣式的問題.設計師的電腦上肯定有很多的字體文件，在PSD文件里展示出來，視覺上的效果很不錯的，但是因為用戶或者前端工程師沒有這個字體，實際上用戶看起來，會覺得平淡無奇，影響設計師的效果。 ? ? ? ?一種方案是設計師把他在當前頁面用到的所有的字體的文件發給前端一份，前端首先在電腦上寫出來頁面，如果放在服務器的時候，要把這些字體文件放在服務器，這樣用戶也可以正常使用。 ? ? ? ?另外一種方案是特殊字體的地方做成一張圖片，背景透明與不透明，需要前端給出意見，圖片的話，不用太多字體文件，省了一些麻煩

? ? ? ? 7.設計師與前端多交流,現在有很多的特殊效果很炫，但是中國的很多用戶還是用的IE瀏覽器，而IE9及以下的瀏覽器對于HTML5和CSS3的特效支持性比較差，在IE瀏覽器中基本看不出效果，所以前端要考慮到瀏覽器的兼容性；還有一個頁面太多的特效會降低閱讀性，視覺效果會適得其反，那么雙方就應該做一些調整，也可能是設計是讓步，也可能是前端的讓步，不管誰讓步都是為了這個項目，設計師如果懂一點HTML的知識那就更好，更容易理解前端的想法

? ? ? ? 8.響應式設計應該先出來方案,雙方應該溝通一下，響應式的視覺效果，然后設計師把三種設計方案做出來，然后告訴前端有了哪些不同的改變，一般響應式的設計方案就包含三種設備：PC ?、平板、手機。只設計PC方案，然后要求前端做響應式，那么在手機上的視覺效果一定不是設計師想要看到的

以上的內容是站在前端的角度來看的，有很多都是我的想法，如果有什么問題，可以提出來，多交流雙方的意見才能相互理解