目前，移動(dòng)端的UI設(shè)計(jì)已經(jīng)引領(lǐng)網(wǎng)頁(yè)設(shè)計(jì)的發(fā)展，但是它不像網(wǎng)頁(yè)設(shè)計(jì)那么純粹，還需要設(shè)計(jì)師們精心的揣摩其中的內(nèi)涵。那么，在移動(dòng)端UI設(shè)計(jì)產(chǎn)品時(shí)，一個(gè)完整的項(xiàng)目有幾個(gè)至關(guān)重要的點(diǎn)，這篇文章，我們就來(lái)詳細(xì)的講解一下其中的一個(gè)，移動(dòng)端UI設(shè)計(jì)的切圖。
　　用戶(hù)手中看到的產(chǎn)品界面，并非設(shè)計(jì)師嘔心瀝血?jiǎng)?chuàng)作的效果圖，而是一個(gè)個(gè)單獨(dú)的切圖經(jīng)由開(kāi)發(fā)人員技術(shù)實(shí)現(xiàn)。切圖作為設(shè)計(jì)師與開(kāi)發(fā)者之間的橋梁，它的作用很關(guān)鍵，合適的切圖、精準(zhǔn)的位置可以最大限度的還原效果圖的設(shè)計(jì)，精妙的切圖更會(huì)有事半功倍的效果。
　　我們經(jīng)常會(huì)做一個(gè)俗稱(chēng)“點(diǎn)九”的切圖，什么是“點(diǎn)九”呢?“點(diǎn)九”是Android平臺(tái)處理圖片的一種特殊的形式，由于文件的擴(kuò)展名為：“.9.png”，所以被稱(chēng)為“點(diǎn)九”。“點(diǎn)九”也是由于Android平臺(tái)多種分辨率需適配的需求下，發(fā)展出來(lái)的一種獨(dú)特的技術(shù)。它可以將圖片橫向和縱向隨意進(jìn)行拉伸，而保留像素精細(xì)度、漸變質(zhì)感和圓角的原大小，實(shí)現(xiàn)多分辨率下的完美顯示效果，同時(shí)減少不必要的圖片資源，可謂切圖利器。
　　使用Photoshop繪制點(diǎn)九的方法：
　　確定切圖后直接改變圖片的畫(huà)布大小，手動(dòng)將上下左右各增加1px，使用鉛筆工具，手動(dòng)繪制拉伸區(qū)域，色值必須為黑色(#000000)。存儲(chǔ)為web所用格式，選擇png-24，儲(chǔ)存時(shí)手動(dòng)將后綴名改為.9.png。不過(guò)這種方法的缺點(diǎn)是不能實(shí)時(shí)預(yù)覽，判斷并測(cè)試?yán)靺^(qū)域的準(zhǔn)確性。
　　使用此方法需要注意以下2點(diǎn)：
　　1、手繪的黑線拉伸區(qū)必須是#000000，透明度100%，并且圖像四邊不能出現(xiàn)半透明像素;
　　2、你的.9.png必須繪有拉伸區(qū)域的黑線。
　　“點(diǎn)九”的制作工具為“draw9patch”，具體制作步驟這里不多講了，插播小貼士第一條：舍棄這個(gè)制作工具吧，減少繁瑣的步驟，不要再每張圖片都拖到工具里畫(huà)啦!直接用ps+鉛筆就可以畫(huà)哦。
　　“點(diǎn)九”的學(xué)問(wèn)當(dāng)然很大，但Android切圖不僅需要清楚“點(diǎn)九”的方法，還有其他各種小技巧。下面為大家分享我在工作中總結(jié)的幾個(gè)關(guān)于切圖的心得。
　　一、從開(kāi)發(fā)的角度來(lái)切圖
　　了解技術(shù)實(shí)現(xiàn)方式，就像了解一位開(kāi)發(fā)人員，更多的了解，會(huì)讓工作更加順暢。
　　如為下圖按鈕做“點(diǎn)九”圖，一部分人員可能會(huì)這樣做：
 

 
　　這是一張高度不變左右拉伸的“點(diǎn)九”圖片，內(nèi)容顯示區(qū)域?yàn)檎麄€(gè)按鈕范圍。按鈕效果圖上看，文字是垂直居中顯示的，開(kāi)發(fā)人員拿到這張“點(diǎn)九”圖片，就會(huì)在代碼里寫(xiě)上center的屬性，此屬性就是設(shè)定讓文字在按鈕的垂直居中位置。說(shuō)到這，有沒(méi)有察覺(jué)出問(wèn)題呢?先讓我們看一下實(shí)現(xiàn)出來(lái)的效果怎么樣。
　　擁有像素眼的設(shè)計(jì)師們，立刻會(huì)察覺(jué)文字偏下了。然后找開(kāi)發(fā)人員調(diào)整文字的位置，“把文字向上n個(gè)像素吧，沒(méi)有居中”等等，這是很經(jīng)常發(fā)生的對(duì)話(huà)，開(kāi)發(fā)人員會(huì)增加代碼微調(diào)文字的位置以達(dá)到效果圖效果。事情圓滿(mǎn)解決了嗎?不然。其實(shí)是我們錯(cuò)了。
　　當(dāng)我們了解開(kāi)發(fā)人員實(shí)現(xiàn)方法后，我們可以試試用逆推法驗(yàn)證這張“點(diǎn)九”圖片是否還有進(jìn)一步精確的可能。
　　如上圖，設(shè)計(jì)效果圖中紅色區(qū)域是文字排版區(qū)域，是理想化的位置，1和2的高度是相等的;而實(shí)現(xiàn)效果圖中3和4的高度是相等的。問(wèn)題出現(xiàn)了!在我們畫(huà)點(diǎn)九的時(shí)候，把投影的高度也畫(huà)進(jìn)去了，所以視覺(jué)上文字就偏下了。
 

 

 
　　我們通常的畫(huà)法應(yīng)該是：
　　1、在高度不拉伸的情況下，在空白區(qū)域點(diǎn)一像素的點(diǎn)。
　　這是與開(kāi)發(fā)人員之間約定俗成的習(xí)慣，憑著默契就知道此按鈕高度不進(jìn)行拉伸，而且就是被拉伸了，拉伸的是空白區(qū)域，視覺(jué)上也不會(huì)造成影響。
　　對(duì)比如圖所示：
 

 
　　2、 內(nèi)容顯示區(qū)域的高度要避開(kāi)投影區(qū)域，這樣可以保證文字視覺(jué)的居中。
　　“點(diǎn)九”圖片的內(nèi)容顯示區(qū)域，我喜歡稱(chēng)為內(nèi)容排版區(qū)域。在切圖的過(guò)程中，還會(huì)發(fā)現(xiàn)不同的情景，要時(shí)刻想著你要的結(jié)果，通過(guò)對(duì)此區(qū)域的仔細(xì)處理，可以更好的為圖片上所承載的內(nèi)容做排版。這樣開(kāi)發(fā)人員只要通過(guò)一些簡(jiǎn)單的屬性設(shè)定，就可以實(shí)現(xiàn)效果圖上精確的布局。同時(shí)減少不必要的開(kāi)發(fā)，精簡(jiǎn)代碼，提高產(chǎn)品的性能，積少成多，帶給用戶(hù)更好的體驗(yàn)感受。
　　二、選擇更優(yōu)的切圖方式
　　當(dāng)我們遇到異形或較為復(fù)雜的切圖時(shí)，往往需要拋開(kāi)固有的思維程式，去找到更適合的切圖方式。舉例如為下圖浮層切圖的時(shí)候，我們還可以用我們的利器“點(diǎn)九”么?移動(dòng)端產(chǎn)品UI設(shè)計(jì)切圖知識(shí)必備
　　首先分析一下此浮層的幾個(gè)特點(diǎn)：一是半透明漸變有厚度又有投影的效果;二是有三角異形，而且位置不固定。在切圖的時(shí)候先走了一下小彎路，用固有思維把浮層分成了上下兩個(gè)部分，下面方形做成“點(diǎn)九”，上面三角形單獨(dú)一個(gè)切圖，用拼接的方式去實(shí)現(xiàn)。這是符合開(kāi)發(fā)人員的原子拆分設(shè)計(jì)模式的，把會(huì)變化的部分取出并封裝起來(lái)，讓其他部分不受到影響。所以開(kāi)發(fā)人員很快做好了實(shí)現(xiàn)，但效果不盡人意。我們其實(shí)可以預(yù)想得到，因?yàn)橛型队靶Ч舷缕唇右欢ㄓ兄丿B，這樣拼接處就會(huì)有一條明顯的線。
　　那怎么辦呢?經(jīng)過(guò)設(shè)計(jì)師的進(jìn)一步思考，終于找到了一種更適合的切圖方式：

 
　　左右分割成兩個(gè)“點(diǎn)九”圖片，這樣即能保證連接處的效果，又能靈活三角指向的位置。思考好如何切圖的同時(shí)也要跟技術(shù)人員溝通能否實(shí)現(xiàn)，衡量實(shí)現(xiàn)的成本。最后值得高興的是，實(shí)現(xiàn)出來(lái)的效果­跟設(shè)計(jì)效果圖沒(méi)有任何出入。
　　三、盡可能的減小資源的大小
　　切圖的時(shí)候盡可能減小資源的大小，為產(chǎn)品安裝包瘦身。
　　1、“點(diǎn)九”圖片拉伸1個(gè)像素與拉伸10個(gè)像素效果上是沒(méi)有區(qū)別的，所以盡量縮小圖片的尺寸。
　　(在上面的例子當(dāng)中，為了保持看得清楚，沒(méi)有縮小到最小情況，在實(shí)際工作中可以稍加注意。)
　　2、當(dāng)我們遇到有紋理的背景或有紋理的按鈕時(shí)，切圖原則為：找到紋理的規(guī)律，用最小的切圖去平鋪，可以想象中圖案疊加的原理。
　　第一種紋理背景，如輸入法多媒體中隨寫(xiě)輸入的界面，不同的信紙，我們就用了盡可能最小的切圖去平鋪而實(shí)現(xiàn)的。如下圖：
 

 
　　這是我們輸入法中信紙的切圖，遵循用最小切圖的原則，按照不同紋理的規(guī)律調(diào)整到最小的切圖，所以可以看出不同紋理的切圖尺寸是不一樣的。
　　第二種有紋理的按鈕，我們一般會(huì)這樣處理：
 

 
　　我們的目標(biāo)是把按鈕分成三段，保留左右圓角部分，找到中間紋理可復(fù)用平鋪的部分，同事確保中間紋理可以與左右兩張圖無(wú)縫連接，這樣按鈕的長(zhǎng)度就變成可控的了，可以適用于不同的場(chǎng)景。
　　首先找到紋理的規(guī)律，這里的斜線紋理只需切寬為3px的圖即可;然后用紋理圖片去嘗試左右圓角部分，連接到圓角部分的紋理就成功咯。遇到其他類(lèi)型紋理切圖時(shí)，思路是可以復(fù)用的。
　　3、適當(dāng)壓縮圖片質(zhì)量，在單色或沒(méi)有過(guò)多效果時(shí)可存儲(chǔ)為png8位或索引模式。
　　小結(jié)
　　設(shè)計(jì)師在提供設(shè)計(jì)規(guī)范后愁苦實(shí)現(xiàn)效果不盡如人意的同時(shí)，可以盡可能的利用一些切圖手段，幫助你的設(shè)計(jì)達(dá)到零差別的呈現(xiàn)，同時(shí)也幫助開(kāi)發(fā)人員減少了很多不必要的開(kāi)發(fā)負(fù)擔(dān)，對(duì)于產(chǎn)品本身也有提高運(yùn)行速度等很多不言而喻的好處。讓設(shè)計(jì)師人員與我們親愛(ài)的開(kāi)發(fā)人員成為更貼心更默契的合作伙伴吧!