1. 程式人生 > >【前端GUI】—— 前端設計稿切圖通用性標準

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

前言:公司在前端組和視覺組交接設計稿切圖的時候,總會因為視覺組同事們對前端的實現原理不清楚而出現各種問題,在用的時候還得再次返工,前端組同事們一致覺得應該出一份《設計稿切圖通用性標準檔案》,這裡是我結合資料做出的一份總結。


   1、切圖資源尺寸必須為雙數

 

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

 

 

   3、可點選部件要把相關狀態都切圖輸出,比如正常狀態、點選狀態

 

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

全屏切圖類:

區域性切圖類:

空白頁提示案例圖:

 

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

 

 

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

 

 

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

同時縮小-放大

 

   8、動效元素切圖輸出

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

 

序列圖實現效果:

 

   9、無需輸出切圖的部分

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

 


注:轉載請註明出處