恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
为什么Sketch做设计用一倍图?
0.0°
2018-10-29 原创文章 教程 举报 16376 152 130 11

很多同学经常有这样的疑问“为什么Sketch预置的画板尺寸比PS里的要小?”,“为什么大部分人用Sketch做图采用一倍图?”今天就跟大家聊聊这其中的原因。


Sketch与PS的区别

由于Sketch是矢量绘图工具,与PS位图处理软件不同的地方在于:Sketch图像生成采用矢量图,在调整形状的时候可以进行缩放而不会损失质量。Sketch中iPhone8默认画板是一倍图尺寸375*667,PS中iPhone8默认为二倍图尺寸750*1334。

Image title

PX与PT的关系

px是像素,属于相对单位,而pt是点,是iOS开发过程中使用的单位,属于绝对单位。什么意思呢?就是说pt的值是不变的,px会随着屏幕像素密度的不同而发生变化。


iOS开发为了不同分辨率的设备统一正常显示,会提供三种不同尺寸的切图:一倍图@1x、二倍图@2x、三倍图@3x。一倍图中px与pt数值相等,二倍图中px数值是pt的2倍,三倍图中px数值是pt的3倍。


比如我们看iPhone8(二倍图)与iPhone8 Plus(三倍图)的手机微信截图:iPhone8中“朋友圈”字号为34px,在iPhone8 Plus中“朋友圈”字号为51px,字号对比为2:3,

但是iOS开发人员在写代码的时候,输入的是统一的字号数值17pt。

Image title


所以我们能够发现,px是相对单位,pt是绝对单位。


设计采用一倍图的好处

1、与开发沟通无障碍

与我们设计师不同的地方在于,如果我们使用750*1334做图,在当前设计稿上标注px尺寸的话,开发工程师依然要在开发环境中换算为@1x尺寸的,比如标注了一个文字30px,开发在代码里写的时候会默默除以2,也就是15pt。


如果我们在Sketch里使用一倍图375*667来做图,开发直接把数据拿过去用就行,就不用除以2了,更加方便。


2、换算方便

如果是以二倍图设计,在换算三倍图时需要乘以1.5,相对比较麻烦。如果以@1x设计,在换算的时候只需要乘以2和3就可以得到@2x、@3x了。


3、文件体积更小

用Sketch做一倍图时,一个Page页面可以放置更多的画板,画板越多越方便设计师管理页面,保证设计规范执行更加到位。在Sketch里同时操作十几个画板很轻松,而基于位图处理的PS就没这么流畅了,在PS里放七八个画板就已经有些吃力了,文件体积以及对系统资源的消耗也很大,有时候卡的那叫一个心塞…


4、便于调用控件素材

Sketch自带的模版都是一倍图尺寸的,采用一倍图进行设计时,调用iOS和Android的系统控件直接使用就可以了。很多平台上的Sketch源文件素材也是一倍图尺寸的居多。


5、控件尺寸、间距把握更加自由

众所周知,我们采用二倍图尺寸进行设计时,需要保证控件大小、间距均为偶数,这样换算到三倍图时也是整数的。


当采用一倍图设计时,尺寸可以为奇数的,因为只要乘2和3就行,都是整数的,在做图的时候更加自由。


6、导出切图方便

我们可以在Sketch预设里设置好导出的规格尺寸,一倍图导出比二倍图更直观,三倍图的后缀就是@3x,二倍图的后缀就是@2x,整数倍的导出非常快捷。

Image title


注意一倍图中分割线的处理方式

我们在二倍图750*1334里绘制1px高的分割线,在一倍图375*667中会变成0.5px,直接绘制高度0.5px的Rectangle会出现不好对齐的情况。


在Sketch提供的iOS模版中,分割线是绘制了一条高度为1px的Rectangle,将Fill去掉,加上Inner Shadows,Y为0.5,其余值为0。

Image title

所以我们在绘制“上分割线”的时候,画一条高度为1px的Rectangle,用Inner Shadows,X为0,Y为0.5,Blur和Spread均为0。


在绘制“下分割线”的时候,用Inner Shadows,X为0,Y为-0.5,Blur和Spread均为0。


通过这样的方式可以很好的将0.5高度的分割线进行图层对齐。



总结

如果你在使用PS做图的话一般用二倍图设计,使用Sketch做图大部分采用一倍图(当然也可以用二倍图)。UI设计师使用一倍图为基准进行界面设计,主要是因为方便,便于理解。对开发来讲也不需要进行二次换算,效率也会得到提高。如果你是刚从PS转Sketch的设计师,希望这篇文章能够帮到你(•̀ᴗ•́)و。



更新:2018-10-29

收藏

152人已收藏

新像素教育

2021全日制UI训练营名额预约中 官网:uixxs.com

  • 109

    作品

  • 2499

    粉丝

  • 7

    关注

  • 近期学员作品展示
  • UI设计培训毕业班作品展示
  • 如何在UI界面设计中创建完美颜色
  • 新像素最近毕业班学员作品
相关标签
切图

    猜你喜欢

      2018-10-29 原创文章 教程 举报 16376 152 130 11

      为什么Sketch做设计用一倍图?

      0.0°

      你确定要举报为什么Sketch做设计用一倍图?

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年10月29日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      130
      152
      11

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录