切圖小貼士 點九圖幾點經驗

用戶手中看到的產品界面，並不是設計師嘔心瀝血創做的效果圖，而是一個個單獨的切圖經由開發同窗技術實現。切圖做爲設計師與開發者之間的橋樑，它的做用很關鍵，合適的切圖、精準的位置能夠最大限度的還原效果圖的設計，精妙的切圖更會有事半功倍的效果哦！

咱們常常會作一個俗稱「點九」的切圖，什麼是「點九」呢？「點九」是Android平臺處理圖片的一種特殊的形式，因爲文件的擴展名爲：「.9.png」，因此被稱爲「點九」。「點九」也是因爲Android平臺多種分辨率需適配的需求下，發展出來的一種獨特的技術。它能夠將圖片橫向和縱向隨意進行拉伸，而保留像素精細度、漸變質感和圓角的原大小，實現多分辨率下的完美顯示效果，同時減小沒必要要的圖片資源，可謂切圖利器。

「點九」的製做工具爲「draw9patch」，具體制做步驟這裏很少講了，插播小貼士第一條：捨棄這個製做工具吧，減小繁瑣的步驟，不要再每張圖片都拖到工具裏畫啦！直接用ps＋鉛筆就能夠畫哦。

「點九」的學問固然很大，但Android切圖不只須要清楚「點九」的方法，還有其餘各類小技巧。下面爲你們分享我在工做中總結的幾個關於切圖的心得。

(一)站在開發的角度來切圖

瞭解技術實現方式，就像瞭解一位開發同窗，更多的瞭解，會讓工做更加順暢。
如爲下圖按鈕作「點九」圖，一部分同窗可能會這樣作：

這是一張高度不變左右拉伸的「點九」圖片，內容顯示區域爲整個按鈕範圍。按鈕效果圖上看，文字是垂直居中顯示的，開發同窗拿到這張「點九」圖片，就會在代碼裏寫上center的屬性，此屬性就是設定讓文字在按鈕的垂直居中位置。說到這，有沒有察覺出問題呢？先讓咱們看一下實現出來的效果怎麼樣。

擁有像素眼的設計師們，馬上會察覺文字偏下了。而後找開發同窗調整文字的位置，「把文字向上n個像素吧，沒有居中」等等，這是很常常發生的對話，開發同窗會增長代碼微調文字的位置以達到效果圖效果。事情圓滿解決了嗎？否則。實際上是咱們錯了。

當咱們瞭解開發同窗實現方法後，咱們能夠試試用逆推法驗證這張「點九」圖片是否還有進一步精確的可能。

如上圖，設計效果圖中紅色區域是文字排版區域，是理想化的位置，1和2的高度是相等的；而實現效果圖中3和4的高度是相等的。問題出現了！在咱們畫點九的時候，把投影的高度也畫進去了，因此視覺上文字就偏下了。

咱們一般的畫法應該是：

1. 在高度不拉伸的狀況下，在空白區域點一像素的點。

這是與開發同窗之間約定俗成的習慣，憑着默契就知道此按鈕高度不進行拉伸，並且就是被拉伸了，拉伸的是空白區域，視覺上也不會形成影響。

對好比圖所示：

2. 內容顯示區域的高度要避開投影區域，這樣能夠保證文字視覺的居中。

「點九」圖片的內容顯示區域，我喜歡稱爲內容排版區域。在切圖的過程當中，還會發現不一樣的情景，要時刻想着你要的結果，經過對此區域的仔細處理，能夠更好的爲圖片上所承載的內容作排版。這樣開發同窗只要經過一些簡單的屬性設定，就能夠實現效果圖上精確的佈局。同時減小沒必要要的開發，精簡代碼，提升產品的性能，聚沙成塔，帶給用戶更好的體驗感覺。

(二)選擇更優的切圖方式

當咱們遇到異形或較爲複雜的切圖時，每每須要拋開固有的思惟程式，去找到更適合的切圖方式。舉例如爲下圖浮層切圖的時候，咱們還能夠用咱們的利器「點九」麼？

首先分析一下此浮層的幾個特色：一是半透明漸變有厚度又有投影的效果；二是有三角異形，並且位置不固定。在切圖的時候先走了一下小彎路，用固有思惟把浮層分紅了上下兩個部分，下面方形作成「點九」，上面三角形單獨一個切圖，用拼接的方式去實現。這是符合開發同窗的原子拆分設計模式的，把會變化的部分取出並封裝起來，讓其餘部分不受到影響。因此開發同窗很快作好了實現，但效果不盡人意。咱們其實能夠預想獲得，由於有投影效果上下拼接必定有重疊，這樣拼接處就會有一條明顯的線。

那怎麼辦呢？通過設計師的進一步思考，終於找到了一種更適合的切圖方式：

左右分割成兩個「點九」圖片，這樣即能保證鏈接處的效果，又能靈活三角指向的位置。思考好如何切圖的同時也要跟技術同窗溝通可否實現，衡量實現的成本。最後值得高興的是，實現出來的效果­跟設計效果圖沒有任何出入。

(三)儘量的減少資源的大小

切圖的時候儘量減少資源的大小，爲產品安裝包瘦身。

1.「點九」圖片拉伸1個像素與拉伸10個像素效果上是沒有區別的，因此儘可能縮小圖片的尺寸。

(在上面的例子當中，爲了保持看得清楚，沒有縮小到最小狀況，在實際工做中能夠稍加註意。)

2.當咱們遇到有紋理的背景或有紋理的按鈕時，切圖原則爲：找到紋理的規律，用最小的切圖去平鋪，能夠想象中圖案疊加的原理。

第一種紋理背景，如輸入法多媒體中隨寫輸入的界面，不一樣的信紙，咱們就用了儘量最小的切圖去平鋪而實現的。以下圖：

這是咱們輸入法中信紙的切圖，遵循用最小切圖的原則，按照不一樣紋理的規律調整到最小的切圖，因此能夠看出不一樣紋理的切圖尺寸是不同的。

第二種有紋理的按鈕，咱們通常會這樣處理：

咱們的目標是把按鈕分紅三段，保留左右圓角部分，找到中間紋理可複用平鋪的部分，同事確保中間紋理能夠與左右兩張圖無縫鏈接，這樣按鈕的長度就變成可控的了，能夠適用於不一樣的場景。

首先找到紋理的規律，這裏的斜線紋理只需切寬爲3px的圖便可；而後用紋理圖片去嘗試左右圓角部分，鏈接到圓角部分的紋理就成功咯。遇到其餘類型紋理切圖時，思路是能夠複用的。

3.適當壓縮圖片質量，在單色或沒有過多效果時可存儲爲png8位或索引模式。

這裏就不作舉例了。

小結

設計師在提供設計規範後愁苦實現效果不盡如人意的同時，能夠儘量的利用一些切圖手段，幫助你的設計達到零差異的呈現，同時也幫助開發同窗減小了不少沒必要要的開發負擔，對於產品自己也有提升運行速度等不少不言而喻的好處。讓設計師同窗與咱們親愛的開發同窗成爲更貼心更默契的合做夥伴吧！

以上爲工做中關於Android切圖的一點小經驗，若有錯誤或不足的地方請你們指正，同時歡迎你們分享更多的切圖經驗與技巧。