自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

移動應(yīng)用UI設(shè)計中的48dp定律

原創(chuàng)
移動開發(fā) Android
有不少網(wǎng)友建議我多寫寫科普類技術(shù)性的文章, 所以我盡量往小白能看懂的方式嘗試寫寫,這次先來講講程序設(shè)計中的48dp定律。

有不少網(wǎng)友建議我多寫寫科普類技術(shù)性的文章, 所以我盡量往小白能看懂的方式嘗試寫寫,這次先來講講程序設(shè)計中的48dp定律。

那么先說說什么是dp ?其實對于一個非技術(shù)人員要把這個概念完全搞清楚還挺復(fù)雜的,所以我們就知道他是干什么用的就好,因為安卓陣營的碎片化,所以會有雜七雜八的不同分辨率的屏幕,但是一個UI人員不可能對不同分辨率把應(yīng)用的圖片都切一遍吧?所以就用dp這個單位,用這個玩意兒可以保證同一個圖片在不同分辨率下的屏幕上保持基本相同的物理大小。

說了dp,就得說說px,px就是屏幕上的一個個物理的像素點,以前的屏幕上的像素點是可以用肉眼看到的,后來喬布斯炒作了個視網(wǎng)膜屏幕的概念,其實就是像素的密度比較大,肉眼已經(jīng)看不見了。

如下圖,是用像素(px)為單位的按鈕和圖片分別在低分辨率、中分辨率和高分辨的顯示效果,可以看出來物理大小是發(fā)生變化的。

在看看下圖,使用了dp作為單位,物理大小就沒有發(fā)生太大的變化。

反正搞安卓開發(fā)的,一般都會用dp來規(guī)定一個組件的大小。當(dāng)然偶爾也有人會用像素(px)來規(guī)定組件大小,可能是個新手、也可能是此人的程序不想兼容更多的設(shè)備。

上面解釋了什么是dp,dp就是一種基本上和設(shè)備無關(guān)的單位,可以保證一套UI在不同機(jī)器上面的適配,而顯示效果不會出現(xiàn)很大的偏差。那什么是48dp定律?

在通常情況下48dp在物理屏幕上差不多是9毫米的大小,而在UI設(shè)計中所有觸摸類控件的推薦大小在7毫米到10毫米之間,因為在這個值之間會使控件的點中率大大增加,在視覺上也會比較舒服。

所以當(dāng)你的可觸摸控件的高度和寬度大于等于48dp時,一方面可以保證你的控件在任何設(shè)備上都不會小于7毫米,同時也能夠保證控件中的內(nèi)容看起來比較舒服,也不會出現(xiàn)誤觸的現(xiàn)象。這就是所謂的48dp定律,當(dāng)然這一切是個推薦值,定律在心中,實際情況靈活處理,而不是被定律束縛,才是一個優(yōu)秀的設(shè)計師。

同時一定要注意控件之間***至少有8dp的留白,這樣看起來會好很多,舉個例子,看下圖, 左邊的鉛筆圖片控件的大小是48dp*48dp ,右邊按鈕控件的高度為48dp,寬度為48*3dp,大小完全符合48dp定律。 圖片和按鈕之間的間距為8dp,保證了圖片和按鈕合適的間距,按鈕的內(nèi)容和按鈕控件最邊緣間隔為4dp,這樣如果兩個按鈕控件上下并排放在一起,也能保證兩個按鈕內(nèi)容間的間距為8dp ,從而保證了其美觀性,內(nèi)容居中對齊之類的就不多說了,這是最基本的。

再給個完整的例子,很簡單,大家自己分析:

作者:@最牛傻蛋

責(zé)任編輯:徐川 來源: 投稿
相關(guān)推薦

2013-04-17 09:50:36

用戶體驗設(shè)計UED手勢

2013-02-28 15:57:06

產(chǎn)品設(shè)計移動UI

2020-02-10 09:00:21

UI手機(jī)開發(fā)

2012-04-26 10:26:51

移動應(yīng)用設(shè)計

2018-05-14 08:45:47

UI設(shè)計虛擬現(xiàn)實代碼

2018-03-10 07:27:27

移動應(yīng)用UI設(shè)計移動APP

2011-05-06 09:49:22

視覺設(shè)計移動終端UI設(shè)計

2014-12-09 10:15:50

2012-07-20 15:54:39

UI設(shè)計應(yīng)用設(shè)計

2018-03-28 08:52:00

移動應(yīng)用微服務(wù)監(jiān)控多云

2012-07-19 14:19:59

UI設(shè)計包容性設(shè)計

2013-09-26 09:19:11

移動應(yīng)用用戶體驗設(shè)計

2013-01-29 09:35:36

芯片英特爾CPU

2013-01-14 14:50:23

移動開發(fā)UI設(shè)計資源

2010-12-24 09:14:17

用戶體驗UI設(shè)計檢測要素

2011-12-28 09:52:30

移動優(yōu)先移動Web

2015-05-07 09:37:56

移動開發(fā)設(shè)計

2013-01-17 14:34:49

微信移動應(yīng)用產(chǎn)品設(shè)計

2012-04-17 09:20:38

表單設(shè)計移動應(yīng)用

2011-12-26 10:28:39

移動Web
點贊
收藏

51CTO技術(shù)棧公眾號