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

0 評(píng)論 3758 瀏覽 13 收藏 5 分鐘

切圖是個(gè)技術(shù)活,小伙伴們千萬不能忽視切圖的重要性噢,快來看一下7大基本元素的設(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. 對(duì)于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ì)

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

3、盡量少用對(duì)話框

尤其是網(wǎng)頁中都會(huì)有很多的對(duì)話框,久而久之人們對(duì)對(duì)話框也就產(chǎn)生了反感(至少我是這么認(rèn)為的),能以更好的方式做提示的情況下就盡量避免用對(duì)話框,非用不可的情況下那么建議一個(gè)界面不超過兩處。老是彈對(duì)話框的應(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ōu)秀的應(yīng)用有些共同的地方,無論是出于什么考慮,在界面上應(yīng)該避免左右布局嚴(yán)重不平衡,當(dāng)然也有故意設(shè)計(jì)成不對(duì)稱美的。比如界面的最下面一欄有兩個(gè)橫著排版的按鈕,那么這兩個(gè)按鈕最好整體上居中,若是偏左或是偏右那么就有左右不平衡的感覺,要么是左重右輕,要么是左輕右重,看上去有一部分比較空。

7、屏幕適配

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

本文來源:微信[設(shè)計(jì)著]

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒評(píng)論,等你發(fā)揮!