苹果的圆角好规整,但大多APP设计不来

之前看过一个设计规则，就是两个圆角套在一起时，大圆角的半径等于小圆角的半径加上二者的间距。这样就能保证两层圆角之间的距离严丝合缝地保持统一。

而苹果手机更新到 iOS 26 后，圆角感觉都挺符合这个原则的。

我一边感叹苹果设计师的严谨态度，一边在 iOS 26 的官方Figma组件库上测量圆角尺寸，然后惊讶地发现……

其实并没有那么严丝合缝！

例如下图这些双层圆角，表面看起来很贴合，但实际算一下尺寸，都差了几个数字，不完全严谨。

对了，上图的尺寸标注，是我自己做的一套Figma组件，用起来非常方便。如果你需要，文章末尾可以免费领取。

那好吧，反正绝大多数用户没有像素眼，只要看起来大致规整，数字上并不需要那么完美。

如果把UI设计搞成数学题，那就没必要了。苹果能做出这个效果，已经很好了。

要知道绝大多数产品，包括App、网页、PC端软件等……连苹果这种看似规整的圆角都做不到。

为什么大家不能跟苹果学学这种规整的双层圆角设计呢？

其实我以前还真的尝试过，但很快就发现了难点。

对齐圆角的设计难点

1. 容易导致容器圆角太大

iOS 18 因为不需要考虑圆角对齐的问题，当时的弹窗圆角不是很大。大部分移动端APP弹窗的圆角，也差不多就是这个尺寸。

但是 iOS 26 为了对齐圆角，必须把外层容器的圆角做得很大。

2. 大圆角容器要搭配大边距

容器的圆角大了，边距也要大一些，否则看起来就很奇怪。例如下图，iOS 26 加大圆角的同时，也把间距从16和19加到了22。 

内边距大了，就会挤占内容空间，降低屏效。

3. 文字边距与按钮边距的矛盾

仔细看 iOS 26 的弹窗就会发现，文字边距和按钮边距是不同的。

如果改成统一边距，向下图这样，要么会感觉要么文字太贴边了，要么感觉按钮距离边缘太远了。

为了让文字和按钮看起来更舒适，只能搞2套内边距。这对设计师和开发来说，都更麻烦了。

4. 有些组件的圆角尺寸不能随便改

iOS 26 的设置页，图标没有跟外层卡片对齐圆角。如果要对齐，需要把图标改成圆形，但那样会导致视觉上更拥挤，而且识别度下降。

按钮用大圆角没问题，但文本框也用大圆角就有点奇怪了，除非是搜索框。

iOS 26 有很多大圆角输入框，但这种操作系统本身也没有很多输入框组件，所以问题不大。

但是对于表单较多的产品，例如B端设计规范，就很少见到哪家的输入框用大圆角的。

有多少设计会对齐圆角吗？

我们来投个票吧：

圆角设计的基本规则？

其实很多大厂的设计系统，也没有在圆角尺寸上做特别定义。

但整体有2点原则：

1. 同级别元素的圆角尽量统一

例如菜单容器和弹窗容器，都是容器层级，圆角就可以统一。再比如开关和按钮，都在容器内容，属于统一层级，圆角就可以统一。

2. 圆角尺寸要符合用户预期

例如按钮或标签通常是大圆角，输入框通常是小圆角或者无圆角的。同一个图标，在不同地方的圆角应该是符合等比放大原则。

如果你有更具体的设计心得，欢迎留言分享～

Figma尺寸标注组件

点击左下角体验进阶头像后，回复：尺寸标注。