用戶手中看到的產(chǎn)品界面，并非設(shè)計師嘔心瀝血創(chuàng)作的效果圖，而是一個個單獨的切圖經(jīng)由開發(fā)同學技術(shù)實現(xiàn)。切圖作為設(shè)計師與開發(fā)者之間的橋梁，它的作用很關(guān)鍵，合適的切圖、精準的位置可以最大限度的還原效果圖的設(shè)計，精妙的切圖更會有事半功倍的效果哦！

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

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

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

（一）站在開發(fā)的角度來切圖

了解技術(shù)實現(xiàn)方式，就像了解一位開發(fā)同學，更多的了解，會讓工作更加順暢。

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

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

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

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

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

我們通常的畫法應(yīng)該是：

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

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

對比如圖所示：

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

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

（二）選擇更優(yōu)的切圖方式

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

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

那怎么辦呢？經(jīng)過設(shè)計師的進一步思考，終于找到了一種更適合的切圖方式：

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

標簽： 百度MUX 點九是什么 產(chǎn)品設(shè)計 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。