【前端GUI】—— 前端設計稿切圖通用性標準

前言：公司在前端組和視覺組交接設計稿切圖的時候，總會由於視覺組同事們對前端的實現原理不清楚而出現各類問題，在用的時候還得再次返工，前端組同事們一致以爲應該出一份《設計稿切圖通用性標準文件》，這裏是我結合資料作出的一份總結。

---

   一、切圖資源尺寸必須爲雙數

 

   二、LOGO類圖片以方形切圖輸出

 

 

   三、可點擊部件要把相關狀態都切圖輸出，好比正常狀態、點擊狀態

 

   四、同一類型圖片保持一樣大小尺寸輸出切圖

全屏切圖類：

局部切圖類：

空白頁提示案例圖：

 

   五、有陰影背景的內容顯示區域保持居中輸出切圖

 

 

   六、設計中單獨有動效的圖層與背景分開輸出切圖

 

 

   七、設計中動效始終保持一致的圖層合併輸出切圖

同時縮小-放大：

 

   八、動效元素切圖輸出

序列切圖：要保證動效播放時的流暢天然

 

序列圖實現效果：

 

   九、無需輸出切圖的部分

文字、純色背景、線條和一些標準的幾何圖形是不須要提供切圖的

 

---

注：轉載請註明出處