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

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

  事出有因,Sketch错了吗?

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

  PX和PT,别傻傻地分不清

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


  请注意, 在不同尺寸的显示器上,这些点的单位面积并不是一样的。比如一台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。在两个手机中运行并用尺子测量,我们发现他们的物理尺寸完全一样。


  请大家记住一点,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作为基数,换算确实方便。

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


  原因二

  对于iOS来说,同样沿袭了这样的概念,与安卓不同,320宽的基准分辨率下导出的素材为@1x,也叫做一倍图。那么在iphone4,iphone5或者iphone6上使用的图则是@2x,也叫做二倍图,同理,iphone6 plus为@3x三倍图。大家应该都知道对应分辨率与导出图片的对应关系。如果使用640宽或者750宽为基准作图,当然不是不可以,只不过我们在输出@3x图的时候,是不是要乘以1.5呢? 如果你一定要用@3x三倍图的分辨率作图,那么最终要生成二倍图的时候,是不是要把输出尺寸乘以三分之二呢?

  如果是1.5还好,那么三分之二到底是什么鬼的倍数,0.6666666?有强迫的设计师真的看的过去么?

  但是,如果我们使用一倍图设计,那么1X2=@2x,1X3=@3x, 多么的简单方便又容易理解不是么?

  再加上sketch是全矢量绘图软件,不管你怎么放大缩小,导出的位图也是不会虚的。

  原因三

  在开发工程师眼中,你如果使用640的分辨率作图,那么按原大小标注设计稿中的尺寸的话,他们同样在开发环境中是要换算为一倍尺寸的,比如你标注了字号为40px,那么最终开发工程师写在代码里的就是20pt,除以2的关系。

  但是呢,如果使用一倍基准分辨率作图,那么就不用除以2啦,所有尺寸开发工程师直接拿过去随取随用,多么方便简单。相信之前跟随静电的xcode教程做过demo的小伙伴,一定对xcode中的尺寸设定印象深刻对吧。

  要了解原理,建议大家用一用xcode,亲自体验一下开发工程师工作的原理,相信你的这些问题都可以迎刃而解。

  使用一倍基准分辨率作图 —— 你的明智之选

  sketch作为一款纯矢量的移动端UI设计软件,不管是从设计还是到后期与开发工程师的配合方面,都严格遵从开发原理,这种设计方法可以最大限度保证设计稿的复现,同时也可以减小文件体积和系统资源消耗,不管是从哪个方面看,都是设计师制作UI界面的明智之选。不过,基于位图输出的photoshop就没这方面的福利了,虽然photoshop CC 2015加入了多画板功能,不过然并卵。一个文件中放置五六张画板对于sketch来说无比轻松,且输出文件只有几M,但反观photoshop,动辄几个G的文件体积和巨大的系统资源消耗,恩哼,你懂。

  最后总结一下原因,设计师使用一倍基准尺寸作图,主要是方便,单位转换方便,输出切图方便,理解简单。对于工程师,他们不用再进行复杂的换算,有助于完美复现设计稿。

  因此,不管是国内还是国外,越来越多的设计师开始使用一倍基准尺寸设计移动界面,还在犹豫?就差你了。如果你身边的朋友还在纠结于这个问题,特别是那些刚刚从photoshop转到sketch的小伙伴,速度把这篇文章转发给他们看吧。

时间: 2024-11-10 05:27:56

为何SKETCH预置画布尺寸比真实分辨率小?的相关文章

CentOS在虚拟机里面分辨率小如何解决

曾经一直都对redhat很钦佩,也一直很喜欢redhat,只是最近一次电脑出了状况,系统好多东西都没了,尤其是redhat虚拟机没有了. 于是乎就想去官方网站上下载,没想到遗憾的是只提供旧版本的下载. 无奈之下直接换成了CentOS,还好都是基于同一个Linux内核的. 安装过程和redhat类似,使用也差不多. 只是用起X来分辨率较小,其实是VMtools的问题. 以下是解决方案: 1.启动CentOS,安装VMtools 点击虚拟机 选择 安装VMWare Tools 即可挂载VM工具 2.

SKETCH秒杀PS CC 2015新功能的7个地方

  相信同学们都想知道新版Photoshop的使用体验,@JingDesign 同学在上手感受了Photoshop CC 2015之后,发现这次比较抢眼的几个新功能都很捉急,单从UI设计方面说,Sketch压倒性完胜.特别认真的一篇评测文,强烈推荐 >>> 如果要问大家,这些日子哪件事在设计圈里最火,那你会想到什么?是各种让人炫目的动效设计,还是一个能说会道的"奇才"逆袭腾讯的故事? 不不不,都不是,他们比起这个来,简直是小巫见大巫.6月中旬,设计软件界的大拿Adob

SKETCH手把手教你绘制抢眼有力的长邮件

  前言 如果你曾经参加过每周邮报的设计工作的话,你就会知道毫无疑问这是营销策略中的关键一环,它们能够帮助我们和潜在的用户建立直接联系.但是,我们必须格外注意如何设计它们,以使得能够吸引收件人的眼球,最重要的是达成我们的营销目的. 这里是这个设计练习的背景:想象我们是一家提供在线课程学习的公司,我们想要与我们的潜在用户取得联系,向他们展示我们的平台能带来的好处.在这种情况下,我们可以使用Sketch设计一个简洁的但有效的邮报来达到我们的目标. 我们将使用到Sketch中最常用的几个功能来创建我们

如何选择合适的显示器分辨率?

  如何选择合适的显示器分辨率?选择合适的分辨率的方法又是什么呢,具体内容如下所示: 对于17英寸CRT显示器来说,若设置为1600×1200的分辨率,是否意义不大?另外我发现液晶显示器若设定为不同的分辨率时,会出现模糊的情况,不知原因何在? 合适的分辨率与显示器的大小有直接关系,对CRT显示器来说,一般来说14英寸以下的以640×480为宜,不可超过800×600,15英寸则设为800×600为最佳,不要超过1024×768.而17英寸显示器的分辨率则以1024×768最合适,如果再高,刷新频

聊聊HTML5小游戏的制作技巧及经验

  今天腾讯的同学从一款HTML5小游戏<植物大战僵尸>说起,分享一些动画实现的知识(动画可控性.如何兼容不同分辨率.如何识别平板手机等),附上众多实现小技巧,来收 >>> hello~大家好,我是黑米! O(≧▽≦)O 今天我来跟大家分享一些动画实现的相关知识,希望大家能够支持(鞠躬-- 我很喜欢很喜欢看动画片,一直有做出好看动画片的梦想--所以最近做了不少动画效果来玩儿,也为自己以后可以做出伟大的动画片打好基础! Web端动画表现有不少办法,我列一些常见的,然后再说说在实

Photoshop制作时针小图标技巧

作者虽然没有详细介绍每一步制作方法.不过分解图非常有用,一看就知道整个图标的构成,然后按一定的顺序慢慢刻画即可. 最终效果 <点小图查看大图> 1.首先我们来分解这个图标,观察其各个组成部分,然后我们分层制作. 2.接下来我们先制作"时钟底座",这个图层看起来很复杂,实际上整个效果只用一个图层便能完成.以下截图的参数仅供参考,因为你新建圆的大小将会影响这些参数数值,具体大家自行测试吧. 新建画布,拖入背景素材,使用椭圆工具建立一个椭圆,双击此图层为其添加图层样式. <

win7系统自带的画图工具怎么调节画布大小?

  win7系统自带的画图工具怎么调节画布大小?           1.如图,打开win7系统画图软件后,感觉画布较小. 2.如果想快速更改画布大小,可以将鼠标指针指向画布边角或底部.侧面处的小正方形处. 3.指向画布边角处的小正方形处后,鼠标指针会改变形状.如图:指向边角处变成图中所示形状. 4.指向底部变成图中所示形状. 5.指向侧面变成图中所示形状. 6.鼠标指针改变形状后,按住鼠标左键不放同时拖动鼠标,即可更改画布大小.

如何自适应不同的分辨率界面?

  首先呢来看一张图: 这是2个半月腾讯游戏官网的分辨率数据,可以看出来PC端里1024*768占20%.1920*1080占14%.而这2个分辨率的显示宽度相差了接近一倍. 而现在设计师的设计稿普遍输出尺寸都是1920,所以设计师经常也会担心:小分辨率下能看到吗?或者需要为手机端单独做一版吗?所以我们需要用一些技巧来让大多数用户能看到的页面效果是一样的. 一.PC端 [举例1]http://up.qq.com/2014/life/ 1920*1080下显示. 设计的很美观 但是如果直接按原始大

如何选择液晶显示器的分辨率

  不论是LCD液晶显示器,或一般的CRT显示器,分辨率是显示器主要的考查标准.因为显示器一定要能支持应用软硬件所需的分辨率.传统CRT显示器对于所支持的分辨率较有弹性.显示器的影像主要是由许多堆积的点或线组成的像素(Pixels)而产生的,因此像素的多少便是影响分辨率的重要因素. LCD所支持的显示模式不像CRT那么多.LCD只支持所谓的真实分辨率,可比喻为一般CRT显示器的最高分辨率.其主要的不同点是,LCD液晶显示器只有在真实分辨率下,才能显现最佳影像. LCD显示器呈现分辨率较低的显示模