APP設計~切圖那些事兒
文/AndyLiz APP切圖基本知識點以及注意事項
1、考慮適配Android 各種複雜的解析度，如主流的1280X720、800X480、640X480、480X320、以及各種非主流解析度。
2、.9神器 png
3、PNG24+jpg
4、可互動控制元件儘量不小於最小可操作尺寸：android規範是48dp
5、圖片中的可視元素儘量在檔案中居中，便於對齊和標註。
6、能用程式碼實現儘量避免用圖，如單色色值、漸變、文字、分割線等。
7、考慮控制元件的通用性。
總之切圖是個技術活。所以，小夥伴們不得忽視切圖的魅力！
按鈕的設計
1、你可以真正點選的區域應該儘量大些，至少不應該小於一個手指的寬度，那樣的話點選的命中率要高，否則會有“點選不靈敏”的感覺，當然並不是真正的不靈敏，而是沒有點中操作的區域。(使用者可不管這些理由，多為使用者考慮哦)。
2、對於RadioButton、CheckBox至少應該出3個狀態的圖：正常、點選、選中。有時不能為了方便就只出兩個圖：正常、選中。這種情況在點選的過程中也有“響應遲鈍”的感覺，因為畢竟在點選狀態沒有換圖。
排版的設計
對於整體上的設計應該儘量考慮到好用、實用，而不是能用。我自己的體會是這樣的。
1、凡是要響應點選或者其他事件的部分應該儘量和螢幕四周的邊框保持一定的距離。如果你非得把這部分放在螢幕邊上，那麼最好放大操作區域。因為螢幕邊上點選並不是那麼好用（如果裝置加了一個保護套，那麼螢幕邊上就會很難點），至少我用過的有邊框的裝置，也就是說螢幕邊上直接用手去點大部分情況是點不中的。
2、背景和內容的對比度一定要合適。作為有美術基礎的都知道這點，但是很多時候在設計的時候就犯這樣的錯。你的設計一定要考慮到使用環境，如在陽光下。如果對比度不夠的話那麼在強光的環境下就不好用了，背景和內容就融為一體了，很難分辨。
3、儘量少用對話方塊。尤其是網頁中都會有很多的對話方塊，久而久之人們對對話方塊也就產生了反感（至少我是這麼認為的），能以更好的方式做提示的情況下就儘量避免用對話方塊，非用不可的情況下那麼建議一個介面不超過兩處。老是彈對話方塊的應用，最終彈走的是使用者。
4、介面簡潔。這點有兩重意思，其一就是介面完成的功能很明確、簡潔，其二是同類操作儘量在一個介面完成。感覺上這兩點有衝突，其實不然，如果真的不能做到既介面簡潔又功能統一那麼這個設計最好還是再設計設計。
比如使用者資訊輸入功能中第一個介面完成使用者名稱輸入、密碼，確定後進入第二個介面進行設定頭像。像這樣的介面的個人認為太羅嗦了。既然都是完成使用者資訊的功能，那麼完全可以設計到一個介面中。這樣一來可以把整個功能做得更緊湊，少用一個介面更簡潔。
5、使用一定的動畫。使用動畫進行介面的過渡讓人感覺更柔和、親近。現在的應用太多了，而且功能強大，你的應用需要脫穎而出那麼就必須與眾不同，有時一些簡單的動畫會給你的應用增色不少。
6、整體佈局。我不是專業的美工不過見過很多優秀的應用，應該有發言權吧，呵呵。優秀的應用有些共同的地方，現在總結一下。無論是出於什麼考慮，在介面上應該避免左右佈局嚴重不平衡，當然也有故意設計成不對稱美的。比如介面的最下面一欄有兩個橫著排版的按鈕，那麼這兩個按鈕最好整體上居中，若是偏左或是偏右那麼就有左右不平衡的感覺，要麼是左重右輕，要麼是左輕右重，看上去有一部分比較空。
7、螢幕適配。Android開發中最麻煩的問題之一就是螢幕適配的問題，硬體廠商太多，螢幕尺寸太多。一個好的應用應該儘可能多的適配更多的螢幕。UI設計過程中就應該考慮到螢幕變寬、變高、變窄、變短的過程中UI應該如何適配。整體上有個原則，螢幕的適配不要改變整體的佈局，也就是佈局是不變的只是對圖形進行拉伸而已（關鍵是如何拉伸）。螢幕適配其實也是一些經驗，慢慢領悟吧，呵呵。
在進行APP切圖的前，需要做以下6點：
1、和客戶端的技術溝通好，用不同的框架來實現的時候，圖會有不一樣的切法。例如Tabbar是連背景一起切還是單獨把icon做成背景透明的，文字是放在圖裡還是後面加字。
2、有一些小的icon式按鈕，不能只切到icon邊緣，而是要考慮到最終實現的時候，是把這個圖片做成按鈕，和使用者互動。所以必須要多留一些透明的邊，讓能點選的圖片在88×88以上，這樣使用者才保證比較好點到。
3、個人的強迫症，如果可以用PNG24就不用PNG32，如果可以用PNG8就不用PNG32。並且用Fireworks優化大小。
4、對於不改變可見圖形而又需要加大點選區域的圖。那麼切圖的時候建議在可見圖形的四周都加上1畫素的透明，這是為了放大拉伸而不產生可見區域的影象失真。
5、切圖的高度。對於一個通用的背景圖，如文字圓角邊框背景，那麼切圖的時候並不是效果圖上有多高就切多高，為了通用而是隻需切一行文字的高度就可以了。不過這也不是絕對的，準確的說應該切的高度H=paddingTop+textHeight+paddingBottom，及文字相對背景的上邊距+一行文字的高度+文字相對背景的下邊距。
6、切圖的寬度。如果是一個通用的背景圖，那麼他的寬度應該是他在效果圖中的最小寬度，也就是說這個背景可能在多處使用到了，就取最小的那個寬度就可以了。比較麻煩的是鋪滿全屏的時候，這就需要看看你做的效果圖的寬屏寬度，所以說做效果圖的時候最好是做小螢幕的效果圖。
有人可能會問點9的圖不是可以拉伸、壓縮嗎，為什麼需要參考最小的寬度呢？根據個人經驗發現，一個大圖在螢幕小的情況下點9圖中拉伸的部分會變得顏色更深。
