如何讓公司的平面設計師交出可以用的 Web 圖?

在演講的 QA 時間,有幾位 F2E 跑來問我這個問題,看來這是許多人心中的痛啊…甚至連圖都不讓設計師切了、直接自己來,卻還是狀況連連…如何讓公司的平面設計師交出可以用的 web 圖呢?

問了這幾位 F2E 他們用什麼軟體切圖,答案是 Illustrator ,聽到的當下就覺得不妙。我非常不支持拿 Illustrator 做任何給螢幕用的檔案,切圖不便、對 PX 的支援度也很差,Illustrator 是印刷用軟體。當公司只給你平面設計師、沒有 UI 的時候,所有 Mockup 都出自平面設計手中,F2E 要如何自力救濟?

網頁版面結構

通常平面設計會交出不能實做的檔案、絕大部份都是因為「他不懂」。但要等到他自己學會 Html、Css 的時候,八成也準備換工作了。等平面設計學會怎麼做網頁,不如自己先花個半小時教他網頁的版面構成方式,通常平面搞懂原理後出怪圖的機會就會降低。

找幾個之前做過的案子、實際用列表機印出來成紙本,或是網路上找幾個比較有規律性的網站都可以當教學範本,準備幾支不同顏色的筆、就可以抓平面設計進來聽課了。

舉個例子:rainstep.co (網頁我做的)
非常常見的版面構成,NavBar、大圖 Banner、內文、聯絡人、Footer。

第一版拿給平面設計師當範例的網站越簡單越好,太難的他們聽不懂,不要開口就是Div、Class、Tag、Header 之類。他們會把注意力放在「搞懂術語」上,F2E 真正想傳達「我會這樣切圖」、「我會這樣構成版面」就不太容易被聽進去。請把專業用語放一邊,設想「今天我要對我媽說明我的工作是怎麼完成的」,你就不會用太多只有行內人才懂的用字,盡量淺顯口語化。

(千萬不要講英文,會被設計師翻白眼。你的任務是教會他們看懂網頁構成、不是讓他們把你當成會點技術了不起的技術。)

拿出剛剛要你準備多種顏色的筆,開始畫框框。

這 4 點是一定要分不同顏色講清楚的部份,尤其是「Div」。

  1. Div
  2. 文字、標題、內文
  3. 圖片、背景底圖、Banner
  4. 對齊、float


上圖可以看到我約略拉的框圖會長什麼樣,基本平面設計師看到這樣子的圖、你再仔細說明一遍大概都會懂。有鑑於我被老公的詞不達意整過太多次,舉幾個「這樣說應該都聽得懂」的說話方式:

NavBar:「這塊黑底我會拉成像這的一個框框,黑底置頂,左右兩邊也會自動延伸到底,可以在這個黑底框裡放圖片和文字。」

Banner:「如果你要把一張照片大圖當成底圖、底圖上要壓一張 Logo 圖和一行標語,那要跟我說怎麼對齊,比如置中。」

內文:「通常圖片和文字對齊方式是跟著方框跑,可以在方框外或內加上留白間距,在方框裡的圖文可以設定靠左、靠中、或靠右對齊,也就只能設定這三種對齊方式。」

(Padding、Margin 這兩種初學者容易混淆、不懂網頁技術的平面設計師有些人也不會想知道這 2 個屬性有什麼差別,犯不著花大把力氣說明,跟他們說方框裡外都可以設定留白就好。)
(如果有遇到真心想學的設計師,這次教學結束後再找時間慢慢教,不要操之過急,平面設計師沒有技術的思維方式,要留點時間培養轉換心情。)

Grid

實在沒時間或不方便教的話、網路上有很多跟Grid有關的教學,搜集幾個「中文」教學請他們閱讀並照做。平面設計師一定知道怎麼拉參考線,不管是 AI 或是 PS,強烈要求他照 Grid 公式設計網頁。

參考:Grid 的運用:PS外掛

如果你家平面設計師教了還是聽不懂、或根本不想學,那一定要事先聲明他們出的圖如果沒有照 Grid 去做、就退件,起碼圖文影音是對齊的,不會東突一塊西凹一塊…

Akane Lee

Akane Lee

如果設計師能和工程師順利合作,那麼老公也就能準時下班了吧!因此努力分享 UI 和 UX 方面的知識、技術、各種踩過的坑與心得。

Comments

wave
comments powered by Disqus

Press ESC to close