摘要

画图标的时候,如何设置钝角和锐角的圆角半径,才能和直角下倒的圆角看上去差不多大小?

感谢

@IpNeNaEcRe

问题

画图标的时候,有个问题让我困扰了很久。很多设计规范里都规定了图标的圆角的尺寸,但是它们都只考虑了夹角是直角的情况。如果给钝角和锐角设置上同样的圆角半径,这些规则就变得不太适用。

给小于 90° 的角设置和直角同样半径的圆角,圆角看上去会特别大;反之则看上去特别小。可以找一个钝角三角形来作为最直观的例子:

我做了一些视觉修正,让圆角看上去更一致,在调试的过程中发现他们似乎可以总结成公式,通过计算来得出更确切的数值,但却一直没能总结出来。这个问题就这样被放了一年多,直到昨晚在 Anyway.fm 的会员群里再次请教了这个问题。一个叫 @IpNeNaEcRe 的大神为这个问题给出了一个完美的答案,甚至还做了一个excel 表格用来更方便地计算圆角半径。

解决方法

他的方法是 让圆弧的长度保持一致

下方便是圆角半径的计算公式:(S 是圆弧长度, α 是夹角的大小 ,r 是圆角的半径。S1 等于 S2。)

下方则是经过圆角修正后的三角形, 看上去舒服多了:

此外,他还给了一个用 Excel 做的计算工具。可以在红色单元格里输入 90° 的时候的圆角半径,它会自动地算出其它角度下的圆角半径;也可以在灰色的单元格里输入没有罗列在表上的夹角值 α

你可以从这里下载这个计算工具:

13 KB | 石墨表格