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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
界面设计-基础尺寸单位的换算公式
0.0°
2018-04-24 原创文章 规范/资料 举报 4901 5 10 0

    刚开始学习做设计图的时候,遇到的第一个难题是页面尺寸的设置。切换Units后,发现不同的选项,对应的单位也不同——pt、p0、in、mm、cm、px


经过学习,决定把自己理解的内容写下来,欢迎大家一起交流,并批评指正。


屏幕实际尺寸(pt):

指手机对角线的物理尺寸,绝对大小。pt,常用于印刷业。

单位换算:1inch=2.54cm=72pt


分辨率(px):

指手机屏幕的像素点数,相对大小。以分辨率1024x768 屏幕来说,屏幕的X轴每一条水平线上有1024个像素点,Y轴上有768个像素点。


分辨率又可以分为图片分辨率、和屏幕分辨率2类。

图像分辨率 泛指单位英寸中所包含的像素点数,其定义更趋近于分辨率本身的定义

屏幕分辨率 特指显示器所能显示的像素有多少,屏幕图像的精密度。由于屏幕上的点、线和面都是由像素组成的,显示器可显示的像素越多,画面就越精细,同样的屏幕区域内能显示的信息也越多,所以分辨率是个非常重要的性能指标之一。工作中常用的是屏幕分辨率。


密度(dpi/ppi):

其实dpi、ppi概念上还是有区分的

DPI(Dots Per Inch):每英寸点数,表示指屏幕密度。是测量空间点密度的单位,最初应用于打印技术中,它表示每英寸能打印上的墨滴数量。较小的DPI会产生不清晰的图片

PPI(Pixels Per Inch):图像分辨率;是每英寸图像内有多少个像素点,分辨率的单位为ppi,通常叫做像素每英寸。图像分辨率一般被用于ps中,用来改变图像的清晰度。


那ppi是怎么计算得到的?

计算公式:

PPI=√(X^2+Y^2)/ Z

(X:长度像素数;Y:宽度像素数;Z:屏幕大小)

就是用手机分辨率的长的平方加上宽的平方和再开方,再除以手机屏幕尺寸


举个栗子:

iPhone4s: 960X640, 326ppi

计算:

ppi=√(960^2+640^2)/ 3.5

计算约为330与官方的326差别不大


小米3:

5英寸屏幕,分辨率1080 × 1920,440ppi

计算:

ppi=√(1080^2+1920^2)/ 5=440ppi


图片解释一下这个关系(图片来自网络):


单位换算:

1inch=72pt=96px,1pt=1px* 3/4 ,1em=1px*16


ps:解释来自网络

“Ems”(em): 其实就是%,1em就等于当前字体的大小,被用于网页文件媒介的可缩放的单位(即相对单位)。

因为当网页中的字体没有给出实际的px或pt定义的话,会有一个默认值:12pt即16px,对应浏览器中“字体大小”中的“中等”,以这个为标准,变大或缩小。(只适用于IE,在FF中,即便定义px或pt也都可以变大变小)


DP:安卓专用长度单位。以160 DPI屏幕为标注,则1DP=1PX

计算公式:dp x dpi/160=px

例:以720x1280px (320dpi)为例计算 1dp x 320 dpi/=2px


SP:安卓专用字体单位。以160 DPI屏幕为标注,则1SP=1PX

计算公式:sp x dpi/160=px

例:以720x1280px (320dpi)为例计算 1sp x 320 dpi/=2px


小结:

px:pixel,像素,屏幕上显示的最小单位,是相对值;是设计师在ps里常用单位。

pt:point,是一个标准的长度单位,1pt=1/72英寸,用于印刷业,是绝对值;

PPI:pixel(dot)per inch,每英寸的像素(点)数,是一个率,表示“清晰度”,“精度”;值越高,越清晰。一般被用于ps中,用来改变图像的清晰度。

DPI:Dots Per Inch,每英寸点数,表示指屏幕密度。最初应用于打印技术中,它表示每英寸能打印上的墨滴数量。较小的DPI会产生不清晰的图片。

em:即%,在CSS中,1em=100%,是一个比率,结合CSS继承关系使用,具有灵活性。

DP:安卓专用长度单位。

SP:安卓专用字体单位。


2013.12.24




更新:2018-04-24

收藏

5人已收藏

Pephy

碎片化知识→系统化知识

  • 8

    作品

  • 3

    粉丝

  • 9

    关注

  • 【有效设计法】——投放页的改版
  • 组件化思维的学习之路(一)
  • 界面设计-iOS组件概述(AD、Web更新中)
  • 界面设计-设计流程标准化
相关标签
资料

    猜你喜欢

      2018-04-24 原创文章 规范/资料 举报 4901 5 10 0

      界面设计-基础尺寸单位的换算公式

      0.0°

      你确定要举报界面设计-基础尺寸单位的换算公式

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2017年12月01日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      10
      5
      0

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

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

      登录

      手机号

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

      登录
      第三方账号登录