出圖?怎麼出?

  1. 給平面設計師的: 出圖?怎麼出?
    1. 給圖步驟
      1. 在切圖之前
      2. 確定元素
    2. 切圖
    3. 為什麼這麼做

給平面設計師的: 出圖?怎麼出?

「平面設計師不熟悉書面和螢幕 之間的關係」
有個前端工程師說了一句經典的話

給圖,就是設計師提供前端工程師的素材,包含所有畫面上會以圖片呈現的元素。

也許設計師會想「不就把 psd 的圖層,去邊再另存出來?」
是啦!操作上是這樣沒錯!不過這樣說,不就降低了這一個環節的專業性了嗎?
設計不過就是畫圖、寫程式不就是打字嘛

這一篇就來說說,這裡要注意什麼

給圖步驟

在切圖之前

跟工程師討論,要什麼元素。
最棒的做法就是將頁面設計稿印出來,並且請工程師圈(或框)出來。
在此不需要成為「圖」的,就是前端工程師自己用 html 或 CSS 刻出來。

注意: 圖片變色、特殊字型…等,都必須要考量在內,並且在這一步提醒工程師這些細節,若可以簡單的程式解決,工程師一定不會麻煩設計師處理(有時給太多反而麻煩呢)

確定元素

取得這一份圈選時,要看一下工程師是否圈出來的範圍是否是編輯檔的一個元素。
若有疑問,務必和工程師聊聊,這樣可以更明確的知道「為什麼這麼圈選」

複雜的書面,這一步較麻煩,需要來來回回溝通幾次。

切圖

切出來的圖片,務必在該畫面的尺寸圖上標示長寬 (距離!不是比例)。
工程師得到圖片,就是會限定長或寬,若要用比例,則可以使用 SASS 的四則運算功能用算的。

圖片大小,最好是手機的元素尺寸的 2 倍,為了 Mobile Device 的解析度變化。

為什麼這麼做

由於平面設計師對於切版不熟,所以任何螢幕元素的運作方式完全不會有任何概念。這個也是切版的根本(會了就會切版了),在此要求設計師「心神領會」工程師會用上的距離,跟本就是通靈行為。

如果真的是如此,那就像是建築師一樣厲害了,設計師找前端不過也是代工而已。

所以,工程師必須要回答「哪些是需要的元素圖片」讓設計師標示在尺寸圖上。