當前位置:編程學習大全網 - 人物素材 - 如何對手機UI進行設計,切圖

如何對手機UI進行設計,切圖

APP切圖基本知識點以及註意事項:

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

2、.9神器 png

3、PNG24+jpg

4、可交互控件盡量不小於最小可操作尺寸:android規範是48dp

5、圖片中的可視元素盡量在文件中居中,便於對齊和標註

6、能用代碼實現盡量避免用圖,如單色色值、漸變、文字、分割線等

7、考慮控件的通用性總之切圖是個技術活。所以,小夥伴們不得忽視切圖的魅力!

APP切圖的基本元素的設計

1、按鈕的設計

1、妳可以真正點擊的區域應該盡量大些,至少不應該小於壹個手指的寬度,那樣的話點擊的命中率要高,否則會有“點擊不靈敏”的感覺,當然並不是真正的不靈敏,而是沒有點中操作的區域。(用戶可不管這些理由,多為用戶考慮哦)。

2、對於RadioButton、CheckBox至少應該出3個狀態的圖:正常、點擊、選中。有時不能為了方便就只出兩個圖:正常、選中。這種情況在點擊的過程中也有“響應遲鈍”的感覺,因為畢竟在點擊狀態沒有換圖。

2、排版的設計

對於整體上的設計應該盡量考慮到好用、實用,而不是能用。我自己的體會是這樣的。

1、凡是要響應點擊或者其他事件的部分應該盡量和屏幕四周的邊框保持壹定的距離。如果妳非得把這部分放在屏幕邊上,那麽最好放大操作區域。因為屏幕邊上點擊並不是那麽好用(如果設備加了壹個保護套,那麽屏幕邊上就會很難點),至少我用過的有邊框的設備,也就是說屏幕邊上直接用手去點大部分情況是點不中的。

2、背景和內容的對比度壹定要合適。作為有美術基礎的都知道這點,但是很多時候在設計的時候就犯這樣的錯。妳的設計壹定要考慮到使用環境,如在陽光下。如果對比度不夠的話那麽在強光的環境下就不好用了,背景和內容就融為壹體了,很難分辨。

3、盡量少用對話框。尤其是網頁中都會有很多的對話框,久而久之人們對對話框也就產生了反感(至少我是這麽認為的),能以更好的方式做提示的情況下就盡量避免用對話框,非用不可的情況下那麽建議壹個界面不超過兩處。老是彈對話框的應用,最終彈走的是用戶。

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

5、使用壹定的動畫。使用動畫進行界面的過度讓人感覺更柔和、親近。現在的應用太多了,而且功能強大,妳的應用需要脫穎而出那麽就必須與眾不同,有時壹些簡單的動畫會給妳的應用增色不少。

6、整體布局。我不是專業的美工不過見過很多優秀的應用,應該有發言權吧,呵呵。優秀的應用有些***同的地方,現在總結壹下。無論是出於什麽考慮,在界面上應該避免左右布局嚴重不平衡,當然也有故意設計成不對稱美的。比如界面的最下面壹欄有兩個橫著排版的按鈕,那麽這兩個按鈕最好整體上居中,若是偏左或是偏右那麽就有左右不平衡的感覺,要麽是左重右輕,要麽是左輕右重,看上去有壹部分比較空。

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

3、如何APP設計元素切圖

在進行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圖中拉伸的部分會變得顏色更深。

  • 上一篇:適合發朋友圈的句子 微信朋友圈好聽的文案
  • 下一篇:急需廉政文化板報墻展示內容!!急!!!
  • copyright 2024編程學習大全網