恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
终极指导:怎么理解px和dp,看这一篇就够了
0.0°
2018-03-22 原创文章 教程 举报 5717 24 18 0



Image title

先聊聊熟悉的几个单位


围绕着各种屏幕做设计和开发的人会碰到下面几个单位:in, pt, px, dpi,dip/dp, sp


下面先简单回顾下前四个单位:


“in”

inches的缩写,英寸。就是屏幕的物理长度单位。一英寸等于2.54cm。比如Android手机常见的尺寸有5寸、5.5寸、6寸等,这里的长度都是指手机对角线的长度。


“pt"

“points” 的缩写,点。一个点等于1/72英寸,所以“点”也是个长度单位而已。


"px"

“pixel” 的缩写,像素。是画面显示的基本单位,真实的像素并不是点或者方块(虽然有时这样显示),也没有实际固定长度,只是一个抽象的取样。设计中的像素和实际显示屏上的像素相对应。


屏幕的分辨率一般就描述为“宽向像素数X纵向像素数”。比如 Android手机常见的分辨率有:320 X 480, 480 X 800, 1080 X 1920等。


"dpi"

"dots per inch" 的缩写,“每英寸的像素数”,即像素密度。下图展示了600 dpi和1200 dpi的对比,明显后者的像素更加密集。

Image title


安卓手机种类多样,有各种屏幕像素密度。比如120dpi是低密度(ldpi)类型,160dpi 是中密度(mdpi),240dpi是高密度(hdpi),320dpi是超高密度(xhdpi),480dpi是超超高密度(xxhdpi)。



为什么要引入 dp 这个单位


像素(px)是设计师们熟知的单位,比如画图自定义尺寸的时候就来个宽xx像素乘以高xx像素,好像一直没什么问题。

不过,如果你仔细观察一下就会发现,在做UI设计时,设计工具给出的默认手机尺寸并不是按像素数来计算的。


以墨刀为例,提供的三星的尺寸是360 x 640。

Image title


但这当然不是三星屏幕的像素数。


(否则三星要哭晕在厕所)


查了下三星Galaxy S5/S6/S7屏幕的实际像素数是这样:

Image title



那360*640是什么?

细心的同学可能发现了…

即使S5和S6/7的像素分辨率不一样,但分辨率左边一栏都写着360 x 640 dp。


所以,什么是 dp,为什么要有 dp?


答:是为了设计图能适配不同像素密度的屏幕。




举个栗子吧,如果设计师用像素为单位画图,画了一个4px * 4px的 icon,这样的 icon 放在160dpi和320dpi的两种屏幕上展示,会变成大概这样:

Image title


比例完全失调!


因此,干脆就不以像素为单位直接画图,而是引入一个新的单位 dp。dp 全称是 “density- independent pixel”,即“密度无关像素”,所以也可以缩写成 dip,不过 dp 更常用。


定义dp为 160dpi 时的一个像素大小;那么到 320 dpi 时,它就相当于两个像素。

两者的数值关系如下:

px= dp *(dpi/160)


这样的话,假如做一个50*50dp的icon,放到160dpi的屏幕上就是50px*50px,放到320dpi的屏幕上就是100px*100px。各元素的布局和比例便不会失调。


所以设计师在给开发切图时,经常会需要切一倍图、二倍图和三倍图,以满足不同像素密度屏幕的需要。墨刀的切图功能就能让你一键切出一倍、二倍和三倍图,没有繁琐操作。

Image title


这里插一句 sp 这个单位,sp 跟 dp 类似,全称是 scale-independent pixel (也会缩写为 sip), 即“独立比例像素”sp 主要用作字体的单位,开发用此单位设置文字大小,这样在不同像素密度的屏幕上能进行同比例的扩大缩小。


OK,回到 dp。


既然知道了要用dp为单位画图,那面对各种手机型号和分辨率,画图前需要把px换算成dp。不过,贴心的墨刀已经把这些换算给做好啦!


Image title


考虑到今年全屏手机雨后春笋般涌现出来,墨刀也及时在Android设备默认尺寸中添加了Google Pixel 2 和 Google Pixel 2XL 的 dp 尺寸,让你免去px和dp的换算,轻松进入画图流程。


当然,如果真的遇到了要为某个小众机型适配而没有默认选项,那就选择最下面的customize自定义好了。怎么算? 非常容易。


查到某款机型的分辨率为a*b px,该机型的像素密度dpi(也会写作ppi)为c。


那么需要自定义的dp尺寸为:

宽= a/(c/160) ,高=b/(c/160)



好了,搞定!

更新:2018-03-22

收藏

24人已收藏

墨刀_MockingBot

在线产品设计写作一体化平台

  • 494

    作品

  • 1448

    粉丝

  • 3

    关注

  • 产品经理和设计师谈恋爱,看得我比“老坛酸菜”还酸!
  • Figma”断供“后:墨刀能为中国企业做什么?
  • 产品经理干久了,有哪些后遗症?
  • 超实用的后台原型,产品大佬的摸鱼技巧都在这里!

    猜你喜欢

      2018-03-22 原创文章 教程 举报 5717 24 18 0

      终极指导:怎么理解px和dp,看这一篇就够了

      0.0°

      你确定要举报终极指导:怎么理解px和dp,看这一篇就够了

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年03月22日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      18
      24
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录