最近在做APP項(xiàng)目的過程中遇到美工在設(shè)計(jì)和切圖方面的問題。以及APP設(shè)計(jì)群內(nèi)大家經(jīng)常問到的一些問題。25學(xué)堂特在此和大家分享一下個(gè)人對UI、UE方面的一些淺薄的認(rèn)識(shí)。

APP切圖基本知識(shí)點(diǎn)以及注意事項(xiàng)：

1、考慮適配Android 各種復(fù)雜的分辨率，如主流的1280X720, 800X480, 640X480,480X320,以及各種非主流分辨率。

2、.9神器 ?png

3、PNG24+jpg

4、可交互控件盡量不小于最小可操作尺寸：android規(guī)范是48dp

5、圖片中的可視元素盡量在文件中居中，便于對齊和標(biāo)注

6、能用代碼實(shí)現(xiàn)盡量避免用圖，如單色色值、漸變、文字、分割線等

7、考慮控件的通用性總之切圖是個(gè)技術(shù)活。所以，小伙伴們不得忽視切圖的魅力！

總之切圖是個(gè)技術(shù)活。所以，小伙伴們不得忽視切圖的魅力！

APP切圖的基本元素的設(shè)計(jì)

1、按鈕的設(shè)計(jì)

1、你可以真正點(diǎn)擊的區(qū)域應(yīng)該盡量大些，至少不應(yīng)該小于一個(gè)手指的寬度，那樣的話點(diǎn)擊的命中率要高，否則會(huì)有“點(diǎn)擊不靈敏”的感覺，當(dāng)然并不是真正的不靈敏，而是沒有點(diǎn)中操作的區(qū)域。(用戶可不管這些理由，多為用戶考慮哦)。

2、對于RadioButton、CheckBox至少應(yīng)該出3個(gè)狀態(tài)的圖：正常、點(diǎn)擊、選中。有時(shí)不能為了方便就只出兩個(gè)圖：正常、選中。這種情況在點(diǎn)擊的過程中也有“響應(yīng)遲鈍”的感覺，因?yàn)楫吘乖邳c(diǎn)擊狀態(tài)沒有換圖。

2、排版的設(shè)計(jì)

對于整體上的設(shè)計(jì)應(yīng)該盡量考慮到好用、實(shí)用，而不是能用。我自己的體會(huì)是這樣的。

1、凡是要響應(yīng)點(diǎn)擊或者其他事件的部分應(yīng)該盡量和屏幕四周的邊框保持一定的距離。如果你非得把這部分放在屏幕邊上，那么最好放大操作區(qū)域。因?yàn)槠聊贿吷宵c(diǎn)擊并不是那么好用（如果設(shè)備加了一個(gè)保護(hù)套，那么屏幕邊上就會(huì)很難點(diǎn)），至少我用過的有邊框的設(shè)備，也就是說屏幕邊上直接用手去點(diǎn)大部分情況是點(diǎn)不中的。

2、背景和內(nèi)容的對比度一定要合適。作為有美術(shù)基礎(chǔ)的都知道這點(diǎn)，但是很多時(shí)候在設(shè)計(jì)的時(shí)候就犯這樣的錯(cuò)。你的設(shè)計(jì)一定要考慮到使用環(huán)境，如在陽光下。如果對比度不夠的話那么在強(qiáng)光的環(huán)境下就不好用了，背景和內(nèi)容就融為一體了，很難分辨。

3、盡量少用對話框。尤其是網(wǎng)頁中都會(huì)有很多的對話框，久而久之人們對對話框也就產(chǎn)生了反感（至少我是這么認(rèn)為的），能以更好的方式做提示的情況下就盡量避免用對話框，非用不可的情況下那么建議一個(gè)界面不超過兩處。老是彈對話框的應(yīng)用，最終彈走的是用戶。

4、界面簡潔。這點(diǎn)有兩重意思，其一就是界面完成的功能很明確、簡潔，其二是同類操作盡量在一個(gè)界面完成。感覺上這兩點(diǎn)有沖突，其實(shí)不然，如果真的不能做到既界面簡潔又功能統(tǒng)一那么這個(gè)設(shè)計(jì)最好還是再設(shè)計(jì)設(shè)計(jì)。比如用戶信息輸入功能中第一個(gè)界面完成用戶名輸入、密碼，確定后進(jìn)入第二個(gè)界面進(jìn)行設(shè)置頭像。像這樣的界面的個(gè)人認(rèn)為太羅嗦了。既然都是完成用戶信息的功能，那么完全可以設(shè)計(jì)到一個(gè)界面中。這樣一來可以把整個(gè)功能做得更緊湊，少用一個(gè)界面更簡潔。

5、使用一定的動(dòng)畫。使用動(dòng)畫進(jìn)行界面的過度讓人感覺更柔和、親近?，F(xiàn)在的應(yīng)用太多了，而且功能強(qiáng)大，你的應(yīng)用需要脫穎而出那么就必須與眾不同，有時(shí)一些簡單的動(dòng)畫會(huì)給你的應(yīng)用增色不少。

6、整體布局。我不是專業(yè)的美工不過見過很多優(yōu)秀的應(yīng)用，應(yīng)該有發(fā)言權(quán)吧，呵呵。優(yōu)秀的應(yīng)用有些共同的地方，現(xiàn)在總結(jié)一下。無論是出于什么考慮，在界面上應(yīng)該避免左右布局嚴(yán)重不平衡，當(dāng)然也有故意設(shè)計(jì)成不對稱美的。比如界面的最下面一欄有兩個(gè)橫著排版的按鈕，那么這兩個(gè)按鈕最好整體上居中，若是偏左或是偏右那么就有左右不平衡的感覺，要么是左重右輕，要么是左輕右重，看上去有一部分比較空。

7、屏幕適配。Android開發(fā)中最麻煩的問題之一就是屏幕適配的問題，硬件廠商太多，屏幕尺寸太多。一個(gè)好的應(yīng)用應(yīng)該盡可能多的適配更多的屏幕。UI設(shè)計(jì)過程中就應(yīng)該考慮到屏幕變寬、變高、變窄、變短的過程中UI應(yīng)該如何適配。整體上有個(gè)原則，屏幕的適配不要改變整體的布局，也就是布局是不變的只是對圖形進(jìn)行拉伸而已（關(guān)鍵是如何拉伸）。屏幕適配其實(shí)也是一些經(jīng)驗(yàn)，慢慢領(lǐng)悟吧，呵呵。

3、如何APP設(shè)計(jì)元素切圖

在進(jìn)行APP切圖的前，需要做以下6點(diǎn)工作：

1、和客戶端的技術(shù)溝通好，用不同的框架來實(shí)現(xiàn)的時(shí)候，圖會(huì)有不一樣的切法。例如Tabbar是連背景一起切還是單獨(dú)把icon做成背景透明的，文字是放在圖里還是后面加字。

2、有一些小的icon式按鈕，不能只切到icon邊緣，而是要考慮到最終實(shí)現(xiàn)的時(shí)候，是把這個(gè)圖片做成按鈕，和用戶交互。所以必須要多留一些透明的邊，讓能點(diǎn)擊的圖片在88x88以上，這樣用戶才保證比較好點(diǎn)到。

3、個(gè)人的強(qiáng)迫癥，如果可以用PNG24就不用PNG32，如果可以用PNG8就不用PNG32。并且用Fireworks優(yōu)化大小。

4、對于不改變可見圖形而又需要加大點(diǎn)擊區(qū)域的圖。那么切圖的時(shí)候建議在可見圖形的四周都加上1像素的透明，這是為了放大拉伸而不產(chǎn)生可見區(qū)域的圖像失真。

5、切圖的高度。對于一個(gè)通用的背景圖，如文字圓角邊框背景，那么切圖的時(shí)候并不是效果圖上有多高就切多高，為了通用而是只需切一行文字的高度就可以了。不過這也不是絕對的，準(zhǔn)確的說應(yīng)該切的高度H=paddingTop+textHeight+paddingBottom，及文字相對背景的上邊距+一行文字的高度+文字相對背景的下邊距。

6、切圖的寬度。如果是一個(gè)通用的背景圖，那么他的寬度應(yīng)該是他在效果圖中的最小寬度，也就是說這個(gè)背景可能在多處使用到了，就取最小的那個(gè)寬度就可以了。比較麻煩的是鋪滿全屏的時(shí)候，這就需要看看你做的效果圖的寬屏寬度，所以說做效果圖的時(shí)候最好是做小屏幕的效果圖。有人可能會(huì)問點(diǎn)9的圖不是可以拉伸、壓縮嗎，為什么需要參考最小的寬度呢？根據(jù)個(gè)人經(jīng)驗(yàn)發(fā)現(xiàn)，一個(gè)大圖在屏幕小的情況下點(diǎn)9圖中拉伸的部分會(huì)變得顏色更深。

同時(shí)25學(xué)堂也跟大家分享一個(gè)：

.9png制作工具（draw9patch中文版）.7z,9png制作工具（draw9patch中文版）

軟件下載地址：http://vdisk.weibo.com/s/t7XO23ZcP4wW

本文部分內(nèi)容來源：珊·設(shè)計(jì)新浪微博?http://weibo.com/u/2848227613 ?感謝珊·設(shè)計(jì)的精彩分享！