在App開發過程中，UI設計和前端開發人員需要緊密合作，以確保應用的頁面看起來如設計稿一樣精APP美。為了實現這一目標，UI設計師需要為開發人員提供 UI 切圖文件。這份文件是設計師可以將設計稿中的每一個元素切割出來的資源，從而使開發人員可以直接使用圖像，圖標和按鈕的確切尺寸和樣式（數字表示顏色、邊框等）。
1. 切圖的原理
UI 切圖指的是將設計稿的各個部分“切割”成適當文件大小的過程。這是因為一個復雜的界面是由多個圖像、圖標、按鈕等組成的，而這些元素解耦后才能適配各種分辨率、屏幕尺寸等特性。切圖可以幫助開發人員將這些分割的設計元素應用到實際的用戶界面上，以實現預期的設計效果。
2. 常用工具與文件格式
設計師使用諸如Adobe XD、Sketch或Figma 這類專業設計工具來完成切圖。這些工具同樣能夠生成可以直接應用到開發中的文件格式，例如PNG、JPEG和SVG，默認格式為PNG，因為它具有良好的質量和壓縮率。具體使用哪種格式取決于設計稿和目標平臺的需求。
3. 切圖要注意的細節
–
命名規范：切割出的元素需要標注規范統一的名稱。例如按鈕可命名為btn_add、btn_delete，這將有助于開發人員快速識別和定位資源；
– 尺寸與分辨率：許多設備具有不同的顯示分辨率，設計師需要為這些設備提供適當尺寸的切圖。設計稿縮放為N倍，就相當于切割出的資源適應 @Nx的分辨率；
– 多狀態切圖：對于具有多個狀態的元素，例如按鈕的按下狀態和禁用狀態，需要為每個狀態提供一組單獨的文件；
– 圖片優化：為了降低加載時間和流量消耗，設計師需要對切圖進行合適的壓縮和優化，但要確保在不過度損失圖像質量的情況下實現；
– 九宮格切圖：對于具有重復紋理或線框的圖像，可以采用九宮格切圖技術，它可以在節省資源的同時，保持邊框線與填充區域的分離，以便更好地適應各種大小的控件；
– 是用矢量圖格式： 對于可縮放的矢量元素，如圖標和形狀，優先使用SVG格式。這樣可以在不影響文件大小的同時提高圖像清晰度。這對高分辨率屏幕尤其重要。
4. 與開發人員的溝通
此外，設計師需要與開發人員密切溝通，以確保雙方對設計的理解一致。例如，設計師應該提供一個包含各個設計元素尺寸、顏色和字體等信息的UI規范手冊。這將有助于開發人員準確地實現設計師的預期效果。
總之，UI切圖在App開發過程中占據著非常重要的地位。一個好的切圖文件不僅可以保證開發出的應用具備優秀APP開發的視覺效果，還能提高開發效率，降低設計與開發的溝通成本。因此，UI設計師需要掌握切圖的相關技巧和注意事項，并與開發團隊保持緊密的合作。
