越来越多的人开始用Sketch进行UI设计,Sketch作为一款非常容易上手的软件,很多人完全可以依靠自学便能熟练掌握这款软件,但是大部分人都只是掌握Sketch的基本实用方法,对于一些实用的小技巧,了解的并不是特别多。
从今天开始,我将向大家介绍Sketch的一系列实用小技巧,这些小技巧能帮助大家更好的使用Sketch,提升工作效率。
这是该系列教程的第三篇——输入框的运算和圆角的设置。
本教程的第一篇:http://www.jianshu.com/p/109aac030ded
本教程的第二篇:http://www.jianshu.com/p/80b606f87f53
UI设计是一门很精细的学科,在进行设计师,往往需要我们精确到1像素。最好的精确是通过计算得出。在进行设计的时候,若每次口算计算量会很大并且很容易出错,而每次使用计算器又相对浪费时间。另外,除了加减乘除的计算,还可以输入一定格式的数值来让针对圆角矩形的每个圆角进行调整。
1
输入框的运算
在Sketch的检查器中,所有的数字输入框都可以直接输入数字,也可以在该输入框内做加减乘除的运算,如图所示。
在任意输入框内,我们可以输入一个算术式后,按下回车键,便可计算出结果。如上图中,要得出position处X轴的值24,我们可以输入“30-6”,然后按下回车,便可得出24。
输入框中可以进行连续的运算,即当我们需要绘制一个距离左边距24像素,右边距24像素的按钮时,要计算该按钮的宽,可以用屏幕的宽-24-24,如屏幕宽为375像素时,可以直接输入375-24-24,如下图所示。
2
圆角的设置
在圆角半径处的输入框,我们除了可以做加减乘除的运算外,还可以输入“左上角/右上角/右下角/左下角”的格式,来对圆角矩形的每个圆角半径进行设置。如图下图所示,在圆角矩形处输入6/0/20/0,则可绘制出左上角圆角半径为6,右上角圆角半径为0,右下角圆角半径为20,左下角圆角半径为0的图形。
以上是sketch中,检查器的输入框的一些小技巧,灵活运用该技巧可以在日常工作中节省大量的时间,提升效率,且能让界面设计更加精准。