圆角矩形的圆角大小如何制定？

1.头像框的圆角定义

定义头像框之前需要我们先定义头像的圆角矩形圆角。为了保障界面里的头像圆角体感一致性，我们需要定义一个等比圆角矩形（卡片/头像等）的圆角系数：圆角和矩形宽的比值。举个例子：假设我们的圆角系数是0.3(遵循四舍五入)，那么圆角矩形为90*90px的时候，圆角即为27px。

如上图，当头像框大小改变时我们不能把圆角一直复用27px，而是把圆角固定百分之30%，这样可以保证我们界面上的所有圆角矩形的圆角幅度感受是一致的，不会一会大一会小了。另外给大家提供一个常规的等比圆角矩形圆角系数：0.03-0.05。

2.背景卡片的圆角定义

但圆角系数的用法仅限于等比圆角矩形，如果我们在设计背景卡片时候用到的不等比圆角矩形该如何定义它的圆角呢？

首先我们要定义一个界面里的最大圆角值（一般都是全屏圆角的大小），在最大圆角值基础上定义几个不同层级的圆角大小，圆角值梯度是可以由设计师根据界面的栅格密度自由发挥的。但一定要记得遵循以下2条规则：

1.同一层级的圆角矩形圆角需要保持一致（无论宽高）

2.小一层级的圆角矩形圆角必须小于高一层级的圆角矩形圆角，大小符合视觉圆角体感一致性原则（最好偶数）。