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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
dpi、ppi、dp、px、分辨率、@1x、@2x、@3x
0.0°
2016-11-09 原创文章 规范/资料 举报 5986 26 16 2

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




  • 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开发中的应用

Image title

如上图所示,为方便开发,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开发中的应用

Image title

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


除了状态栏高度无法改变,别的可以根据实际设计进行微调。
在@2x屏幕下,所有可操作元素最小点击区域尺寸为88px;如实在满足不了可缩小视觉控件的大小,但是需要保留点击区域的大小


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




参考资料:
博客:人间奇迹  http://www.cnblogs.com/yaozhongxiao/archive/2014/07/14/3842908.html
酷友:chan奕迅  http://www.zcool.com.cn/article/ZNzEwMjg=.html
MD设计规范:https://material.google.com/layout/units-measurements.html#units-measurements-designing-layouts-for-dp
iOS设计规范:https://developer.apple.com/ios/human-interface-guidelines/graphics/app-icon/


更新:2016-11-09

收藏

26人已收藏

  • 7

    作品

  • 8

    粉丝

  • 14

    关注

  • 还记得那年的梦游先生么?
  • 书法&油画
  • 盘子&熊熊&面具 手绘
  • 东骏破碎锤H5活动页设计
相关标签
设计规范AndroidiOS

    猜你喜欢

      2016-11-09 原创文章 规范/资料 举报 5986 26 16 2

      dpi、ppi、dp、px、分辨率、@1x、@2x、@3x

      0.0°

      你确定要举报dpi、ppi、dp、px、分辨率、@1x、@2x、@3x

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2016年11月09日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      16
      26
      2

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

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

      登录

      手机号

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

      登录
      第三方账号登录