sketch measure 使用心得

首先非常感谢utom大神,创造了一个伟大的sketch插件。它极大的提高了设计师输出设计成果的效率以及准确性。它陪伴了我一起创造了2个产品。非常的棒~感谢的同时。也希望所有使用sketch的同学,能够更好的使用它。
首先需要注意的前提:
  1. 设计比例 (375x667或者750x1334后者比较精确,不容易出现误差,完美像素情况下。)
  2. 资源输出比例(根据设计尺寸需要输出图片的比例,如果使用375进行设计,需要输出的是2倍图和3倍图,如果使用750进行设计,需要输出的尺寸为1倍图和1.5倍图)
  3. 适配规则,根据适配方案进行对iPhone plus 和android 进行适配调整
  4. 切片的方式(可以使用measure进行,也可以使用其它插件进行)
  5. 标注的细节(标注不是万能的,还是有需要对设计进行备注的地方,让开发知道设计意图,并且还原设计,所以需要使用备注进行说明,包括设计意图)

 
我是如何使用sketch measure的。
 
 
  1. 设计画板尺寸定义:目前我习惯于375x667的尺寸进行设计,由于这样可以更大范围的观察设计内容。所以我在输出的时候设置为1pt标准比例。⚠️ 如果你的设计稿是750进行设计的需要把比例调整到视网膜屏(retina)@2x 的方式。当然标注会智能的进行换算。
  2. 将设计完成的设计稿按需求进行调整。图标全部进行元件化(symbol),这样对于整个app的组织有良好的效率和统一性。
  3. 检查字体的统一性保证仅使用一种字体。(pingfang sc)不同平台根据平台规则使用。
  4. 对于细节的检查:任何元素的坐标及尺寸,都必须不能有小数点。都是整数。(分割线除外,有些单倍设计需要0.5pt的分割线。)

 
做好准备之后,开始进行标注和切图。

打开面板:

按顺序:对像进行遮盖标注。效果如下,能够说明图标的范围,通常我们都是透明背景,所以需要进行标示。

对像进行自身宽度高度的标注。效果如下,还可以分别进行设置。


选择单个对象,是将当前对象在画板中的坐标标注出来,选择两个对象,则会将选中的两个对象中间的间距标注出来。非常智能。

这个不常用。因为选中字体时,会有完整的字体样式。这个是用来标注字体样式的。

备注,有什么表(tu)白(chao)想对开发说。打好文字后,点它~


切片,使用sketch自身切刀工具即可。
颜色,可以将sketch中的调色板的色值填入,提供给开发。
导出,可以将标注倒出html文件。选择需要导出的画板。



隐藏/开启 标注显示
锁定/解锁 标注
设置,可以对文档比例进行设置,对未设置过的文档,第一次导出时会弹出设置对话框,进行比例设置。





根据选中的比例,measure会智能进行切换。如果需要给android小伙伴可以让他们调整下比例:

 
就可以完美的实现多平台使用了。
标注部分到这里结束了。
接下来就是切图了。
 
新版的sketch有这样个功能:


根据项目需要可以自定义切图规则。太棒了!当然希望utom大神更新下插件。将导出的资源也可以进行分组。哈哈哈。
⚠️:有个细节需要注意!sketch进行切图会只切内容大小。所以需要对切片进行调整。
 


这样就可以切出需要的尺寸了。

0 个评论

要回复文章请先登录注册