切圖的目的是跟前端工程師進行團隊協同工作，切圖輸出時應盡可能的降低工作量，避免因切圖輸出而導緻的重複工作，下面是一些需要注意的事項。

移動端手機的屏幕尺寸大小都是偶數，比如iphone 7的屏幕分辨率是2532×1170像素。工程師在實際開發過程中以1266×585pt(pt是iOS開發單位，像素倍率為@2x時，1pt=2px)進行開發，切圖資源尺寸為偶數，可以被2整除。偶數是為了保證切圖資源在前端工程師開發時能清晰顯示。如果是奇數的話會導緻邊緣模糊，下圖所示為偶數和奇數對比。

偶數和奇數對比

根據設計尺寸輸出設計基準圖是以iOS系統屏幕分辨率750×1334像素情況下設計的，在切圖時要明确設計以@2x進行的，輸出@2x和@3x的切圖即可滿足iPhone手機主流機型，下圖為@2x和@3x圖标切圖。如果是改版Android系統分辨率720×1280像素情況下，在切圖的時候就需要明确設計是以xhdpi進行的，然後再輸出切圖。

@2x和@3x圖标切圖

有些圖片也需要切圖，如引導頁、啟動頁、默認圖等。但是圖片切圖一般文件大小都較大，不利于用戶在使用App過程中加載頁面。而且前端工程師會希望圖片不影響識别的情況下壓縮到最小。降低文件大小可使用Photoshop軟件自帶的功能壓縮文件，也可通過一些圖片壓縮網站進行壓縮。壓縮過的文件用肉眼基本上分辨不出壓縮的損失，圖7-15所示為使用TinyPng網站壓縮前後對比。

縮前後對比

切圖時添加一些空白面積，增加觸碰面積，保證用戶可以點擊到。設計基準圖中圖标大小可以和切圖大小不一緻，記得要保證切圖面積，可點擊區域不低于44像素。圖7-16所示為圖标實際大小和增加空白面積大小。但是伴随着手機分辨率的提升，可點擊區域也有所提升如66像素和88像素的可點擊區域也比較常見。

圖标實際大小和增加空白面積大小

切圖輸出類型主要分為應用型圖标切圖、功能型圖标切圖、圖片類切圖和可拉伸元素切圖四類，下面将進行詳細講解。

App的應用型圖标會被運用在很多不同的地方展示，如手機界面、AppStore以及手機的設置列表，所以App應用型圖标需要多個不同尺寸的切圖輸出。以及兩個平台中參數不同，在輸出時要把雙平台的尺寸全部輸出切圖。需要注意的是iOS系統應用型圖标切圖需要提供直角的圖标切圖，如圖7-17所示，因為iOS系統會自動生成圓角效果。

iOS系統應用型圖标切圖

對于iOS系統界面中的功能型圖标，由于Plus版本的切圖是設計基準圖的1.5倍，輸出切圖為@3x即可，圖7-18所示為站酷功能型圖标@2x和@3x的對比。默認情況下，@3x是@2x的1.5倍。到時前端工程師會将切好的@2x和@3x圖放到庫中，iOS系統會根據設備型号自動挑選合适的尺寸使用。

站酷功能型圖标@2x和@3x對比

圖片類切圖如啟動頁、引導頁、提示頁面等需要切圖的圖片。有些需要全屏切圖、有些則需要局部切圖，如圖7-19紅框标識所示。如果是全屏切圖最好以手機分辨率大尺寸進行切圖适配。如果頁面是背景圖和底色結合，隻需要切背景圖，而背景色隻需告訴前端工程師色值即可。如果背景圖是單個元素重複平鋪隻需切單個元素即可，告訴前端工程師頁面尺寸，将單個元素進行平鋪。

可拉伸元素是指按鈕在切圖過程中可對切圖進行瘦身壓縮的元素，原理是不可拉伸區域不變。可以提升App中的加載速度和節省手機空間，這種切圖方式在iOS中叫平鋪切圖，Android中叫做點九圖。它是為了提升圖片在客戶端内的加載速度，保證安裝包的輕量化，圖7-20所示為在iOS中的平鋪切圖和Android中點九圖的形式。

注意：平鋪切圖隻需要表明什麼區域可拉伸即可。而點九圖則需要再繪制1像素的黑線表示内容展示區域，1像素的黑點表示的是一條完整的可拉伸區域，以及切出的圖片後要人為的添加後綴

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!