什么是ui切圖 切圖嚴(yán)格來(lái)說(shuō)并不是Ui設(shè)計(jì)師的工作，而是前端工程師的工作，指的是將設(shè)計(jì)師的設(shè)計(jì)轉(zhuǎn)化為網(wǎng)頁(yè)，是一種將設(shè)計(jì)師的“理想”轉(zhuǎn)化為“現(xiàn)實(shí)”的工作，將psd進(jìn)行切片重組 利用div+css js等等前端開發(fā)代碼來(lái)生成網(wǎng)頁(yè)的一種技術(shù)。

什么是ui切圖_安卓切圖命名規(guī)范，設(shè)計(jì)切圖輸出的目的是跟下游的工程師團(tuán)隊(duì)協(xié)同工作，那么在團(tuán)隊(duì)協(xié)作過(guò)程中，首先應(yīng)該確保切圖輸出能夠滿足工程師設(shè)計(jì)效果圖的高保真還原需求。其次，切圖輸出應(yīng)該盡可能降低工程師的開發(fā)工作量，避免因切圖輸出而導(dǎo)致不必要的工作量。后，輸出的切圖應(yīng)當(dāng)盡可能的壓縮大小，以降低APP的總大小，提升用戶使用時(shí)的加載速度。所以切圖輸出應(yīng)當(dāng)做到切圖精準(zhǔn)、便與協(xié)同和壓縮大小。

安卓切圖命名規(guī)范 所有命名全部為小寫英文字母：這一點(diǎn)的理由很簡(jiǎn)單，我們的目標(biāo)是讓開發(fā)直接拿我們的切圖進(jìn)行使用，不能夠隨意修改名稱，但是我們要知道，開發(fā)的代碼里只有小寫的英文字母，如果你給出的命名全是中文的，那么他們是一定會(huì)更改的。所以命名全部用小寫的英文字母是基本的規(guī)則。

命名格式：眾所周知，一個(gè)大型項(xiàng)目會(huì)分很多模塊，每個(gè)模塊由不同的設(shè)計(jì)師來(lái)獨(dú)立完成，還有人會(huì)專門管理公共的組件，如tabbar、navbar等等，這種情況下就會(huì)分為兩種切圖，一種是通用類型的切圖，還有一種就是各個(gè)模塊特有的切圖。 什么是ui切圖_安卓切圖命名規(guī)范，通用切片命名格式： 組件_類別_功能_狀態(tài)@2x.png 舉例：tabbar_icon_home_default@2x.png(對(duì)應(yīng)中文：標(biāo)簽欄_圖標(biāo)_主頁(yè)_默認(rèn)@2x.png) 模塊特有切圖命名規(guī)則：模塊_類別_功能_狀態(tài)@2x.png 舉例：mail_icon_search_pressed@2x.png(對(duì)應(yīng)的中文為：郵件_圖標(biāo)_搜索_ 默認(rèn)@2x.png) 當(dāng)然這兩個(gè)例子都是比較基本的情況，有很多時(shí)候可能一個(gè)單詞并不能清楚的描述功能，比如有兩個(gè)名字相同的搜索圖標(biāo)，大小不一，那這種情況你就可以這樣命名：mail_icon_search_big_default@2x.png，我們的原則就是清晰的表達(dá)出切片的具體內(nèi)容并且沒(méi)有重復(fù)的名稱。

UI切圖怎么切 不用在意那么多設(shè)備，不管iOS和Android手機(jī)型號(hào)有多少，只要我們了解它的屏幕分辨率之后就好辦了。不同分辨率對(duì)應(yīng)不同的倍率，這樣的話我們適配的時(shí)候就知道怎么切圖了，@2x表示兩倍圖，@3x表示三倍圖。現(xiàn)在PhotoshopCC2015已經(jīng)出了切圖就更方便了，但是對(duì)于電腦的配置要求比較高，對(duì)于電腦配置比較低的可以這樣干，作圖的時(shí)候用CS6，文件在這里面做好之后，只需要啟動(dòng)CC2014或者CC2015進(jìn)行切圖操作就可以了。 1、調(diào)出優(yōu)選項(xiàng)Command(Ctrl)+k，勾選啟用生成器，默認(rèn)是不夠選的。 2、文件-生成-圖像資源，這個(gè)是后期的時(shí)候用的比較多的一個(gè)選項(xiàng)。開始輸出，準(zhǔn)備工作都已經(jīng)弄完，下面就需要用到CC2014或CC2015的圖像生成器，前面的利其器的部分的增效工具里面的啟用生成器一定要打勾，然后就可以直接操作，文件>生成>圖像資源，然后你會(huì)看到，切圖文件的旁邊多了一個(gè)文件夾，文件夾的名稱一般是“文件名-assets”，里面就是你的切圖文件了。 安卓只需要把iOS的@2x的圖拷貝一份，然后建個(gè)文件夾命名為android，拷貝進(jìn)去，去掉命名后面的@2x就可以了。

安卓切圖切幾套 需要了解IPhone各個(gè)版本的手機(jī)屏幕密度：

IPhone 4/4s/5/5s/5c/6 ≈320dpi

你會(huì)發(fā)現(xiàn)單從屏幕密度來(lái)說(shuō)，IPhone可以算是超高密度了。

下面來(lái)說(shuō)說(shuō)這幾個(gè)密度：

LDPI　　　　　　　 120dpi 低密度 不考慮這個(gè)了，消失了

MDPI 　　　　 160dpi 中密度 這個(gè)目前少見

HDPI 　　　　　240dpi 高密度 常見

xHDPI 　　　　320dpi 超高密度 常見

xxHDPI 　　480dpi 超超高密度 常見

xxxHDPI 　　　640dpi 超超高密度 Android4.3推出了對(duì)此密度的支持，也就是平板電視的4K分辨率

你的切圖會(huì)根據(jù)這幾個(gè)密度來(lái)決定輸出多少套。理論狀態(tài)下，如果你想兼顧到目前還存在的各個(gè)機(jī)型，應(yīng)該為不同的密度提供不同尺寸大小的切圖。但這無(wú)疑提升了巨大的工作量，而且還可能浪費(fèi)很大的資源空間，實(shí)際上，很多機(jī)型已經(jīng)不占有主流市場(chǎng)了，所以具體輸出幾套需要看公司的產(chǎn)品需求而定。 選取大尺寸提供一套切片資源，交給工程師處理，適配到各個(gè)屏幕密度。這里要注意，這個(gè)“大尺寸”，指的并不是目前市面上Android手機(jī)出現(xiàn)過(guò)的大尺寸，而是指目前流行的主流機(jī)型中的大尺寸，這樣可節(jié)省很大的資源控件。關(guān)于大尺寸選取多少，你需要和你們的安卓工程師溝通，每個(gè)安卓工程師對(duì)這個(gè)問(wèn)題的結(jié)論并不同。

ui標(biāo)注工具 網(wǎng)頁(yè)設(shè)計(jì)師比較好能在制作完排版設(shè)計(jì)后，為圖像做清楚的標(biāo)注，讓接手的WEB前端更快的進(jìn)入制作狀況，常見需要標(biāo)示的狀況如下所示： 1.預(yù)備使用HTML語(yǔ)言制作的按鈕等互動(dòng)組件的色彩、尺寸以及細(xì)節(jié)等; 2.版面上各組件彼此間的距離等; 3.其他常見必須標(biāo)示的環(huán)節(jié)。 注意以下幾點(diǎn)，會(huì)讓你的信息傳遞更明確： 1.將同種類信息擺放在一起、并整齊排列，讓人一目了然; 2.標(biāo)注色彩清晰、勿使用會(huì)與背景難以分辨的色彩; 3.標(biāo)注與圖像本身間預(yù)留適當(dāng)間隔，以不擾亂圖像本身為原則; 4.切勿重復(fù)標(biāo)注;有許 多軟件開發(fā)者開發(fā)了許多好用的小工具，節(jié)省大家浪費(fèi)花費(fèi)的時(shí)間與精力。 首先是由 Onpixel 開發(fā)的 Specctr ，這是一個(gè) Firework 的外掛套件、具有可沿續(xù)原本工作環(huán)境流程以及跨平臺(tái)的優(yōu)點(diǎn)，該程序提供試用以及 Lite 的免費(fèi)版可以下載。 另外一個(gè)是 MarkMan(馬克鰻)，使用 Adobe AIR 所開發(fā)，因此也有著跨平臺(tái)的特性，雖然是簡(jiǎn)體中文，但是所有的按鈕都經(jīng)過(guò)圖形可視化，接口也相當(dāng)精簡(jiǎn)明確，并不會(huì)造成使用上的困擾。