圆角视觉平衡的修正

如果你是一个有强迫症的设计师，你会发现在绘制 icon 的过程中，对不同角度应用同样半径的圆角会出现严重的视觉不平衡现象

根据上图可以看出，在圆角半径恒定的状态下：

• 夹角越小，圆角弧长越大，视觉上圆角就越大

• 夹角越大，圆角弧长越小，视觉上圆角就越小

那么如何设置各个圆角的半径才能实现视觉上的平衡呢，秘诀就是保持圆弧长度恒定，让圆角半径随着直线夹角的变化而变化，这样不管直线夹角如何变化，圆弧长度是恒定的，视觉上圆角的大小也相对平衡

下图是以 90° 夹角时圆角弧长为恒定长度，保持弧长恒定的圆角，对比半径恒定的圆角，可以看出视觉效果大大改善

在图标中的实际应用表现

那么如何才能计算出恒定圆角弧长情况下不同角度对应的圆角半径呢

• 直线的夹角 α 和圆角弧线对应的角度 θ 之和为 180°：α+θ=180°

• 圆角半径 r 与圆角弧线对应的角度 θ 成反比关系：r=S/(π×θ/180°)

• 圆角半径 r 与直线的夹角 α 成正比关系：r=S/(π×(180°-α)/180°)

祭出神器 EXCLE：

根据直线夹角 α 计算圆角半径

根据圆弧对应角度 θ 计算圆角半径

以上是通过 90° 标准下的圆角半径来得到其他角度下的圆角半径，除此之外，两个不规则角度下的圆角半径换算也可以进行：

不规则角度下的圆角半径换算

计算表格已经上传到附件中，需要的同学们可以下载使用。

本文内容为个人原创，转载请私信