如何交付設計與素材給前端工程師？設計 x 前端溝通基礎篇
這篇適合常做網站的設計師或是常需要交付文案與素材給工程師的窗口
我是一名曾經由設計師轉為前端工程師，現職產品經理的工作者，自己本身用過 Adobe PhotoShop (PS), Adobe Illustrator (Ai), Sketch, Zeplin 到現在的 Figma 及 Adobe Xd 設計過，除此之外大概也配合過 30 位以上的設計師。
雖然現在幾乎不怎麼做設計，但分享我個人在執行前端時，覺得很棒的設計稿及素材接收格式。
目錄
- 設計稿
(1) 設計檔案
(2) 多狀態設計
(3) 螢幕大小及尺寸標註
(4) RWD (響應式網頁) 邏輯溝通 - 圖片素材
(1) 素材格式
(2) 素材大小
(3) 素材命名 - 文案
- 動態溝通
- 設計修改
設計稿
設計平台
無情推薦 Adobe Xd 或 Figma。相關標註可以用簡報或在設計稿旁空白區標註
我認為 Figma 跟 Xd 還是最讓我覺得很方便，尤其是在意字重，理論上 Figma 也是網頁，可以讓設計稿跟網頁呈現一樣的字重；而其他是因為我個人沒有在續購 PS, Ai 所以拿到檔案也無法開啟，更不用說一般前端工程師，此外 Sketch 也可透過 Adobe Xd 開啟，支援上大致上沒問題。
Photoshop 本來就是針對影像處理，而 Ai 針對輸出品處理，UX 上很不一樣；而 Figma 與 Xd 都可以免費開啟閱讀，方便直接複製文案及觀看尺寸，2022 年我還是認為這兩者是設計很好的設計平台。
多狀態設計
例如空白狀態、hover、下拉選單，都可以額外開一個畫板或放旁邊附上文字說明即可。那也可以特別區分哪些是全站通用 (global)，工程師看到會很開心。
螢幕大小及尺寸標註
(1) 畫板大小：根據客戶或設計師會觀看成品的裝置去開，以便到時候檢測方便。但要注意！設計稿須考量真實狀況，例如你使用 Mac 開網頁，你會有一堆工具列，所以實際網頁高度很窄；或是手機會有網址跟工具列，也需要注意，這樣才能確保你審稿時不會覺得哪裡怪怪的！
(2) 尺寸標註：如果已經用 Figma 或 Xd， 基本上尺寸不太需要特別去標註，該平台可以直接看得到顏色、大小、間距。
額外進階：如果設計稿有很多標準規則，並能將以下一開始額外整理成一份設計準則 (UI Guideline) 出來，會很有效提升工程師效率
- 顏色：有使用哪些顏色，而同色系不同深淺可以放一起呈現
- 間距：例如內容固定離邊界多少 px ，或是固定文字下方間距多少 px
- 物件大小：有哪幾種按鈕大小
- 字級大小：有哪幾種字級大小與字重，以及其出現的規則（切記，字級最小 12px）
- 同樣式元件：例如說卡片固定樣式（包含陰影、字級、間距、大小 … 等），都可以一併整理出來
RWD (響應式網頁) 邏輯溝通
任何根據不同裝置尺寸而有不一樣的規則需要額外溝通，常見的設計可以是：
- 狀況一 ：內容固定最大 1200px，小於 1200px 時為 95% 寬，左右間距為 2.5%，這時候其實只要說「寬度 95% 最大 1200px 內容置中」即可
/* 工程師會：*/
{ width: 95%; max-width: 1200px; margin: auto; }- 狀況二：承上，如果沒有 % 數的體感，且左右間距為固定寬，可以說「左右固定 20px，內容寬縮放」即可
/* 工程師會：*/
{ width: calc(100% - 40px); }- 狀況三：高度也可以，例如常見的設計是，首屏要滿版，但又有導覽列 (Navigation Bar) 60px 高，你可以直接說「每屏內容是 100% 高度減去 60px」也是完全沒問題的
/* 工程師會：*/
{ height: calc(100vh - 60px); }- 狀況四：排列的物件，例如三個為一排，「可以說間距 15 px ，剩下縮放」之類的
工程師會：width: calc((100% — 30px) / 3);
/* 工程師會：*/
{ width: calc((100% - 30px) / 3); }- 狀況五：是固定比例還是固定寬高要說明清楚，例如這是個影片區域，固定 16:9 並隨著畫面縮放或是固定高度為 200px，寬度隨著畫面縮放。
但其實 RWD 蠻多東西的，可能有空再仔細整理一篇，但無論如何，心法就是：
目前這畫面如果螢幕開始拉大縮小拉高拉矮，每個元件會變大變小嗎？位置在哪裡？
圖片素材
放 google drive 即可
素材格式
非常簡單，要讓網站跑得快，圖片要剛剛好，可以根據下列原則
- jpg: 沒有透明區域的檔案一律 jpg，因為同樣圖 jpg 比 png 小很多
- png: 有透明背景才出
- svg: 你用圖形工具畫得出來的「向量」元件，就可以出 svg，優點是可以無限縮放大小不失真，但檔案大小有時候越線條複雜可跟還比 png 來得大。
Q: 哪些東西要特別出圖，哪些不用？
A: 可以用樣式語言寫出來的東西如，顏色、漸層、長寬、圓角，陰影、邊框、三角形和傾斜，都是可以用程式去建構，但如果該元件只用在一兩個地方，直接出圖比較快。除此之外的複雜形狀，當然如果有包含特殊字體在內，就可能需要一起出成圖了（注意字體版權喔！）
例如上述這類型的按鈕，他有幾個特性：「尺寸隨文案不一」、「邊框漸層陰影圓角」、「出現在多個地方」、「很容易改文案的地方」，都可以考慮直接讓工程師用 CSS 去完成。這時你只需要說明按鈕規則即可，例如固定內間距 (pedding)、最大寬度 … 等。
素材大小
- 解析度：基本上現在前端技術可以做到一張圖片自動根據裝置大小做對應 (例如 Next.js)，但如果沒用到該相關技術，也可以出三種解析度 1x, 2x, 3x
- 排列整齊的圖示或 Icon：建議出圖時保留白邊，每張固定尺寸，這樣能確保工程師放進去，你的 Icon 自動看起來就很整齊。
素材命名
這個非常重要，好的命名可以提升工程師 3000% 效率，基本上就要「好預測！」、「好預測！」、「好預測！」；因為如果能做到，工程師能不一直回頭看資料夾找圖看檔名，單純用檔名搜尋就能猜到對應位置，會寫得飛快。
例如一般頁面，可以多添加「位置性描述」資訊當前綴字，盡量也可以讓圖片用「位置性」命名，因為往後更改素材可以直接用覆蓋的，不用在重新置換，故推薦 (V)
- (V) section_1_bg, section_1_title, section_2_bg, section_2_title
- (O) section_1_car, section_2_so_many_people, section_3_meeting_good_good
- (X) car, so_many_people, meeting_good_good
如果想要用資料夾區隔，就不需要額外加前綴字，例如：
- (O) home/bg, abouts/bg
- (X) home/home_bg, abouts/about_bg
而狀態變化可以有一致性的規則，例如
- icon_yt
- icon_yt_hover
最後，大小寫有差，盡量也不要在命名時有空白字元
文案
一般文案其實 Figma 或 Xd 可以複製，我覺得不用特別出，但如果有時候像是心理測驗類型，會有大量的 QA 跟結果，可以考慮用 Google Sheet，並且做整齊有規則的排列（如果剛好某結果沒有文案也可以隨便打個相同符號），因為工程師能用魔法之手一次將文案複製到位。
動態溝通
基礎動態可以三要件
- 運動時間 (0s, 0.3s …)
- 運動模式 (ease, ease-in, ease-out …. 等)
- 樣式 (例如：幾秒到幾秒先不透明度變成 100%，再來做幾秒的橫移)
也可用下列工具去複製想要的運動模式
但如果對動態很要求，盡量用影片或 Prototype 去展示動會運動軌跡，減少用描述的。如果是視差滾動類型不好做 Prototype（但可能現在有很多套件可以做），也建議出分鏡位置，會更能符合預期
設計修改
其實用簡報，好好標註哪一頁，需要調整什麼，檔案連結或文案連結即可。如果發現與預期不符合太大
- 通常是 RWD 問題（不同裝置表現不如預期），那就要跟工程師溝通，補更多畫面。
- 如果有些間距怪怪的，可能是跟字的行高有關，例如設計稿上行高為一倍，間距離下方 20px，那可能工程師忽略了行高（變成 1.2 倍），視覺上看起來比 20px 多一點點，就可以提醒工程師看看。
- 字重問題，網頁渲染字的方式跟應用程式不一樣，所以可能須根據實際狀況重新調整，但用 Figma 理論上就會保持一致。
以上是我個人比較常見遇到的，我可能有想到再補充。至於圖檔更新
- 維持同命名覆蓋，請工程師一次更新
- (較推薦) 或是開另外一個資料夾標注日期，內容保持同樣結構跟命名，讓工程師方便局部覆蓋
