美文网首页Sketch UI设计用Sketch做UISketch
实用Sketch小技巧03——输入框的运算和圆角的设置

实用Sketch小技巧03——输入框的运算和圆角的设置

作者: 黄方闻 | 来源:发表于2016-06-06 00:08 被阅读3678次

越来越多的人开始用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中,检查器的输入框的一些小技巧,灵活运用该技巧可以在日常工作中节省大量的时间,提升效率,且能让界面设计更加精准。

相关文章

网友评论

  • YEAsoon:当需要用圆角钜型进行布尔运算减去顶层操作时,在保证四边边距相同的情况下,如何保证内圆角与外圆角是等比的
  • c628b1e11569:6/0/20/0似乎不生效了?不知是不是我的用法不对,sketch46版本
    a49f600bffac:除号已经更换成分号,新的表达式应该是“6;0;20;0”
  • 佘战文:我是你的忠实粉丝

本文标题:实用Sketch小技巧03——输入框的运算和圆角的设置

本文链接:https://www.haomeiwen.com/subject/yvmrdttx.html