为什么Sketch中预设的画板尺寸小于真实分辨率?这个问题已经有几百个初学者问过了,每次都要费很大的力气去解释,但是静电一天问两三次甚至更多次同样的问题是受不了的。然后,在这篇文章中,我们来解释一下为什么预设画板这么小。
这是有原因的。素描有错吗?
有太多刚开始写生的朋友有这样的问题。为什么我在素描中创建画板,软件预设的画板尺寸总是那么小?例如,iphone6的真实分辨率是750-1334像素,但草图中Artboard的大小实际上是375-667像素。其他型号的预设尺寸有问题。素描有错吗?
PX和PT,别傻了,糊涂了。
我们必须了解最基本的原则,这样我们才能适应不断变化的设计。首先我们普及两个计量单位,—— PX和PT。你可能对PX很熟悉,它是英文中pixel的缩写。对于静电最通俗的解释,请找一个放大镜(不是电脑里的放大镜,而是真正的放大镜),然后对准你面前的显示器或者手机的屏幕,大多数显示器都会在放大镜下一个一个的显示点。这就是我们通常所说的像素概念。在物理分辨率为1080-1920的显示器中,水平方向有1920个点,垂直方向有1080个点。这些点通过显示器的光学特性为我们形成不同的图像。
请注意,这些点的单位面积在不同尺寸的显示器上是不一样的。比如同分辨率的22英寸1080p液晶显示器和27英寸液晶显示器,我们可以通过仔细观察找出这两款显示器的像素分布。直观来看,27英寸1080p分辨率显示器的显示效果明显不如22英寸1080p显示器,比如颗粒感严重等。一个重要原因是两块液晶面板中的“像素”颗粒大小不同。
因此,像素的单位是一个相对单位,我们不能用绝对的测量单位如厘米和毫米来测量它的长度或宽度,因为1个像素只代表一个单位的“点”。
另一个重要的单元是PT,它也用于iOS的开发。与px这样的相对单位不同,PT(点)是一个绝对单位。中文名为“磅(或磅)”,1PT等于1/72英寸。我们也用简单直观的例子来演示。
如果你有两款不同型号的iPhone,比如iphone6、iphone5或者iPhone 4。静电建议使用ip6和ip5或ip6 plus来开启相同的应用。同时,准备一把尺子。
比如我们用得最多的QQ音乐,打开,用尺子量一下顶部“音乐堂”字样的大小。经测量,音乐厅文字宽度为8毫米。这时,打开不同尺寸的iphone6plus或ios手机,也测量一下它的尺寸。我们发现音乐厅文本的大小约为8毫米。如果你觉得这个方法不合适,可以让iOS开发者为不同尺寸的机型写两个相同的文件,安装在两台手机上,保证这个文件中的字体使用一个字体大小,比如30PT。跑进两台手机,用尺子测量,发现它们的物理尺寸完全一样。
请记住px是相对单位,pt是绝对单位(类似的单位有厘米、毫米等。).在屏幕密度不确定的情况下,px和pt之间没有可比性。
为什么用3XX像素作为素描设计的底宽?
原因一:
如何转换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作为基数,转换真的很方便。
下图是设计稿输出大小和分辨率的对照表。
第二个原因: