乐者为王

Do one thing, and do it well.

绘制圆角的正确方法

英文原文:http://usabilitypost.com/2009/01/26/the-proper-way-to-draw-rounded-corners/

在网络上,我已经注意到当人们在他们的设计中实现圆角时犯了很多同样的错误。因为某些原因,当有另外一个圆角在它里面的时候,这个圆角会带来一个问题—无论是有一个围绕周围的边界,还是另一个圆角形状坐落在一个圆角形状内。

这里是我要说的:

我看到了很多这种类型的圆角。你可以看到圆角的半径和内圆角的是相同的。这是错误的,因为如果你保持相同半径,两个拐角之间的空间量不会自始至终相等。

下面是相等间距看起来的样子:

这是正确的做法。有什么不同?内角的半径被减小了。好吧,但你怎么知道半径应该有多大?这很简单—如果你把外面的圆角想象成一个圆形,你可以看到它的圆心在哪里。

把这个圆心同样地作为内角的圆心,你就会得到内角的半径。使用这种方法将确保两个形状之间的完美契合。

现在你知道了吧?这是做多个圆角彼此包含的正确办法。当然,不需要你使用精确的圆心—有时为了设计良好还需要你移动一点点。但请不要仅仅把相同的圆角向内移动—这是绝对错误的。

Comments