当前所在位置： >
热门微信号：
为什么sketch中预置的画布尺寸比真实分辨率小?静电告诉你答案
作者： 浏览数：0 用手机扫描二维码
阅读，只需一秒。精彩，尽在掌握！有太多太多刚刚上手sketch的小伙伴们都有这样的问题,为什么我在Sketch中建立画布,软件预置的Artboard尺寸总是那么小呢?比如i...
↑↑欢迎点击上方蓝色静Design关注我们有太多太多刚刚上手sketch的小伙伴们都有这样的问题，为什么我在Sketch中建立画布，软件预置的Artboard尺寸总是那么小呢？比如iphone6的真实分辨率是750-1334像素，但是sketch中的Artboard尺寸居然是375-667像素。同样其他机型的预置尺寸也有问题，是sketch出错了吗？这个问题被成百上千的初学者问起过，每次都要费劲口舌来解释，“其实Sketch的做法没错，就是这个样子的，原理是什么什么什么”。可是静电实在架不住每天两三遍甚至更多人问起同样的问题。那么，就在这篇文章中，让我们好好来解释一下，为什么预置画板会这么小。PX和PT，傻傻地分不清我们必须了解最最基本的原理，才能在设计中以不变应万变。首先我们来普及两个度量单位-PX和PT。PX大家可能比较熟悉，就是像素，英文pixel的简称。静电做最最通俗的解释，请找一个放大镜（不是电脑中的放大镜，是真实的放-大-镜），然后对准自己面前的显示器或者手机屏幕观看，大部分显示器会在放大镜下出现一个一个的点。这就是我们平时所说的像素的概念。在一台物理分辨率为的显示器中，横向分布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的文件体积和巨大的系统资源消耗，恩哼，你懂。以下是来自sketch.im素材网站（素材真的很全，推荐）的设计稿截图，均使用一倍基准尺寸设计。最后总结一下原因，设计师使用一倍基准尺寸作图，主要是方便，单位转换方便，输出切图方便，理解简单。对于工程师，他们不用再进行复杂的换算，有助于完美复现设计稿。因此，不管是国内还是国外，越来越多的设计师开始使用一倍基准尺寸设计移动界面，还在犹豫？就差你了。如果你身边的朋友还在纠结于这个问题，特别是那些刚刚从photoshop转到sketch的小伙伴，速度把这篇文章转发给他们看吧。第一手原创设计文章及内容尽在静design（长按二维码关注）觉得本文有帮助请赐个赞并在下方发表评论
手机版地址：
微信号：youshege
国内人气最高的网页设计师学习平台,和大家一起来利用碎片时间学习网页设计和PS技术吧!
TA的热门文章
推荐互联网微信帐号
热门文章排行
(), All rights reserved 京ICP备号-12投诉建议、广告投放、友情链接，联系QQ：
iPhone&6&/&6&Plus&出现后，如何一份设计稿支持多个尺寸？
Loading...
数十万互联网从业者的共同关注！移动app开发中多种设备尺寸适配问题，过去只属于Android阵营的头疼事儿，只是很多设计师选择性地忽视android适配问题，只出一套iOS平台设计稿。随着苹果发布两种新尺寸的大屏iPhone 6，iOS平台尺寸适配问题终于还是来了，移动设计全面进入“杂屏”时代。看看下面三款iPhone尺寸和分辨率数据就知道屏幕有多杂了。加上Android生态中纷繁复杂的各种奇葩尺寸，现在APP设计开发必须考虑适配大、中、小三种屏幕。所以如何做到交付一套设计稿解决适配大中小三屏的问题？设计和开发之间采用什么协作模式？一个基本思路是：1、选择一种尺寸作为设计和开发基准；2、定义一套适配规则，自动适配剩下两种尺寸；3、特殊适配效果给出设计效果。手机淘宝的iPhone 6/iPhone 6 Plus适配版本即将提交App store审核。先晒一下我们采用的协作模式，再慢慢说明原委。第一步，视觉设计阶段，设计师按宽度750px（iPhone 6）做设计稿，除图片外所有设计元素用矢量路径来做。设计定稿后在750px的设计稿上做标注，输出标注图。同时等比放大1.5倍生成宽度1125px的设计稿，在1125px的稿子里切图。第二步，输出两个交付物给开发工程师：一个是程序用到的@3x切图资源，另一个是宽度750px的设计标注图。第三步，开发工程师拿到750px标注图和@3x切图资源，完成iPhone 6（375pt）的界面开发。此阶段不能用固定宽度的方式开发界面，得用自动布局（auto layout），方便后续适配到其它尺寸。第四步，适配调试阶段，基于iPhone 6的界面效果，分别向上向下调试iPhone 6 plus（414pt）和iPhone 5S及以下（320pt）的界面效果。由此完成大中小三屏适配。1为什么选择iPhone 6作为基准尺寸？当面对大中小三种屏幕需要适配的时候，很容易想到先做好一种屏幕，再去适配剩下两种屏幕。第一个决定是到底以哪种屏幕作为设计和开发的基准尺寸。我们选择中间尺寸的iPhone 6（750px/375pt）作为基准，基于几个原因：1、从中间尺寸向上和向下适配的时候界面调整的幅度最小。375pt下的设计效果适配到414pt和320pt偏差不会太大。假设以414pt为基准做出很优雅的设计，到320pt可能元素之间比例就不是那么回事了，比如图片和文字之间视觉比例可能失调。2、iPhone 6 plus有两种显示模式，标准模式分辨率为，放大模式分辨率为（即iPhone 6的1.5倍）。可见官方系统里iPhone 6和iPhone 6 plus分辨率之间就存在1.5倍的倍率关系。很多情况下这两种尺寸可以用1.5倍直接等比适配。3、这个奇葩的数值是苹果官方都不愿意公开宣传的一个分辨率，不便于记忆和计算栅格。640x1136虽然是广泛应用的一个分辨率，但是大屏时代依然以小尺寸为设计基准显然不合时宜，设计师会停留在小屏的视角做设计。所以，iPhone6的750x1334是最适合基准尺寸。2只交付一套设计稿，默认用什么规则来适配？前文提到适配策略是先选择iPhone 6作为基准设计尺寸，然后通过一套适配规则自动适配到另外两种尺寸。这套适配规则总结起来就一句话：文字流式，控件弹性，图片等比缩放。控件弹性指的是，navigation、cell、bar等适配过程中垂直方向上高度不变；水平方向宽度变化时，通过调整元素间距或元素右对齐的方式实现自适应。这样屏幕越大，在垂直方向上可以显示更多内容，发挥大屏幕的优势。按照上述默认适配规则，大中小三种屏幕显示效果均相同。有时候想在大屏幕显示更多内容，需要设计出特殊适配效果。比如App store首页焦点图，从iPhone 6适配到iPhone 6 plus时焦点图尺寸和排版做了特殊处理。底下应用列表也从一排3+个变成一排4+个，真正实现了大屏幕显示更多内容的理念。这些就需要设计师给出相应设计稿。文章来源：视觉ME互联网早读课微信订阅号：zaoduke互联网早读课（微信：zaoduke），提倡慢阅读。专注产品、用研、交互领域，每天一篇风雨无阻。覆盖数十万以产品经理，交互设计师，用户研究分析师为主的互联网一线从业人员。致力于打造国内领先的互联网行业深度阅读与学习平台，欢迎您通过网站、微信以及其他第三方阅读工具订阅。QQ群： 投稿：【声明】本文来源于 微信公众账号：互联网er的早读课()，由网友提交收录，版权归原作者所有，文章内容为原作者独立观点，不代表本站立场！如需删除，请联系 QQ：
IT技术书籍推荐:
细说PHP(精要版)
高洛峰 (作者), LAMP兄弟连 (编者)
PHP是开发Web应用系统最理想的工具，拥有易于使用、功能强大、成本低廉、安全性高、开发速度快且执行灵活等优点。《细说PHP（第2版）》自出版以来，销售一路在同类书籍中领先，已成为PHP学习者首选的工具书。为了可以让读者携带方便及更精准地掌握PHP的重点、要点，同时能使之作为大学计算机系PHP教材普及，特别推出《细说PHP精要版》。本书是以《细说PHP（第2版）》为基础，提取出精华内容，都是PHP开发中必须需要掌握的技术点。全书以实用为目标设计，包含PHP开发中必备的各项技术，对已列出的每一个知识点都进行了深入详细的讲解，并附有大量的经典实例代码，图文并茂，并且侧重介绍了PHP的相关技术在实际Web开发中的应用。
相关推荐:1、2、3、4、5、6、7、8、9、10、
随机关键词:
正在加载...
最新微信头条本站文章信息来源于网络以及网友投稿，本站只负责对文章进行整理、排版、编辑，是出于传递更多信息之目的，并不意味着赞同其观点或证实其内容的真实性。如果您有什么意见或建议，请联系QQ28-！
专家：人工智能取代人类还非常遥远
大疆进军农业 即将发售喷农药无人机
洒水拖地机器人：干擦、湿擦多种自动清洁模式可选
斯坦福新成果 能爬墙的机器人
用于性爱关系的机器人似乎已经离我们不远了，但正如罗斯 埃弗莱斯(Rose Eveleth)所说，现实情况远比想象的复杂。在近期的两部电影《她》(He...
滚石杂志近日刊出了有关人工智能的特别报告，报告分上下两篇，目前已推出了上篇。作者 Jeff Goodell 访谈了从事人工智能（AI）研究的各方面...
2年 前被 Google 收购的Boston Dynamics（现已并入 Google 母公司 Alphabet 旗下的登月计划工厂 X ）近日发布了最新一代人形机器人 Altas ...
3月9日，人机世纪大战正式打响，谷歌人工智能系统AlphaGo挑战世界围棋冠军李世石。 比赛共分五场，首日比赛（3月9日）将由紫牛基金合伙人张...小试微信公众号开发 - 简书
下载简书移动应用
写了29115字，被8人关注，获得了42个喜欢
小试微信公众号开发
倒腾完静态博客的搭建后，又开始琢磨着动态页面的事情了。一旦可以与用户产生交互，那就有了非常多的想象空间了。现在移动开发渐渐变得主流起来，连一开始搭建这个Hexo博客挑选主题时，对移动端的良好适配也变成了首要考虑的因素。结合以上因素，想到之前申请的微信订阅号可以做开发，定制自己想要的功能，为何不拿来试一试呢。
1. 预期目标
打通开发各环节，实现消息的通信。因此，只实现一个最简单的功能，即接收用户发来的消息，并将该消息发回用户。
2. 基本方案
开发环境网上搜了一下发现，目前做公众号开发的主流方案是PHP或Java，无奈自己都不会，于是考虑用Python。Python有很多现成的web框架，可以快速实现功能，不用重复造轮子了。这里选用了。服务器因为只是自己玩，所以先托管在免费的云服务器上好了。
最终选定的方案为：
Python+Flask框架
的项目演示平台。
3. 前期准备
3.1 开发者功能
在公众号管理平台打开开发者功能。服务器地址之后在部署的时候会得到，Token令牌就是一个密码，可以任意设置。
3.2 Flask安装
通过python的包管理工具pip来安装Flask是最简单的方法：
$ pip install flask
系统会自动安装Flask及其依赖包Werkzeug和Jinja2。
4. 程序设计
import time
from flask import Flask, request, make_response
import hashlib
import xml.etree.ElementTree as ET
app = Flask(__name__)
@app.route('/', methods=['GET', 'POST'])
def wechat_auth():
if request.method == 'GET':
token = 'your token'
query = request.args
signature = query.get('signature', '')
timestamp = query.get('timestamp', '')
nonce = query.get('nonce', '')
echostr = query.get('echostr', '')
s = [timestamp, nonce, token]
s = ''.join(s)
if (hashlib.sha1(s).hexdigest() == signature):
return make_response(echostr)
xml_recv = ET.fromstring(request.data)
ToUserName = xml_recv.find("ToUserName").text
FromUserName = xml_recv.find("FromUserName").text
Content = xml_recv.find("Content").text
reply = "&xml&&ToUserName&&![CDATA[%s]]&&/ToUserName&&FromUserName&&![CDATA[%s]]&&/FromUserName&&CreateTime&%s&/CreateTime&&MsgType&&![CDATA[text]]&&/MsgType&&Content&&![CDATA[%s]]&&/Content&&FuncFlag&0&/FuncFlag&&/xml&"
response = make_response(reply % (FromUserName, ToUserName,
str(int(time.time())), Content))
response.content_type = 'application/xml'
return response
5. 项目部署
5.1 其他项目文件
依赖说明文件：requirements.txt
Flask==0.10.1
Jinja2==2.8
Werkzeug==0.11.2
gunicorn==19.0.0
指定应用的启动命令：Procfile
web: gunicorn hello:app -b $VCAP_APP_HOST:$VCAP_APP_PORT
更详细的说明可以参看。
5.2 启动服务
在Coding.net中新建一个项目，本地添加远程代码库地址后，用Git工具将项目文件push到相应的代码库中。在项目菜单中进入演示选项，点击开始检测进行部署环境的自动检测。检测完成后，点击开启功能。
进入演示控制台，设置访问域名以及应用内存。
该访问域名就是公众号平台中需要设置的服务器地址。
选择一建部署，等待一会儿，项目在云端就部署完成了。
演示控制台
6. 系统测试
在微信中打开公众号对话框，现在来发消息试试。
可以看到，系统会将我们的消息再次发送回来。现在看起来有点傻，也没有什么实际的使用意义，但只要服务器能够收到用户发送的消息，并正确解析，那么对该消息进行何种处理，做出怎样的反馈，都是可以进一步开发的。做出一个像Siri或者Cortana那样的聊天机器人也不是不可能啊。
7. 后续任务
7.1 Flask相关
基本功能目前只不过实现了Flask的Hello World，基本的使用方法还需要更深入的研究。
项目架构为了测试最基本的功能，将整个应用在一个模块中实现，并不符合基本的MVC模式。Flask应用有推荐的项目架构，为了后续更复杂功能的开发，据其做相应的调整。
数据库一般的Web应用都会用到数据库。以SQLite为例，研究数据库在Flask中的调用方法。
应用扩展Flask的设计思想就是核心简单易用，功能易于扩展。利用Flask-Script等扩展应用，实现更加丰富的功能。
7.2 公众号相关
开发文档阅读公众号开发文档，熟悉最基本的API及调用方法。
开发框架有很多基于Python的公众号开发框架，将官方API进行打包，更加利于使用。
本地调试如果每次开发调试都要将项目重新部署到远程服务器上，那就非常不方便，需要寻找一种本地调试的方法。
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
选择支付方式：