<strike id="cy2gs"><menu id="cy2gs"></menu></strike>
  • <del id="cy2gs"><dfn id="cy2gs"></dfn></del>
  • 淺談:移動(dòng)應(yīng)用UI設(shè)計(jì)中的48dp定律

    2014-5-26    藍(lán)藍(lán)設(shè)計(jì)的小編

    轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)(   www.skdbbs.com  )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的   BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、  ipad界面設(shè)計(jì)   、  包裝設(shè)計(jì) 、  圖標(biāo)定制 、  用戶體驗(yàn) 、交互設(shè)計(jì)、   網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)

    來(lái)源:http://dev.yesky.com/95/35497095.shtml

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

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

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

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

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

     

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

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

      在通常情況下48dp在物理屏幕上差不多是9毫米的大小,而在UI設(shè)計(jì)中所有觸摸類控件的推薦大小在7毫米到10毫米之間,因?yàn)樵谶@個(gè)值之間會(huì)使控件的點(diǎn)中率大大增加,在視覺(jué)上也會(huì)比較舒服。

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

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

      再給個(gè)完整的例子,很簡(jiǎn)單,大家自己分析:

    獲取更多更新的UI設(shè)計(jì)資訊請(qǐng)關(guān)注微信公眾平臺(tái):藍(lán)藍(lán)設(shè)計(jì)

    日歷

    鏈接

    個(gè)人資料

    存檔

    主站蜘蛛池模板: 国产精品丝袜久久久久久不卡| 欧美激情视频精品一区二区| 国产成人精品免费大全| 无码国产69精品久久久久网站| 91精品日韩人妻无码久久不卡| 精品人妻中文字幕有码在线| 久久久久亚洲精品天堂久久久久久 | 亚洲精品无码专区久久久| 国产精品 码ls字幕影视| 国产精品日本欧美一区二区| 欧美jizzhd精品欧美| 中文字幕日韩精品在线| 免费精品久久久久久中文字幕 | 国产精品9999久久久久| 亚洲精品无码久久一线| 欧美日韩国产精品自在自线| 国产精品自在欧美一区| 99久久精品费精品国产| 亚洲国产精品国自产电影| 精品国产网红福利在线观看| 99精品视频免费| 99久久免费国产精品热| 国产精品igao视频网| 精品爆乳一区二区三区无码av| 日韩精品无码免费一区二区三区| 无码精品人妻一区二区三区中| 色婷婷在线精品国自产拍| 亚洲AV乱码久久精品蜜桃| 伊人久久无码精品中文字幕| 亚洲一日韩欧美中文字幕欧美日韩在线精品一区二 | 国内精品国语自产拍在线观看| 国产精品高清在线| 国产精品白丝AV嫩草影院| 91人妻人人澡人人爽人人精品| 久久精品国产免费| 麻豆精品久久久一区二区| 香蕉久久夜色精品国产小说| 国产A∨国片精品一区二区| 国产精品白丝jkav网站| 精品精品国产理论在线观看| 免费精品精品国产欧美在线 |