童话说说技术创业美文职业
投稿投诉
职业母婴
职场个人
历史治疗
笔记技能
美文纠纷
幽默家庭
范文作文
乐趣解密
创业案例
社会工作
新闻家居
心理安全
技术八卦
仲裁思考
生活时事
运势奇闻
说说企业
魅力社交
安好健康
传统笑话
童话初中
男女饮食
周易阅读
爱好两性

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

12月4日 尘世客投稿
  为什么Sketch中预置的画板尺寸比真实分辨率小?这个问题被成百上千的初学者问起过,每次都要费劲口舌来解释,可是静电实在架不住每天两三遍甚至更多人问起同样的问题。那么,就在这篇文章中,让我们好好来解释一下,为什么预置画板会这么小。
  事出有因,Sketch错了吗?
  有太多太多刚刚上手sketch的小伙伴们都有这样的问题,为什么我在Sketch中建立画板,软件预置的Artboard尺寸总是那么小呢?比如iphone6的真实分辨率是7501334像素,但是sketch中的Artboard尺寸居然是375667像素。同样其他机型的预置尺寸也有问题,是sketch出错了吗?
  PX和PT,别傻傻地分不清
  我们必须了解最最基本的原理,才能在设计中以不变应万变。首先我们来普及两个度量单位PX和PT。PX大家可能比较熟悉,就是像素,英文pixel的简称。静电做最最通俗的解释,请找一个放大镜(不是电脑中的放大镜,是真实的放大镜),然后对准自己面前的显示器或者手机屏幕观看,大部分显示器会在放大镜下出现一个一个的点。这就是我们平时所说的像素的概念。在一台物理分辨率为10801920的显示器中,横向分布1920个点,纵向则有1080个点。这些点通过显示器的光学特性,为我们组成不同的图像。
  请注意,在不同尺寸的显示器上,这些点的单位面积并不是一样的。比如一台22英寸的1080p液晶显示器与一台同样分辨率的27英寸的液晶显示器,我们通过仔细观察,可以发现这两台显示器的像素分布。直观感受就是,27英寸1080p分辨率的显示器的显示效果明显逊于22英寸1080p显示器的效果,比如颗粒感严重等等。一个重要的原因就是,两台液晶面板中的“像素”颗粒大小不一。
  由此可见,像素这个单位是一个相对单位,我们不能用厘米,毫米等等这些绝对度量单位来衡量他的长度或者宽度,因为,1像素只代表一个单位的“点”。
  另一个重要单位是PT,这个单位也是iOS开发过程中使用的单位,与px这样的相对单位不同,PT(Point)是一个绝对单位,中文名字是“磅因(或者磅)”,1PT等于172英寸。我们同样用简单直观的例子来演示。
  如果你手头有两部不同型号的iPhone,比如iphone6,iphone5,或者iphne4。静电的推荐是用一部ip6和一部ip5或者ip6plus,打开同样一款应用。同时准备好一把尺子。
  比如我们使用最多的QQ音乐,打开它,使用尺子分别测量最上方title“音乐馆”文字的尺寸。经测量,音乐馆文字的宽度为8mm,此时打开iphone6plus或者不同尺寸的ios手机,同样测量它的尺寸,我们发现,“音乐馆”文字的尺寸也约为8mm左右。如果大家觉得此方法并不合适,可以请iOS开发人员分别写两个针对不同尺寸机型适配的同一个文件,并在两部手机安装,确保这个文件中的字体使用一个字号,比如30PT。在两个手机中运行并用尺子测量,我们发现他们的物理尺寸完全一样。
  请大家记住一点,px是相对单位,pt为绝对单位(类似单位为厘米,毫米等等)。在不确定屏幕密度的情况下,px与pt没有任何可比性。
  为什么使用3XX像素作为sketch设计稿的基准宽度?
  原因一:
  对于px与pt如何转换,涉及原理已经超出本文范围,这里简单的告诉大家,当dpi160的时候,1dp1px1pt(作者经验结论)。那么在这里我们要引出为什么使用375667这样的尺寸来做设计了,因为在这种情况下,也就是mdpi的分辨率(约320480)时,1dp1px1pt。
  简单来计算下,当分辨率增大,比如增大到640960px时,在密度不变的情况下,2px1pt,因为像素点密集了,所以需要更多的点才能充满单位物理尺寸。这也就是为什么我们会觉得iphone4的画面比3GS的画面要细腻的原因,因为dpi(ppi)升高了。(dpi或者ppi为每英寸的点或者像素,代表密度。)
  所以,320这个宽度(3XX)就作为基准宽度,也叫做一倍尺寸沿袭下来。因为使用1作为基数,换算确实方便。
  下图是设计稿输出尺寸与分辨率对照表。
  原因二:
  对于iOS来说,同样沿袭了这样的概念,与安卓不同,320宽的基准分辨率下导出的素材为1x,也叫做一倍图。那么在iphone4,iphone5或者iphone6上使用的图则是2x,也叫做二倍图,同理,iphone6plus为3x三倍图。大家应该都知道对应分辨率与导出图片的对应关系。如果使用640宽或者750宽为基准作图,当然不是不可以,只不过我们在输出3x图的时候,是不是要乘以1。5呢?如果你一定要用3x三倍图的分辨率作图,那么最终要生成二倍图的时候,是不是要把输出尺寸乘以三分之二呢?
  如果是1。5还好,那么三分之二到底是什么鬼的倍数,0。6666666?有强迫的设计师真的看的过去么?
  但是,如果我们使用一倍图设计,那么1X22x,1X33x,多么的简单方便又容易理解不是么?
  再加上sketch是全矢量绘图软件,不管你怎么放大缩小,导出的位图也是不会虚的。
  原因三:
  在开发工程师眼中,你如果使用640的分辨率作图,那么按原大小标注设计稿中的尺寸的话,他们同样在开发环境中是要换算为一倍尺寸的,比如你标注了字号为40px,那么最终开发工程师写在代码里的就是20pt,除以2的关系。
  但是呢,如果使用一倍基准分辨率作图,那么就不用除以2啦,所有尺寸开发工程师直接拿过去随取随用,多么方便简单。相信之前跟随静电的xcode教程做过demo的小伙伴,一定对xcode中的尺寸设定印象深刻对吧。
  要了解原理,建议大家用一用xcode,亲自体验一下开发工程师工作的原理,相信你的这些问题都可以迎刃而解。
  使用一倍基准分辨率作图你的明智之选
  sketch作为一款纯矢量的移动端UI设计软件,不管是从设计还是到后期与开发工程师的配合方面,都严格遵从开发原理,这种设计方法可以最大限度保证设计稿的复现,同时也可以减小文件体积和系统资源消耗,不管是从哪个方面看,都是设计师制作UI界面的明智之选。不过,基于位图输出的photoshop就没这方面的福利了,虽然photoshopCC2015加入了多画板功能,不过然并卵。一个文件中放置五六张画板对于sketch来说无比轻松,且输出文件只有几M,但反观photoshop,动辄几个G的文件体积和巨大的系统资源消耗,恩哼,你懂。
投诉 评论 转载

设计师最好的时代和交互设计最差的时代江南大学的辛向阳教授2014年在腾讯做过一次名为:《用户体验设计从功能逻辑到行为逻辑》的演讲,整个演讲节奏紧凑信息量大,完全不似有人提过的交互设计教育滞后于行业的传统学院派作派……空状态的设计值得更多关注空状态,或称零数据状态,很多时候不太招设计师的待见。我们基本都是在主要流程界面的设计工作完成之后才会回过头来考虑完善一下,因为从表现上来看,空状态给人的感觉就是临时性的,有些微……给设计师的模块化设计新手完全入门指南扁平化设计流行起来之后,现代简约风与之结合产生了许多视觉上以区块为主的网页设计作品。对于设计师而言,这种设计方式既时尚,又富于功能化,网站结构流畅、简单,与响应式的设计也有着天……饿了么、百度外卖、美团外卖购物车设计分析最近国内O2O市场火热,办公室内叫外卖的氛围也出现了前所未有的高潮。大家经常使用的外卖app有饿了么、百度外卖、美团外卖。今天来看看饿了么、百度外卖、美团外卖的购物车设计……令网站看起来不专业的十个设计误区在这个奶茶店都有个响应式网站的时代,你没有网站似乎是一件说不过去的事情。不过当你考虑到自己可能仅仅只是个人名而非名人,你的店铺也算不得什么知名大厂,随便开个网站再说,等影响力扩……安卓手表VS苹果手表系统特性对比自PC时代(包括智能手机、电视机)以来,计算机操作系统的用户界面中含有各种各样的控件元素以及操作规范。也正因为界面元素和操作的不同使其形成了自己独特的系统特征。不同的可穿戴计算……品牌音色与用户体验:为什么有些产品深入人心?为什么有些产品深入人心?他们的设计中,是什么使我们感觉亲近、愉悦和高兴?iOS和GooglePlay应用商店包含了超过200万应用。如果这还不至于让你头晕,那我们来聊聊8……为何sketch预置画布尺寸比真实分辨率小?为什么Sketch中预置的画板尺寸比真实分辨率小?这个问题被成百上千的初学者问起过,每次都要费劲口舌来解释,可是静电实在架不住每天两三遍甚至更多人问起同样的问题。那么,就在这篇……20个响应式网页设计中的“神话”误区虽然很多人都在谈论响应式网页,但并不是每个人都知道他们在说什么。很多时候你看到网上的一些信息也在挑战你对响应式的理解。有时候一些小报告给你建设性的建议,并帮助你的设计朝着……设计师怎么和工程师配合制作UI动效?(本文为个人笔记,我都用Hype3直接产出Prototype和JS,避开和一堆数值的大混战,但该知道为什么要这样做的部份还是要懂。)如果设计师要产出动态特效给RD,他们需……大尺寸触屏:有何不同?摘要:大尺寸触屏的相关设计需要特别注意输入、屏幕焦点和个人隐私。在这个需要考虑各种屏幕大小和尺寸的年代,侧重小屏幕已成为一种常识。我们的设计和交互主体必须要在最小的屏幕上……MaterialDesign只是独辟蹊径,并未全面胜出MaterialDesign发布之时,Google在设计领域做出的努力令我印象深刻。在这方面Apple一度遥遥领先。这种局面结束了。记得我以前总抱怨Android设计的那套不统……
网站设计中最易被忽视的9大细节8种移动APP导航设计模式大对比【人人译客】品牌塑造之初见细节决定品质AppleWatch的人机交互启示如何改进工作流让设计稿支持多个尺寸?如何成功运用扁平化设计与色彩趋势一篇文章让你掌握iOS视觉功能设计发展史一个banner仔的自我修养(1)字体字形篇圆智能手表UI设计设计基本功!帮你掌握图文排版的5个小技巧我们是如何阅读的
【歌词】无名指的等待歌手:周小曼热议聚热点网 基础造句用基础造句大全公司搬迁通知舒淇女神发型告诉你不是剩女是胜女陈建州追奥运会,偷看盗版视频被发现,引发热议后公开道歉番荔枝的枝梢有什么特点?经历这次疫情,2020感动中国十大人物,你会。。。世间最好的心境哪些生肖的人家庭责任感强特稿面对疫情,辅导员开展思想政治教育。。。香奈儿哪里便宜香奈儿哪买最便宜热文聚热点网 哺乳期女性应该如何紧急避孕呢?

友情链接:中准网聚热点快百科快传网快生活快软网快好知文好找作文动态热点娱乐育儿情感教程科技体育养生教案探索美文旅游财经日志励志范文论文时尚保健游戏护肤业界