Matrix 首页推荐
Matrix 是少数派的写作社区，我们主张分享真实的产品体验，有实用价值的经验与思考。我们会不定期挑选 Matrix 最优质的文章，展示来自用户的最真实的体验和观点。
文章代表作者个人观点，少数派仅对标题和排版略作修改。
干 UI 这行，对像素、尺寸和平衡感特别较真，估计不少同行也和我有同样的「强迫症」。所以呢，我打算跟大家讲讲，重叠的圆角是怎么影响物体视觉的，再聊聊其他常见的视错觉，顺便探讨一下该如何修正这些问题。
打个比方，现在有一个边长为 300px 的正方形，我们给它的角设置成 24px 的圆角。接着，在这个大正方形里面再放一个边长 260px 的正方形，同样也把它的角设置为 24px 的圆角。此时，大家仔细观察就能发现，里面小正方形内角的曲线，明显要比外面大正方形外角的曲线更显眼（可以参考下方的图示）。
这是什么原因造成的呢？其实是因为，当正方形的尺寸逐渐变小时，同样大小的 24px 圆角半径，在整个角当中所占的比例就会增大。圆角半径占比一旦增大，圆角曲线就会更加凸显，所以看起来也就更为明显了。
要去计算圆角率，方法很简单，用圆角尺寸除以一边的长就行。像这个 300px 边长的正方形，圆角是 24px，那圆角率就是 24÷300=0.08，换算成百分比就是 8%。
我们可以把算出的 8% 这个比例，应用到内部小正方形上。用小正方形边长 260px 乘以这个圆角率 0.08，得到 260×0.08=20.8px。
经过上述计算，我们得到了相对合适的圆角尺寸，现在内部小正方形的曲线，确实比使用相同角半径值时更加平缓了。
不过，实际观察时会发现，内侧曲线有时还是会让人感觉有点突出。尽管我们已经按照相同的圆角率来设置，但由于外框与内框存在位置上的里外关系，依然会造成视觉印象上的差异。比如在一些简洁风格的界面设计中，可能就会觉得内侧曲线即便经过比例调整，还是稍微强了点。当然，在不少设计场景下，这样的视觉效果是完全符合需求的。
但要是调整比例后图像仍然看起来不自然，但我们还有进一步的修正方法。
以这种圆角为例，再将其尺寸调整 0.7 到 0.8。比如说，原本按照比例计算出内部小正方形的圆角尺寸是 20.8px，在感觉不自然的情况下，通过微调，能进一步优化圆角的视觉效果，让整体画面更自然。
→ 24÷300=0.08
→ 260×0.08=20.8px
→ 20.8×0.7≒14.6px
当我们解决了圆角相关的视错觉问题后，在 UI 设计里，还有一种常见的视错觉情况。比如说，正方形和圆形并排出现时（可以看下方图示）：
一般来说，一个好的平衡是把圆放大约 3%~5%，可以让它们看起来大小相同。
视觉校正还是比较关键，就拿字母来说，圆形字母像 O/C，实际设计时一般会把高度增大2%~5%。当它们与直字母如 H/X 相邻排版时，在视觉上才不会显得过小，从而保证排版的协调性 。
就拿把三角形放在一个圆形内的情况来说，常见于视频播放图标这类设计。从数字参数来看，三角形明明位于圆形中心，但视觉上它却像是稍微向左移动了。这是因为横三角形的形状不对称，其表观重心位于圆心左侧。具体而言，把三角形的顶点到底面的距离分成三等分，三角形的重心处于顶点到底面距离的 2/3 处。所以，面朝右的三角形，重心会稍稍偏向中心左侧，重心也并非一定处于理想中的中间位置。
> 关注 少数派小红书，感受精彩数字生活 🍃
> 实用、好用的 正版软件，少数派为你呈现 🚀
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。