小白科普：UI設(shè)計中的48dp定律

先說說什么是dp?

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

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

推薦閱讀：
《超贊！源自codepen的25個最受歡迎的HTML/CSS代碼》
《干貨！扁平風(fēng)+iOS 7線型風(fēng)界面組件PSD打包下載》
《讓設(shè)計更出色！IOS7圖標(biāo)設(shè)計的七條黃金法則》

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

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

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

上面解釋了什么是dp：

dp就是一種基本上和設(shè)備無關(guān)的單位，可以保證一套UI在不同機器上面的適配，而顯示效果不會出現(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)容居中對齊之類的就不多說了，這是最基本的。

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

作者：@最牛傻蛋

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程的干貨網(wǎng)站。
【特色推薦】
PS禮儀手冊：網(wǎng)頁設(shè)計師必須修煉的內(nèi)功技法，更是不可或缺的WEB設(shè)計指南http://hao.uisdc.com/ps/。
設(shè)計微博：擁有粉絲量58萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設(shè)計教程、經(jīng)驗分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：