每個 UI 設計師在做設計稿都應該知道的幾件事

之前在協助新人進行軟體設計稿件的切版工作時，往往遇到前端工程師切版時，抱怨設計稿的內容不能切，或是切版後畫面上的圖案顯示會有缺失...

仔細討論跟研究後，發現新手設計師常犯的一些小錯誤，因此這邊整理出來，分享給大家，方便大家在設計稿件時，多多注意以下幾點：

• 設計 UI 的圖最好是先用向量軟體 AI 設計後，再到 PHOTOSHOP 調尺寸倍率，避免畫面上的細節失真，之後在進行切圖，如果反過來做，往往設計稿的邊緣都會比較不清晰，切版的效果也就不太好了
• 每個單位都用 8px 的倍率為基礎來變化與製作，這跟前端切版時的工具是有關係的，為了期望獲得最佳的畫面銳利清晰度，請務必注意這個細節
• 顏色都用 RGB 8bit 顏色來設計
• 描邊 / 透明 /圖層濾鏡與特效 都應該一律先轉變成 Render Layer之後，再將PSD稿件提交給前端工程師
• 陰影與線條儘量用切版製作工具的原生碼語法 產生比較好，因為你繪圖軟體所做的陰影效果，不一定在前端切版後獲得一樣的效果
• png/jpg轉出後都用 SRGB色調為主
• 提交的PSD在控制上設定 ；向量對應邊緣（打勾）
• 向量圖/智慧圖層注意不要隨意拉大圖片，最好是原比例 轉成智慧物件圖層（最好是別用），製作後一定要確保放大到 1：1也一樣清晰沒有毛邊（模糊）的情況
• 不要再檔案上鎖定任何圖層，因為前端工程師在切版時，沒必要時是不太會一個個去檢查，或是打開你的圖層檔案夾去找哪個圖層鎖住了
• 命名要有邏輯且容易理解，不然常常設計師會被前端工程師問東問西
• 設計版面都以 PX 單位為主 但是針對 IOS/ 安卓要需要分開切版 （因為 IOS PT單位與安卓不同）
• 設計 / 註解 / 說明 都應該要分圖層

整理了以上幾點供大家在製作時，對自己的設計稿可以先確認一下，不僅對切版的工作可以加速進行，也減少因為溝通不良造成誤會或是糾紛的機會...希望對大家有幫助囉～