咦？不是前端嗎？為什麼會選擇從溝通開始講起呢？
因為從菜鳥時期到現在，我發現不論是哪一個面向，
只要沒有溝通好，就會重工到掛掉，囧 （血淚史...遠目

而跟設計師的溝通是最接近實作切版的部分
所以就從這裡談起吧～
以下純粹是個人經驗，如有雷同純屬巧合；如不相同也很正常。XD

菜鳥時期

從開始學習網頁設計就是設計跟網頁同步學習，也因此開始工作時，所有的網頁都要自己設計、切版、加入效果、解決跨瀏覽器的問題，這可能是因為南部公司都會要求網頁設計師能設計＋切版，其他地方應該會略有不同。

所以一開始完全沒有跟設計師溝通這個麻煩（不過有跟案主溝通的問題，這部分後續會談到），因為根本沒有人可以溝通啊~XD

與平面設計師的第一次相遇

版面大小

那時候還沒有 RWD 出現，所以版面的大小基本上是固定寬為主，
最基本的尺寸是 1024 x 768 px，1024 px 寬是還沒有 RWD 時最常做到的網頁寬度

因此第一次在跟平面設計師溝通時，我是直接告訴設計師寬度為1024px ，高度不限
基本上平面設計師一定會使用 Photoshop 或 Illustrator ( 簡稱 AI )，而這兩個軟體都可以叫出尺標後選擇要呈現的長度單位，請設計師直接選擇 Pixels 來製作。

對平面設計師來說，他們熟悉的載體是紙張，因此要用他們能理解的方式去解釋網頁版面
而固定版面對設計師來說是比較好理解的

• 可以將1024px寬，不限高的網頁，看成是很長的一張紙
• 超出1024 px 寬度的部分，則是“背景”左右延伸或特殊設計的部分。

這樣的解釋可以降低設計師的理解困難，當然在解釋的時候找幾個網站來輔助說明會更好理解。
最基本的範例就是 Yahoo 奇摩的首頁。(真是萬年不敗款XD)

也因為那還是個做固定版為主的時代，因此我還曾經跟設計師說：『你設計的出來，我就切得出來』。XDDD

給檔

請設計師給檔案之前，要先溝通檔案給的方式：

• 由設計師切圖
• 或請設計師將圖層分類正確，給 PSD 或 AI 檔

一般通常會用第一種，但有時候有特殊需求的話，我也會請設計師給我原始檔，這樣可以少掉來來回回的手續。
不過如果不會操作 PS、AI 的，也只能請設計師切圖給你了。

基本設定

在設計師設計之前，要告知設計師針對網頁的內容做基本設定
並請設計師將基本設定做成清單，這樣會方便後續的製作：

• 網站的主要配色色碼（主色、header、footer、nav、content）、中英文字型
• 標題（h1~h6）的字型大小
• 內文的字型大小
• 統一主架構各區塊的 padding、margin

對於熟手設計師來說，其實這些是很基本的，但是跟新手設計師溝通時，這些很重要
因為你不會知道你遇到的是生的還熟的（咦？

好的設計師帶你上天堂，差的設計師讓你住修改房。
我就曾經收到設計稿打開後發現，每一頁的標題大小、內文都不太一樣，只好請設計師統一大小後再給我數值（暈

標示

• 每個區塊的寬度、高度，盡量以整數來標示（尾數5、0）
• 標示元素跟區塊的距離，例如：Logo距離上、左的距離，如果設計師是使用Mac，而且有使用 Sketch 來做設計，那麼搭配 Zeplin ，會很方便溝通。
  
• 什麼區塊需要什麼樣的變化或動畫。例如：選單滑過的效果、輪播的效果、特定區塊需要動畫製作等等。

以上算是一定要溝通的，如果有什麼忘記提到的，還請大家多多指教，另外還沒講到 RWD 的部分，RWD 的溝通就留到明天再說吧～各位看倌們，晚安啦～