寫一寫UI的基礎和用軟實力增強與工程師團隊的協同工作能力，通過規范的切圖不僅可以提升整個團隊的工作效率，而且大大縮短了設計獅與程序猿之間的溝通成本，好的切圖更是為設計圖的精確實現和完美落地做堅實保障。
切圖是什么？互聯網產品是由一套富有邏輯的頁面通過鏈接構成從而實現某種特殊功能服務于不同需求與受眾。而頁面中最基本的元素就是色塊、文字、圖片，通過色塊拉開頁面不同信息之間的層次，產生布局美；通過文字展現內容加以對比突出重點，呈現信息流；通過圖片增加頁面豐富度和可看性，展現多樣性。而切圖一方面是處理圖片，更重要的一方面是處理復雜樣式，我們經常把復雜樣式以切圖的形式出現以降低開發難度和開發成本。
切圖的原則
?切圖資源尺寸必須為雙數
因為1px是智能手機能夠識別的最小單位，換句話說就是1像素不能在智能手機被分為兩份。所以如果是單數切圖的話手機系統就會自動拉伸切圖從而導致切圖元素邊緣模糊，進而造成開發出來的APP界面效果與原設計效果差距甚遠。
切圖倍率考慮到主流適配機型
在切圖資源輸出中圖標切圖輸出是至關重要的部分。因為在開發中由于各機型的屏幕分辨率不同，需要針對一些大屏機型進行適配。現在主流要輸出@2x和@3x的切圖，針對近幾年的大屏手機，適配倍率應該在3倍比較合適。
控制切圖大小
在用戶網絡速度和網絡環境未知的情況下，要考慮到用戶打開產品時加載速度問題和APP安裝包大小等問題，所以需要在保證質量的前提下盡可能的減少切圖大小。
切圖的類型
啟動圖標切圖
APP的啟動圖標往往象征了整個產品的形象，起到一定的標識作用。應用場景一般在手機桌面、APP store、手機的設置列表，所以app桌面圖標需要很多個不同尺寸的切圖輸出。切圖只需要提供直角的圖標切圖即可，手機系統會自動生成圓角效果。
icon切圖
在iOS和Android的@2x切圖中，icon可使用公用的44*44px切圖，可實現一套切圖適配兩個平臺。同樣適應于@3x的尺寸為66*66px。
圖片類切圖輸出
針對廣告圖、啟動頁、新手指引頁等同類型的圖片切圖要保持同樣大小尺寸做以規范。
動態元素切圖
動效元素切圖一般是指在app中加載動效所需要的切圖元素，運用的是序列幀的方法輸出動畫，不過此種方法可能運用較少，現在大多都用GIF圖或者lottie動畫。(關于lottie動畫我會在下期文章中著重說明)
可拉伸元素切圖
可拉伸元素一般指的是輸入框、聊天對話框等可以擴充的切圖。在ios中這種切圖方式叫做平鋪切圖，在安卓中這種切圖方式叫做點九切圖法。
通常在項目中
IOS:以750*1334為基稿設計，按實際項目開發為標準，需切出@2x和@3兩套圖，把在公共頁面中的導航欄里面有一個按鈕（40x40px）的選中狀態切圖，直接輸出的切圖為@2x圖，@2x的1.5倍圖為@3x。
Android：以720*1280為基稿設計，由于尺寸不同且多樣，需要切多套圖適配不同機器，分別為mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi，直接輸出的切圖為xhdpi;它們分別對應的倍數關系為1、1.5、2、3、4。
切圖命名規范
1、產品模塊_類別_功能_狀態.png
例：發現_圖標_搜索_點擊狀態
2、場景_模塊_狀態.png
例：登錄_按鈕_默認狀態
3、產品模塊_場景_二級場景_狀態.png
例：按鈕_個人_設置_默認狀態
【場景和二級場景】：一般指app的一級頁面與二級頁面。
例如上：個人頁-場景，個人頁里的設置頁-二級場景
【模塊】：一般指頁面中的部分區塊，也有指背景圖。如背景、按鈕、icon都是模塊。
【功能】：一般指的是，頁面或者模塊中，需要操作或點擊的某個點，如上圖，發現頁中的搜索icon。
【狀態】：一般指當前切圖的狀態區分，像按鈕的話，有默認狀態、點擊時狀態、按下狀態、不可點擊狀態等，網頁上按鈕還有懸停狀態。
注意：所有命名只能為小寫英文字母，不要為了好看或者像平時打英語一樣，首字母是大寫之類的，也不可以為中文，不然對于開發來說，是沒有意義的，因為他們還是得自己再改一遍。
注意：ios切圖需要在命名后加上@2x、@3x后綴名，安卓的切圖不能加(加了好像會報錯)，安卓一般將不同倍率的圖放在不同文件夾。
現如今UI切圖工作也變得越來越方便，如國產的藍湖協作插件、PxCook等眾多優秀工具，具體工具和使用方法不在此詳述，可進官網了解：
pxcook：https://www.fancynode.com.cn/pxcook
名詞基本規范一覽
名詞命名：
bg（backgrond）：背景
nav（navbar）：導航欄
tab（tabbar）：標簽欄
btn（button）：按鈕
img（image）：圖片
del（delete）：刪除
msg（message）：信息
s(Selection)：選中
n(Unchecked)：未選中
icon：圖標
content：內容
left/center/right：左/中/右
logo：標識
login：登錄
register：注冊
refresh：刷新
banner：廣告
link：鏈接
user：用戶
note：注釋
bar：進度條
profile：個人資料
ranked：排名
error：錯誤
操作命名：
close：關閉
back：返回
edit：編輯
download：下載
collect：收藏
comment：評論
play：播放
pause：暫停
pop：彈出
audio：音頻
viedio：視頻
狀態命名：
selected：選中
disabled：無法點擊
highlight：點擊時
default：默認
normal：一般
pressed：按下
slide：滑動
iOS切圖命名栗子：
common_nav_btn_back_s@2x.png
common_nav_btn_back_s@3x.png
common_tab_demand_s@2.png
common_tab_me_n@2.png
common_tab_me_s@2.png? ?
...
Android切圖栗子：(將不同倍率的圖放在不同文件夾)
common_nav_btn_menu_n.png
common_nav_btn_menu_s.png
common_nav_btn_back_n.png
common_nav_btn_back_s.png
common_nav_btn_close_n.png
common_nav_btn_close_s.png
common_nav_btn_eidt_n.png?
...
本文過長，就先寫到這兒，后面會陸續寫物理像素與邏輯像素，以及點九切圖和動圖如何完美引入等關鍵點，因本人能力有限，文章中還有很多不足之處，請各位指正。
注：部分圖片和文字來源于網絡，需轉載請留言告知后加鏈接，謝謝。
原文鏈接：?https://dwz.cn/2o0yxW7h
