ANDROID安卓平台的切圖小貼士

 　　用戶手中看到的產品界面，並非設計師嘔心瀝血創作的效果圖，而是一個個單獨的切圖經由開發同學技術實現。切圖作為設計師與開發者之間的橋梁，它的作用很關鍵，合適的切圖、精准的位置可以最大限度的還原效果圖的設計，精妙的切圖更會有事半功倍的效果哦!

　　我們經常會做一個俗稱“點九”的切圖，什麼是“點九”呢?“點九”是Android平台處理圖片的一種特殊的形式，由於文件的擴展名為：“.9.png”，所以被稱為“點九”。“點九”也是由於Android平台多種分辨率需適配的需求下，發展出來的一種獨特的技術。它可以將圖片橫向和縱向隨意進行拉伸，而保留像素精細度、漸變質感和圓角的原大小，實現多分辨率下的完美顯示效果，同時減少不必要的圖片資源，可謂切圖利器。

　　“點九”的制作工具為“draw9patch”，具體制作步驟這裡不多講了，插播小貼士第一條：捨棄這個制作工具吧，減少繁瑣的步驟，不要再每張圖片都拖到工具裡畫啦!直接用ps+鉛筆就可以畫哦。

　　“點九”的學問當然很大，但Android切圖不僅需要清楚“點九”的方法，還有其他各種小技巧。下面為大家分享我在工作中總結的幾個關於切圖的心得。

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

　　了解技術實現方式，就像了解一位開發同學，更多的了解，會讓工作更加順暢。

　　如為下圖按鈕做“點九”圖，一部分同學可能會這樣做：

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

　　擁有像素眼的設計師們，立刻會察覺文字偏下了。然後找開發同學調整文字的位置，“把文字向上n個像素吧，沒有居中”等等，這是很經常發生的對話，開發同學會增加代碼微調文字的位置以達到效果圖效果。事情圓滿解決了嗎?不然。其實是我們錯了。

　　當我們了解開發同學實現方法後，我們可以試試用逆推法驗證這張“點九”圖片是否還有進一步精確的可能。

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

　　我們通常的畫法應該是：

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

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

　　對比如圖所示：

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

　　“點九”圖片的內容顯示區域，我喜歡稱為內容排版區域。在切圖的過程中，還會發現不同的情景，要時刻想著你要的結果，通過對此區域的仔細處理，可以更好的為圖片上所承載的內容做排版。這樣開發同學只要通過一些簡單的屬性設定，就可以實現效果圖上精確的布局。同時減少不必要的開發，精簡代碼，提高產品的性能，積少成多，帶給用戶更好的體驗感受。

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

　　當我們遇到異形或較為復雜的切圖時，往往需要拋開固有的思維程式，去找到更適合的切圖方式。舉例如為下圖浮層切圖的時候，我們還可以用我們的利器“點九”麼?

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

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

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

　　(三)盡可能的減小資源的大小

　　切圖的時候盡可能減小資源的大小，為產品安裝包瘦身。

　　1.“點九”圖片拉伸1個像素與拉伸10個像素效果上是沒有區別的，所以盡量縮小圖片的尺寸。

　　(在上面的例子當中，為了保持看得清楚，沒有縮小到最小情況，在實際工作中可以稍加注意。)

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

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

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

　　第二種有紋理的按鈕，我們一般會這樣處理：

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

　　首先找到紋理的規律，這裡的斜線紋理只需切寬為3px的圖即可;然後用紋理圖片去嘗試左右圓角部分，連接到圓角部分的紋理就成功咯。遇到其他類型紋理切圖時，思路是可以復用的。

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

　　這裡就不做舉例了。

　　小結

　　設計師在提供設計規范後愁苦實現效果不盡如人意的同時，可以盡可能的利用一些切圖手段，幫助你的設計達到零差別的呈現，同時也幫助開發同學減少了很多不必要的開發負擔，對於產品本身也有提高運行速度等很多不言而喻的好處。讓設計師同學與我們親愛的開發同學成為更貼心更默契的合作伙伴吧!