提到苹果那套圆角设计,以前我以为那是有章可循的,像大家常说的,把大圆角的半径设成小圆角的半径再加上间距,这样两层就能严丝合缝地贴在一起。结果我去扒拉了iOS 26的官方Figma组件库,发现根本没那么完美!很多双层圆角看着都像是没对齐的,实际尺寸一算都差了好几个数,我自己做的这套Figma组件能帮你搞定这些标注,文末我放了链接。不过话说回来,普通人眼睛哪有像素那么尖?看着顺眼就行,太计较数值的人还是别跟苹果较劲了。你要非得把UI设计当成数学题来解,那确实没必要。其实很多做App、网页或者PC端的,连个像样的圆角都画不圆,还不如学学苹果的样子。 不过要想把这双层圆角做得规整确实不容易,我以前试过也失败了。主要难点在于:第一,为了对齐圆角,外层的容器半径就得变大。拿iOS 18那会儿来说,弹窗的圆角本来就不大,后来iOS 26为了让两层贴边,必须得把容器的圆角尺寸给加起来。第二,容器的边距也得跟着变。像下图这样,iOS 26把圆角弄大后,边距也从16和19改成了22。这么大的内边距会挤占内容空间,把屏幕利用率给拉低了。第三,文字和按钮的边距总是闹矛盾。你看iOS 26的弹窗,文字离边的距离和按钮离边的距离不一样。如果强行改成统一的边距,就会显得要么文字太靠里,要么按钮离得太远。为了舒服点,设计师和开发都得搞两套内边距的数据。第四,有些组件的圆角不能乱改。按钮用大圆角没问题,但文本框用大圆角就看着怪里怪气的,除非是搜索框这种情况。 其实圆角设计的基本规则就是要符合用户预期。像按钮和标签一般都是大圆角,输入框通常是小圆角或者干脆没有圆角。同一个图标在不同地方放大缩小的时候,也要保持比例一致。2026年8月20日到23日,IXDC2026国际体验设计大会要在北京开了。这个大会聚焦“人机共生:创造有温度的智能体验”,作为全球领先的盛会,它把前沿理念和实践都带到了现场。在这里你能链接到全球顶尖的设计资源,拿到能落地的解决方案,还能拓展人脉视野。想去的赶紧买票参加吧!