蒲公英联盟提供ghost win10,ghost win7,xp,装机纯净版,64位旗舰版,绿色软件,免费软件下载基地!

当前位置:主页 > 教程 > 软件教程 >

在不确定屏幕密度的情况下

来源:蒲公英系统┆发布时间:2018-09-19 09:00┆点击:

  为什么Sketch中预置的画板尺寸比真实分辨率小?这个问题被成百上千的初学者问起过,每次都要费劲口舌来解释,可是静电实在架不住每天两三遍甚至更多人问起同样的问题。那么,就在这篇文章中,让我们好好来解释一下,为什么预置画板会这么小。

  事出有因,Sketch错了吗?

  有太多太多刚刚上手sketch的小伙伴们都有这样的问题,为什么我在Sketch中建立画板,软件预置的Artboard尺寸总是那么小呢?比如iphone6的真实分辨率是750-1334像素,但是sketch中的Artboard尺寸居然是375-667像素。同样其他机型的预置尺寸也有问题,是sketch出错了吗?

  PX和PT,别傻傻地分不清

  我们必须了解最最基本的原理,才能在设计中以不变应万变。首先我们来普及两个度量单位 —— PX和PT。PX大家可能比较熟悉,就是像素,英文pixel的简称。静电做最最通俗的解释,请找一个放大镜(不是电脑中的放大镜,是真实的放-大-镜),然后对准自己面前的显示器或者手机屏幕观看,大部分显示器会在放大镜下出现一个一个的点。这就是我们平时所说的像素的概念。在一台物理分辨率为1080-1920的显示器中,横向分布1920个点,纵向则有1080个点。这些点通过显示器的光学特性,为我们组成不同的图像。

为何SKETCH预置画布尺寸比真实分辨率小? sanl

  请注意, 在不同尺寸的显示器上,这些点的单位面积并不是一样的。比如一台22英寸的1080p液晶显示器与一台同样分辨率的27英寸的液晶显示器,我们通过仔细观察,可以发现这两台显示器的像素分布。直观感受就是,27英寸1080p分辨率的显示器的显示效果明显逊于22英寸1080p显示器的效果,比如颗粒感严重等等。 一个重要的原因就是,两台液晶面板中的“像素”颗粒大小不一。

  由此可见,像素这个单位是一个相对单位,我们不能用厘米,毫米等等这些绝对度量单位来衡量他的长度或者宽度,因为,1像素只代表一个单位的“点”。

  另一个重要单位是PT,这个单位也是iOS开发过程中使用的单位,与px这样的相对单位不同,PT(Point)是一个绝对单位,中文名字是“磅因(或者磅)”,1PT等于1/72英寸。我们同样用简单直观的例子来演示。

  如果你手头有两部不同型号的iPhone,比如iphone6,iphone5,或者iphne4。静电的推荐是用一部ip6和一部ip5或者ip6 plus,打开同样一款应用。同时准备好一把尺子。

  比如我们使用最多的QQ音乐,打开它,使用尺子分别测量最上方title“音乐馆”文字的尺寸。经测量,音乐馆文字的宽度为8mm,此时打开iphone6plus或者不同尺寸的ios手机,同样测量它的尺寸,我们发现,“音乐馆”文字的尺寸也约为8mm左右。如果大家觉得此方法并不合适,可以请iOS开发人员分别写两个针对不同尺寸机型适配的同一个文件,并在两部手机安装,确保这个文件中的字体使用一个字号,比如30PT。在两个手机中运行并用尺子测量,我们发现他们的物理尺寸完全一样。

jd20150813 (3)

  请大家记住一点,px是相对单位,pt为绝对单位(类似单位为厘米,毫米等等)。在不确定屏幕密度的情况下,px与pt没有任何可比性。

  为什么使用3XX像素作为sketch设计稿的基准宽度?

  原因一

  对于px与pt如何转换,涉及原理已经超出本文范围,这里简单的告诉大家,当dpi=160的时候,1dp=1px=1pt(作者经验结论)。那么在这里我们要引出为什么使用375-667这样的尺寸来做设计了,因为在这种情况下,也就是mdpi的分辨率(约320-480)时,1dp=1px=1pt。

  简单来计算下,当分辨率增大,比如增大到640-960px时,在密度不变的情况下,2px=1pt,因为像素点密集了,所以需要更多的点才能充满单位物理尺寸。这也就是为什么我们会觉得iphone4的画面比3GS的画面要细腻的原因,因为dpi(ppi)升高了。(dpi或者ppi为每英寸的点或者像素,代表密度。)

  所以,320这个宽度(3XX)就作为基准宽度,也叫做一倍尺寸沿袭下来。因为使用1作为基数,换算确实方便。

  下图是设计稿输出尺寸与分辨率对照表。

jd20150813 (4)

  原因二

尚未注册畅言帐号,请到后台注册