iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 2
5
Modern Web

前端路上那些重要與不重要的小事系列 第 2

Day02:小事之與純平面設計師的溝通 - 上篇

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

而跟設計師的溝通是最接近實作切版的部分
所以就從這裡談起吧~
以下純粹是個人經驗,如有雷同純屬巧合;如不相同也很正常。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

對於熟手設計師來說,其實這些是很基本的,但是跟新手設計師溝通時,這些很重要
因為你不會知道你遇到的是生的還熟的(咦? /images/emoticon/emoticon37.gif

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

標示

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

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


上一篇
Day01:前言
下一篇
Day03:小事之與純平面設計師溝通 - 中篇
系列文
前端路上那些重要與不重要的小事30

尚未有邦友留言

立即登入留言