💡 导读：苹果折叠屏工程概念的亮相，不仅引爆了整个数码圈，更顺带将屏幕上一枚微小的状态 UI 推上了风口浪尖。 很多人都在讨论它好不好看，但对于图形算法工程师与视觉研究者来说，这枚小小的图标背后，隐藏着一套极其硬核的**几何法则、视觉重量平衡、人眼感知缺陷补偿与光学校正（Optical Correction）**体系。
本文由图形学研究者 西西米修斯（@Sisymithus） 撰写。从“几何强迫症”视角出发，层层拆解黄金分割、斐波那契圆、137.5° 黄金角、负空间以及诺奖级神经原理“马赫带”，带你一窥顶级科技大厂设计师在像素级微观世界里的真正思考。
01｜引言：当苹果折叠屏 UI 遇上“几何强迫症”
苹果折叠屏火了，顺带把这个小小的 UI 也带火了。
我本身做图形算法和图形研究，所以多少有点“几何强迫症”，很小的形状差异、色差，我一般都比较敏感。
所以看到这个 UI 的第一眼，我就觉得有点“不对劲”：
这个看起来像圆的东西，其实根本不是正圆。
也正是这个小小的“别扭”，让我决定把它彻底拆开看看。放大到像素级以后，立刻能抓到两个极其反直觉的微观细节：
- 轨道内缩：下方四个表示信号强弱的圆点，并没有老老实实贴在外圆弧的几何轨道上，而是整体往里缩了一点；
- 边缘侵入：这四个圆点本身的“直径”，明显大于外圈线条的线宽，因此会轻微侵入内侧空间。
这个看似不规整的几何处理，至少承担了两个核心作用：
- 可读性保障：在折叠屏外屏或微小物理尺寸下缩小展示时，加大的信号点更容易被人类肉眼快速辨识；
- 视觉平衡补权：这一点看似细微的“空间侵入”，恰恰是整个图形维持视觉重心的胜负手。
02｜负空间 (Negative Space) 与视觉重量平衡
要理解设计师为什么敢于破坏绝对几何对称，必须引入图形学中的 Negative Space（负空间 / 留白） 概念。
如果我们观察负空间的面积权重，现象会变得极为明显：每一块区域里的黑色视觉重量（Visual Weight），其实并不相等。
- 图标正中央的 Wi-Fi 符号本身是一个向下收尖的倒三角结构；
- 随着结构往下收窄，两侧扇区里的黑色留白面积越来越小，导致下半部分在几何上极其空旷；
- 于是，设计师把下方四个圆点刻意做大、往内侧侵入，实际上是在给整个图形的底部“补足视觉重量”。
几何上不完全整齐，视觉上反而更平衡。
这张对比图展示得淋漓尽致：
- 如果把圆从正中一分为二：左边没有圆点的版本，下半圆明显过于“空荡”，上下视觉重量失衡，整体看起来发飘、下盘不稳；
- 加上四个小圆点之后：底部的视觉分量瞬间被补齐，整个圆形结构立刻在视网膜中稳稳落地。
这四个小圆点承担的绝不仅仅是“显示信号格”的业务功能，它们在图形学底层做的事情，叫做 Visual Weight Balance（视觉重量动态平衡）。
03｜极致状态与主路径妥协：电量数字 16 的取舍
当状态组件中接入真实业务场景——例如顶部显示电量百分比 “16” 时，整个图形的空间关系再次被打破：
一旦上方浮现出数字“16”，它明显挤占了上方的负空间。这样一来，前文提到“为什么下方四个点要更大、为什么要往里收”的底层原因就更加显豁了：它们必须为下半部分补偿更多视觉重量，否则整个图形会严重头重脚轻。
但即便加上了数字补偿，它在严格意义上依然不是绝对平衡的——上半部分仍然稍显紧凑。
这个微妙的取舍，恰恰体现了苹果产品设计一贯的哲学根基：
💡 核心定律：先把默认状态（Default State）做到最漂亮，兼容状态再去求一个足够好的平衡，而不是一开始就为了照顾所有边缘情况去做毫无特色的中庸平均。
| 维度 | 平庸设计方案（平均主义） | 苹果设计哲学（主路径极致） |
|---|---|---|
| 优先级定位 | 试图让每一种极端场景都保持平庸的及格 | 赋予最高频的默认状态最高优先级 |
| 状态兼容策略 | 为适应多字符、左右手、多语言拉宽结构 | 默认态打磨至极致，兼容态通过微调进行光学补偿 |
| 设计收敛法则 | 万物平均，处处妥协 | 主路径极致，兼容路径动态补偿 |
邻近原则 (Proximity Principle)：距离就是视觉语法
再看一个更基础、但极易被初级开发者忽略的界面法则：邻近原则。
为什么四个信号点彼此之间贴得很近，而它们与外圈轨道之间却留有明显间距？
因为在人机交互视觉中，空间距离本身就是一种信息语法：
- 同组信息：逻辑属于同一业务单元的数据，物理间距必须更小；
- 异构层级：跨层级或不同维度的控制元素，间距必须显著拉开。
这与排版中的字距（Kerning）、行距（Line-height）、段落留白（Margin）与章节间距完全是一套底层逻辑。距离从来不是用来填充空白的无意义装饰，它在第一毫秒就无声地告诉用户大脑：谁和谁是一组，谁和谁是独立分级。
04｜设计师的“黄金家族三件套” (The Golden Set)
就像资深软件工程师都会沉淀自己经过千锤百炼的底层算法库一样，顶级图形设计师与工业造型师心中，也藏着一套被称为 Golden Set（黄金家族三件套） 的精密标尺：
黄金三件套体系
| 标尺名称 | 数学本质 / 常数 | 几何表现形式 | 核心价值 |
|---|---|---|---|
| 1. Golden Ratio | 黄金分割比 $\phi \approx 1.618$ (或 $0.618$) | 尺度、线宽、负空间与比例分割 | 赋予异构元素跨尺度的天然和谐感 |
| 2. Golden Circles | 斐波那契数列 $1, 1, 2, 3, 5, 8, 13\dots$ | 固定级数曲率圆环矩阵 | 让复杂的复合曲线归属于同一几何语言 |
| 3. Golden Angle | $137.5^\circ \approx 360^\circ \times (1 - 0.618)$ | 径向旋转、黄金双螺旋叶序分布 | 破除周期性单调，呈现自然生长律动 |
接下来，我们拿这三把尺子，去逐一测量苹果 UI 设计师到底注入了哪些构图心机。
尺子一：Golden Ratio（黄金分割）
先拿最经典的 Golden Ratio（黄金分割） 来丈量这个图标：
在测量中可以清晰发现多个高度吻合黄金比例的几何关系：例如 Wi-Fi 最外层展开的弧线尺度，与外圈主轮廓尺寸之间，几乎严丝合缝地落在黄金分割比例区间内。
当然，它并没有机械僵硬地锁死在数学标准点上，而是经过了微调——为什么微调？后文将揭晓。
尺子二：Golden/Fibonacci Circles（斐波那契圆）
很多非设计专业的人可能对第二把标尺相对陌生：Golden / Fibonacci Circles。
它的构造方式极其严谨：把 Fibonacci 数列里的 $1, 1, 2, 3, 5, 8, 13\dots$ 转化为一套固定尺寸的圆形曲线模具。在设计界面或图标中的主要转角与弧线时，所有曲线必须严格从这套圆弧中裁切取用。
这样做的好处是极其巨大的：复杂图形里哪怕包含数十段不同大小的曲线，其背后的曲率半径全部源于同一组数学基底，视觉上具有不可撼动的整体韵律感。
听起来优美，实际操作却极其严苛残酷：因为设计师失去了随手拉动贝塞尔手柄（Bezier Curve）的自由度，每一根弧线都必须在严格的数学约束中收敛。
尺子三：Golden Angle（137.5° 黄金角）
再看第三把更为神奇的尺子：Golden Angle（黄金角，137.5°）。
💡 数字的玄机：
- 搞系统架构的程序员，痴迷 65535；
- 搞理论物理的学者，痴迷普朗克时间 $5.39 \times 10^{-44}$ 秒；
- 搞量化金融的操盘手，痴迷自然常数 $e \approx 2.71828$；
- 搞天文地理的专家，痴迷黄赤交角 23.4°；
- 而搞图形学与视觉科学的人，深入骨髓的是 137.5°。
当黄金分割比绕进一个 360° 的圆周闭环中时，就会自然切割出这个角度： $360^\circ \times (1 - 0.6180339887) \approx 137.5077^\circ$
$137.5^\circ$ 是大自然生成向日葵籽粒、松果鳞片、叶序生长和植物分叉的底层双螺旋密码。在苹果这枚微型 UI 中，单边电量弧与各组件的展开夹角，同样敏锐地呼应着 $137.5^\circ$ 的黄金节律。
经过精确测量：单边这段电量弧的物理长度，与上方被电量数字占掉的那一段弧长，比例同样高度逼近黄金分割比。当同一套比例关系反复出现在图形的各个维度时，它就超越了巧合，成为了成体系的设计语言。
05｜高端设计都是约束优先：曲率收敛与过拟合陷阱
观察电量数字“16”的微观形态，还会发现一个更为隐蔽的线索：
在前文那组 Fibonacci 圆中，2 号圆 一直没有在主体外框中找到对应落点。但当放大数字 16 时，答案浮出水面：它藏在了数字笔画的倒角与曲率之中。 像 6、8、2、5 这些数字的内环圆弧，与 2 号斐波那契圆的弧度达到了极高契合度。
顶级设计未必是机械式地套用几何公式，但顶尖视觉敏锐度最终会自然收敛到同一套几何公理体系之中。
为什么大品牌的顶级 Logo 经久耐看？
黄金斐波那契圆最经典的落地场景，正是顶级品牌的 Logo 设计：
例如 Twitter 极为经典的“小蓝鸟”标志，其全身每一道羽毛与嘴喙的轮廓，全部由 13 个大小严格遵循特定尺度的标准圆弧相切而成。
百事（Pepsi）、苹果（Apple）等全球标志性符号的背后，都有着一套稳定严密的曲率约束系统。越是伟大的品牌，图形往往越简洁；但越是简洁的图形，越经不起随意的无序涂抹。
警惕“过拟合”与伪科学装腔
但在此必须指出一个关键事实：民间流传着大量关于苹果 Logo 几何画法的拆解，其中绝大部分是后验的“过度拟合”。
连苹果 Logo 的原创设计师 Rob Janoff 本人都曾公开表示，当年画这颗咬了一口的苹果时，并没有拿着圆规和尺子一条条去对标黄金螺旋。
但这恰恰是最值得我们思考的地方：真正的高手虽然没有刻意套用公式，但长年对视觉规律的严苛训练，让他们创作出的形状会自发逼近数学上的最优解。
与此相对的，则是很多为了“装腔”而强行绘制的伪几何：
当年罗永浩在发布会上展示的锤子 Logo“匠心设计”，铺满了密密麻麻的同心圆与切线。但从严肃图形学角度来看，那些网格线绝大部分是无序且缺乏节律的纯装饰装点，既没有统一的曲率序列，也没有视觉重量的补偿逻辑。失去了内在约束机制，图形最终既不耐看，也缺乏辨识度。
06｜人眼并不物理：马赫带 (Mach Band) 与神经侧抑制
进入 AI 时代，大模型能够轻松在几毫秒内生成符合黄金分割、斐波那契数列与精确几何对齐的代码或矢量图。
然而，计算机图形学与人类感官之间，横亘着一道极其深邃的物理鸿沟：
🚨 铁律：人类的眼睛与视觉中枢，并不是一台忠实还原物理光子的相机。
几何与物理上绝对完备对称的东西，投射到人脑神经回路里，往往会产生严重的畸变。
不信请看下面这幅经典的灰阶渐变图：
看到右侧方块中央明亮的“十字星”了吗？
在物理世界里，那颗发光的十字星根本不存在。 每一个色块的灰阶都是均一且连续递减的。你之所以能看到发光的亮线，是因为人类视网膜存在一个底层“神经 BUG”——侧抑制（Lateral Inhibition），它构成了图形学著名的 Mach Band（马赫带效应）。
| 生物神经机制 | 物理光子事实 | 人眼视网膜实际感知 | 设计应对哲学 |
|---|---|---|---|
| 视锥细胞侧抑制 | 连续平滑的阶梯灰阶，边缘处光强无突变 | 受强光刺激的像素会主动压暗周围细胞，使交界明处更亮、暗处更暗 | 必须进行人工色阶与亮度校正 |
| 阿德尔森棋盘错觉 | A 块与 B 块的 RGB 物理色值完全一致（均为 #707070） | 大脑根据周围阴影自动脑补了反差，坚信 B 块比 A 块明亮得多 | 界面层次严禁仅凭绝对色值设计 |
人眼感知到的明暗与轮廓，从来不是物理数值的直接读取，而是被视网膜与大脑皮层动态重新运算过后的“加工产物”。
这正是为什么单纯依赖数学物理完美的设计，往往在视觉上显得僵硬、失衡甚至丑陋。
07｜光学校正 (Optical Correction)：将错就错取悦大脑
既然人类视觉系统存在天然的“感知 BUG”，高级设计就必须完成一件极其微妙的工作：Optical Correction（光学校正 / 视觉补偿）。
在物理学看来，这叫“故意做错”；但在美学与认知工程看来，这是以高超的直觉“将错就错，取悦人脑”。这也是光学校正极难被纯算力 AI 简单取代的核心原因。
经典案例一：几何中心 ≠ 视觉中心
在三角形等非对称多边形中，几何重力中心与人类认定的视觉平衡中心从来不在同一个点上。
例如 YouTube 等所有主流平台的播放按钮“三角图标”：如果直接按照代码计算的绝对中心水平居中，三角形在视觉上会极其别扭地“偏左”。设计师必须将其强制向右位移若干像素，使其在视网膜中恢复稳态。
而这个位移量并没有通用公式，它随时受制于外框圆角、长宽比、明暗对比与周围负空间的多维影响。
经典案例二：微观畸变造就极致清晰的 Retina 字体
著名的微型屏幕专用字体（如早期的 Retina 印刷与微字号字体），放大来看如同“妖魔鬼怪”：笔画交界处有夸张的墨洞（Ink Traps）、字干粗细严重扭曲。
但一旦缩小到几毫米的真实物理尺寸，这些夸张的矫枉过正恰好抵消了油墨扩散或像素光晕的侧抑制模糊，呈现出极致工整、锐利清晰的字体渲染。
经典案例三：古希腊柱卷杀（Entasis）与现代建筑弧度
早在两千多年前，古希腊建筑师在修建帕特农神庙时就已经掌握了这门科学：如果石柱修成笔直的圆柱，人眼远远望去柱子中间会产生向内凹陷的“细腰错觉”。因此，工匠们刻意把石柱中间向外微微隆起（称为 Entasis 卷杀），以几何上的“微鼓”换取肉眼中的“笔直”。
从古代神庙到 Retina 字体，再到苹果这枚折叠屏 UI，光学校正的基因在人类最高水准的工程中传承了两千年。
08｜总结：设计的终极本质是匹配人脑算法
现在，当我们重新审视苹果折叠屏上这枚不起眼的状态图标与动态交互时，它所包含的思考已经远远超出了“好看”与“不好看”的初级审美范畴：
- 审美不是玄学，它是由大量物理与几何参数交织而成的超高维函数；
- 之所以很多人觉得设计靠“感觉”，是因为变量太多（曲率、间距、色度、光影、负空间、人眼感知），精确数学计算的成本太高；
- 顶尖设计师所谓的“直觉”，本质上是大脑经过海量优秀作品训练后，能够毫秒级完成多维收敛的生物神经网络算法；
- 设计真正面对的受众，从来不是无生命的几何坐标系，而是人类大脑那套带有偏置、充满错觉却又无比精妙的视觉认知系统。
📌 结语：搞懂了马赫带、负空间与光学校正，你才算真正看懂了苹果 UI。在人人都能用 AI 一键出图的时代，对底层原理的敬畏与对人脑认知的洞察，才是创作者最深厚的护城河。
ℹ️ 版权与原文出处声明：
- 原作者：西西米修斯（@Sisymithus）
- 推文原文：看看苹果设计师到底在想什么？
- 发布日期：2026 年 9 月 15 日
- 版权声明：本文著作权与配图归原作者所有，经结构化整理呈现供界面设计与图形学技术学习交流。