切圖是ui設計最日常的工作之一，而有些ui設計者往往覺得切圖沒有大不了的。其實切圖的好壞關系到效果的呈現(xiàn)，切圖也是有一定規(guī)范要求的。今天就讓小編為大家介紹ui設計切圖的規(guī)范操作。

　　ui設計切圖的規(guī)范操作

　　1、Android篇標注規(guī)范：

　　畫布大小：以720 x 1280分辨率為準進行標注。

　　字體：按照像素標注，只使用 24 pt，28 pt，36 pt 和 44 pt 的字體，并pt 值除以 2 作為 sp 數(shù)值交給工程師。

　　顏色：按照實際的顏色值標注，Android顏色值取值為十六進制的值 比如一綠色的值， 給工程師的值為 #5bc43e。

　　間距：每個主要的控件必須標注出來，各種邊距必須標注清楚。所有尺寸的 px 值除以2作為 dp 數(shù)值交給工程師。

　　切圖：統(tǒng)一采用Png格式，部分需要做適配的圖片需要制作.9格式。

　　圖片優(yōu)化：圖片壓縮優(yōu)化，ICON 可采用PNG 8，支持完全透明和完全不透明兩種效果和256色，需要高清的可采用 PND24/32。

　　切圖命名：每個頁面按照設計高保真分目錄：hdpi（480 *800）xhdpi（720 *1080） xxdpi（1080 *1920）。依圖片性質(zhì)命名。例如 bg_xxx.png、btn_xxx.png、img_xxx.png、tab_xxx.png等。

ui設計切圖（圖片來自網(wǎng)絡）

　　2、iOS篇標注規(guī)范：

　　畫布大?。阂訞2x圖以640/750為寬度尺寸為基準標注。

　　字體：按照640/750寬尺寸中的像素進行標注。

　　顏色：按照實際的顏色值標注，iOS顏色值取 RGB各顏色的值比如某個色值，給予IOS程序員的色值為 R:12 G:34 B:56給出的值就是 12,34,56(有時也要根據(jù)程序員的習慣，有時也用十六進制)。

　　間距：每個主要的控件必須標注出來，各種邊距必須標注清楚。

　　切圖：統(tǒng)一采用Png格式，以640/750寬分辨率為@2x輸出三套尺寸：@1x @2x @3x。

　　圖片優(yōu)化：圖片壓縮優(yōu)化，ICON 可采用PNG 8，支持完全透明和完全不透明兩種效果和256色，需要高清的可采用 PND24/32。

　　切圖命名：每個頁面按照設計高保真分目錄：@1x @2x @3x。在文件名中需要區(qū)分是幾倍圖，例如: xxxxx@2x.png。

ui設計切圖（圖片來自網(wǎng)絡）

　　日常切圖如何做

　　切圖規(guī)范其實很簡單，就是遵守一點，我們的切圖是為了方便開發(fā)使用，完成交付過程，而不是為了完成切圖這件事。

　　1、至于如何切圖，以往我們會使用二倍圖下設計，三倍圖下切圖原則；但日常工作中，我相信大多數(shù)人都會嫌麻煩；我們可以“遵守橫平豎直原則”，讓你的icon不出現(xiàn)虛邊。

　　2、做好提前與開發(fā)溝通，標注特殊元素，交付設計稿時，除了提前制定設計規(guī)范或遵守原定的設計規(guī)范外，還需要和開發(fā)溝通點擊區(qū)域，并在驗收的時候去進行點擊區(qū)域的補漏。

　　3、切圖格式注意保持背景為透明通道。保證圖片格式統(tǒng)一、相同模塊icon尺寸統(tǒng)一，便于開發(fā)使用，另一方面也方便調(diào)整及驗收。

　　以上就是小編為大家介紹的關于ui設計切圖的相關內(nèi)容。切圖作為ui設計師最日常的工作之一，了解不同系統(tǒng)的切圖規(guī)范，才能做出最適合的切圖，大家學會了嗎？