设计软件中的矩形和圆角矩形工具有必要分开吗

2017-06-25 19:06:00

讨论sketch的矩形和圆角矩形工具是否是功能上的重复，对比Framer js和Affinity Designer引出矩形属性修改的交互方式有何更优解法

使用sketch的矩形工具和圆角矩形工具引发的一些思考！

矩形和圆角矩形工具是否是功能上的重复？

在使用sketch的过程中，我们用快捷键R来激活矩形工具创建矩形，用U选择并创建圆角矩形工具，两者在右侧inspector面板中所包含的属性是一样的，矩形工具也包含Radius这个属性。

当我们选择圆角矩形，并将其Radius的值设置成如图的20，sketch会记住这个值，在你下次创建圆角矩形，sketch使用同样的值创建圆角矩形。而矩形工具虽然有Radius属性，它只能在每次创建完矩形后供我们修改其Radius值，它并不会记住我们设置的值。我尝试将圆角矩形的radius值设置成0，然后再次按住U创建圆角矩形，发现它并不会记住0，而是自动将radius的值修改成1，但sketch允许我们将圆角矩形的radius值设置成0.01，并且能记住它供下次创建时使用。

如何分别修改圆角矩形四个角的度数

关于sketch中设置矩形四个角不同的radius值，有两种方法，一种是选中矩形，敲击Enter键／点击工具栏的Edit，此时四个角的点处于可编辑的状态，通过修改每个点的corner值来调整圆角度数。

第二种方法是直接在Radius值的文本框中连续输入四个角的度数，每个值用分号；（输入法为英文状态）来隔开，例如图中四个角的值为20;40;60;100。

利用圆角矩形创建圆形

当我们设计时，以用户头像为例，我们常用圆形承载头像的形状，如果我们直接用快捷键O来创建圆形，后期我们想将其修改成矩形就会遇到一些麻烦，这里我建议通过修改圆角矩形的radius来达到圆形的形状，如图，我创建来200*200的圆角矩形，并将其radius值=100（200/2），这样圆形就产生了，在我们按住alt进行缩小图形时，依然会保持圆形的形状，只要radius的值≥正方形的边的一半，缩放就不会改变其圆形形状。

sketch的圆角矩形和其他设计软件相比怎么样？

最近Framer js引入了Design模块，它的图形设计功能是比较简单，但在创建矩形图形上，我觉得它的交互方式是更优的。在Framer js中只有矩形，没有圆角矩形的概念，快捷键R创建矩形时，矩形的左上角有一个高亮的点可以控制矩形的圆角属性，其数值也直接投射在图形上，显得直观。这和AI创建圆角矩形的方式相似，我不知道为什么PS没有采取这种方式，在PS中，也是同时存在矩形和圆角矩形工具，并通过是否锁定的方式来确定是否统一调整矩形的圆角。