【UXRen原创】Units and measurements——Material Design专题分享(13)

md-07-00

非凡回来了,今天讲几个概念,主要和UI有关系,理解这些概念的话对适配屏幕和切图很有好处。

  • Pixel density
  • Density-independent pixels(dp)
  • Scalecabel pixels(sp)
  • Designing layouts fordp
  • Image scaling

Pixel density

像素密度,指一英寸屏幕下的像素数量。

如:160dpi=一英寸屏幕包含160个Pixl.

不同分辨率的屏幕下,相同像素大小的元素,在高分辨率下,显示比较小;在低分辨率屏幕下显示比较大。在几年前我们会发现安卓屏幕分辨率低的手机下载应用,有些应用没有做适配,就会出现只显示局部的现象,无法正常使用,这就是屏幕分辨率不同(像素密度不同)导致的。

下面看两站照片:

一个UI element (such asa Button),appear physically larger on low- density and smaller on hight-density screens.

md-13-01

高分辨率

md-13-02

低分辨率

它的计算公式:

  • dpi = screen width (or height) in pixel/screen width(or height) in inches
  • dpi = 屏幕像素宽度(或高度)/ 屏幕英寸高度(或高度)

 

Density-independent pixels(dp)

独立像素密度是为了在不同像素密度的屏幕中,能够均匀的显示。是一个过度单位,在开发中并没有这个概念。

这是一个能适应任何屏幕的的单位。在开发安卓应用的时候,非常实用。

如下图,实用像素单位和DP单位的效果演示。

md-13-03

这里有一个表:

md-13-04

如果有三个屏幕,全部1.5英寸宽度,在不同的屏幕分辨率下,屏幕宽度都是240dp.

一个DP就相当于160dpi下的一个像素。这就可以计算出这个单位。

DP=(widthin pixels * 160)/dpi

 

Scalecabel pixels(sp)

SP是专门用于字体的,一个sp就相当于一个dp.

他们主要的不同在于SP是用于字体设置的,为了让用户设置字体大小的时候仍然能看到适合的显示效果。

 

Designing layouts for dp

在设计界面的时候使用这个公式:

  • DP=(widthin pixels * 160)/dpi

比如一个32 *32 PX 的icon 在320dpi下等于16*16dp.

 

Image scaling

图像缩放就用这个表就好:

md-13-05

不用再纠结不会切图了,不用再问什么是1.0x 1.5x 这些事什么意思了。不想去理解公式和原理就直接看这个表吧!其实也很容易理解总结一下:

  • Pxiel:是指屏幕像素
  • PxielDensity:是指像素密度,在英寸屏幕宽度或高度下,有几个像素。
  • ScaleabelPixels:是专门针对字体的单位,SP。和DP差不多。
  • Density-independent pixels:指独立的像素密度,DP,它和PX的换算是一个DP等于160dpi(像素密度)下的一个像素。

 

 

feifan-logo
作者:邬非凡,现互联网交互设计师,崇尚自然设计并将生活情感与设计相结合,目前死磕Material Design 分享和学习。非凡语录“享受生命的过程”
顶部图片来源:http://cdn.webadictos.co

======================================================================================= 不知不觉本网站已经一岁半了, 在这里小编要感谢那么一如既往支持本站的油茶人。 同时也欢迎各位喜欢13太保的同学们把自己收集的好资源一起分享给更多油茶人,如果有意愿在网站发布原创性的文章也欢迎随时和我们联系!我们收到邮件后会认真的查看和回复。 投稿邮箱:contact@13tech.com.cn

=======================================================================================

 

发表评论

您的电子邮箱地址不会被公开。