深圳网络建设_深圳网络营销_深圳池喏网络科技有限公司
    主页 / 资讯 / 新闻 / 一文让你看懂dpi、ppi、dp、px、分辨率、@1x、@2x、@3x

一文让你看懂dpi、ppi、dp、px、分辨率、@1x、@2x、@3x

2020-09-07 18:05


  从事设计以来,这些单位概念,总是反复循环的遗忘混淆,于是下定决心整理一份自己容易理解的笔记,分享出来供大家一起参考。如有不对的地方,请多多指教~

  px:像素

  分辨率:屏幕水平方向上的像素 × 垂直方向上的像素,单位为px;

  例:iphone5的分辨率为:640 × 1136 px

  ppi:Pixel per inch,每英寸像素数,为像素密度,单位:像素/每英寸

  针对显示器设计时, ppi=dpi

  dpi:dots per inch,每英寸像素点,为像素密度,单位:像素/每英寸;

  dpi=√ (屏幕水平像素^2 + 屏幕垂直像素^2) / 屏幕英寸数

  dp:在Android开发中,使不同密度的屏幕显示一致的UI元素。称“密度独立像素”

  dp=(dpi/(160像素/英寸))px

  @1x、@2x、@3x:在ios开发中,为使在不同设备下显示一致的UI元素,将iphone手机分为了3类,对应称之为一倍图、二倍图、三倍图

  在Android开发中的应用

  

  如上图所示,为方便开发,Android将主流设备分为了mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi五大类。

  例如:华为 Nova手机

  主屏尺寸:5英寸 1080x1920像素

  则:ppi=dpi=√ (1080^2 + 1920^2) / 屏幕英寸数 ≈ 440像素/每英寸

  dp=(440/(160像素/英寸))px ≈ 3px

  其实当我们计算出dpi的时候,通过上表就可以知道,该屏幕属于xxhdpi屏,俗称3倍图

  通过计算可以得出,一般情况下:

  360px 宽的屏幕为mdpi(1倍图)

  480px 宽的屏幕为hdpi(1.5倍图)

  720px 宽的屏幕为xhdpi(2倍图)

  1080px 宽的屏幕为xxhdpi(3倍图)

  1440px 宽的屏幕为xxxhdpi(4倍图)

  Android设计中常见的尺寸与距离:

  顶部状态栏高度:24dp

  Appbar最小高度:56dp

  底部导航栏高度:48dp

  悬浮按钮尺寸:56x56dp/40x40dp

  用户头像尺寸:64x64dp/40x40dp

  小图标点击区域:48x48dp

  侧边抽屉到屏幕右边的距离:56dp

  卡片间距:8dp

  分隔线上下留白:8dp

  大多元素的留白距离:16dp

  屏幕左右对齐基线:16dp

  文字左侧对齐基线:72dp

  栅格系统的最小单位是8dp, 一切距离、尺寸都应该是8dp的整数倍

  所有可操作元素最小点击区域尺寸:48dp × 48dp;如实在满足不了可缩小视觉控件的大小,但是需要保留点击区域的大小

  在iOS开发中的应用

  

  如上图所示,为方便开发,苹果将设备分为了@1x、@2x、@3x三大类。

  除了状态栏高度无法改变,别的可以根据实际设计进行微调。

  在@2x屏幕下,所有可操作元素最小点击区域尺寸为88px;如实在满足不了可缩小视觉控件的大小,但是需要保留点击区域的大小

  根据上表所示,我个人习惯用iPhone5作为设计原始稿尺寸,所有icon都用矢量的图形元素进行绘制,方便后续的放大缩小处理。之所以用iPhone5的尺寸,是因为,5和6同为@2x,如用6的尺寸来设计,容易使5的界面元素太过拥挤。


上一篇:定制网站建设那些你不能错过的细节


下一篇:网站设计:网络公司网站建设的三个关键点


服务支持

我们珍惜您每一次在线询盘,有问必答,用专业的态度,贴心的服务。

让您真正感受到我们的与众不同!