苹果折叠屏火了，顺带把这个小小的 UI 也带火了。 很多人都在讨论它好不好看，但我更想拆一拆： 苹果的 UI 设计师，到底在想什么？ 我本身做图形算法和图形研究，所以多少有点“几何强迫症”， 很小的形状差异、色差，我一般都比较敏感 所以看到这个 UI 的第一眼，我就觉得有点别扭： 这个看起来像圆的东西，其实不是正圆，我看的稍微有点“别扭” 也正是这个小小的不对劲，让我想把它拆开看看。
放大以后还能看到两个细节。 第一，下面四个表示信号强弱的圆点，并没有老老实实贴在外圆弧的轨道上，而是整体往里缩了一点。 第二，这四个点本身也比外圈线条的“直径”更大，所以会轻微侵入内侧。 这个处理至少有两个作用：一是缩小以后，信号点更容易被看清；二是这点看似很小的“侵入”，其实对整个视觉平衡非常关键。 下面看为什么。
Negative Space Negative Space就是“负空间”或“留白”， 如果看Negative Space，就更明显了：每一块里的黑色视觉重量，其实并不一样。中间的 Wi-Fi 本身是一个向下收尖的倒三角结构，所以越靠下，两侧扇区里的黑色面积越少。于是下面四个圆点被刻意做大、往里侵一点，实际上是在给底部“补重量”。几何上不完全整齐，视觉上反而更平衡。
Visual Weight Balance 这张图会更直观。 如果把圆从中间一分为二，左边这个版本的下半圆明显更“空”，上下的 visual weight 不平衡，所以看起来会有一点发飘、不稳。 右边加上这四个小圆点以后，变化其实很明显：下面的视觉重量被补回来了，整个圆立刻稳住。 所以这四个小点虽然很小，承担的并不只是“信号格”的功能，它们还在做一件事：Visual Weight Balance。
极致就需要牺牲平衡 再张图先只看空间关系。一旦上面出现“16”，你会发现它明显侵占了上方空间。这样一来，下面四个点为什么要更大、为什么要往里收，就更容易理解了：它们是在给下半部分补视觉重量。 否则整个图形会明显头重脚轻。但开了数字以后，它依然不是绝对平衡的——上半部分还是更挤一点。这个地方我反而觉得很像苹果一贯的取舍：先把默认状态做到最漂亮，兼容状态再去求一个足够好的平衡，而不是一开始就为了所有状态做平均。所以这个设计真正有意思的地方是：它没有追求“每一种状态都一样完美”，而是给默认状态最高优先级。这也可以延伸到苹果很多产品设计上。它经常不会为了左右手、所有场景、所有兼容性，把结构做成一个完全中性的平均方案；它更愿意先把一个主路径做到极致，再让其他情况去适配。如果你要一句收尾，可以用：苹果很多设计的底层逻辑，不是“万物平均”，而是“主路径极致，兼容路径补偿”。
邻近原则 再看一个更基础、但更容易被忽略的东西：邻近原则。 为什么四个信号点彼此更近，而它们和外圈之间要更远？因为视觉距离本身就是一种语法：属于同一组的信息，间距就应该更小；不同层级之间，间距就应该更大。 这和字距、行距、段距、章节留白其实是一回事。 距离不是装饰，它直接在告诉你：谁和谁是一组，谁和谁不是。 所以像 Wi-Fi、数字、电量这些元素，间距本身就在表达它们的逻辑关系。真正好的设计，连空白都不是随便空的。
黄金家族三件套 “设计师工具箱”，黄金家族三件套，每个人都值得拥有
就像程序员会囤代码库一样， 做图形的人也值得有一套自己的 Golden Set： 1. Golden Ratio 2. Golden Circles 3. Golden Angle 接下来我就拿这三把尺子，去扒一扒苹果 UI 设计师到底藏了什么小心思。
Golden Ratio 先拿 Golden Ratio，也就是黄金分割 来量一下。 这里其实能看到不少接近黄金比例的关系。比如 Wi-Fi 最外层这道弧，它和外圈这两个主要尺度之间，基本落在一个黄金分割的关系里。 当然，它没有机械地卡在“数学上最标准”的位置后面会说为什么
Golden/Fibonacci Circles 再看第二把尺子：Golden/Fibonacci Circles。 这个很多非设计专业的人可能没那么熟。做法其实很直接：把 Fibonacci 数列里的 1、1、2、3、5、8、13… 变成一套固定尺寸的圆，设计里的主要弧线，尽量都从这套圆里取。 这样做的好处是，复杂图形里不同的曲线虽然大小不同，但背后讲的是同一种“几何语言”。 听起来简单，真正做起来其实很残酷：因为你不能想怎么弯就怎么弯。 黄金分割背后其实对应自然常数 φ≈1.618，喜欢数学的人知道自然常数是多逆天的存在，万事万物的规律底层中都有自然常数的影子，它在很多自然生长结构里都会反复出现。这个坑真要展开，一篇长文都讲不完，3大自然常数是什么？留给大家自己去挖。
Golden Angle 再看第三把尺子：Golden Angle，黄金角。 137.5°,一定要记得这个数字 如果你喜欢图形学,
搞程序的人，痴迷 65535 搞科学的人，痴迷5.39e-44 秒 搞金融的人，痴迷2.71828e≈2.71828 搞地理的人，痴迷 23.4° 搞图形的人，痴迷 137.5°，
因为有些数字，外行看就是数字，内行一眼就知道，背后连着一整套世界。 这个角度很神奇。黄金分割绕进一个 360° 的圆里，就会自然留下这个角：137.5° ≈ 360° × 0.382 137.5° 还能解锁斐波那契双螺旋，能解锁一堆日常无处不在的图形，包括向日葵、松果、叶序，树干分叉，等，这个数字背后的东西太多了，后面值得单独开一篇。 但至少这里，苹果设计师这点小心思，又被抓到了一点
我量了一下，这里还有一个挺巧的关系：单边这段电量弧，和上方被数字占掉的那一段弧长，比例也很接近黄金分割。当然，这里我不会把它说成严格构造，多少有一点拟合的成分。但有意思的是，当同一套比例关系反复出现在不同位置时，它就开始像设计语言，而不只是巧合。
高端的设计都是约束优先 正好看到这个电量数字 16，我又发现了一个挺有意思的细节。 前面那组 Fibonacci 圆里，2 号圆 原本一直没找到落点。结果一看数字，答案好像出来了：它很可能藏在数字的曲率里。 像 6、8、2、5 这些数字的弧线，和 2 号圆的弧度都挺接近。 当然，这里多少已经带一点“拟合”成分了，我不会硬说设计师真拿尺子一个个去卡。但很多优秀设计就是这样：未必是机械作图，最后却会自然收敛到同一套几何语言。 这其实恰恰说明，好的视觉排版，背后往往真的有规律。
接下来讲最实用的一把尺子：Golden/Fibonacci Circles。 它厉害的地方，是可以直接拿来做 Logo 的曲线约束。 比如 Twitter 那只经典的小蓝鸟，很多轮廓都能拆回一组标准圆弧。这样做出来的好处很直接：形状再复杂，曲线还是会显得特别整、特别顺，而且有统一的节奏。 所以专业 Logo 设计里，经常会看到这种方法。不是为了炫技，而是为了让复杂图形看起来像是同一个系统长出来的
再往下看，百事、苹果非常多顶级品牌logo都是用的是Golden/Fibonacci Circles这把尺子，以后设计logo不用一下是不是都不好意思和同行打招呼？ 高级的 Logo耐看是有原因的，往往不是“画得像”，而是背后有一套稳定的比例和曲率系统。 所以你会发现，品牌越大，图形反而越简单；但越简单，越经不起随便画。
过拟合 说回到苹果这个 Logo，民间一直流传着各种版本的几何拆解图，版本特别多。 但这些基本都不是苹果官方原稿，是热心设计师和粉丝做的“后验重构”。
其实都是拟合出来的，说简单点就是硬拼凑 其实我的拆解 也是有拟合成分的 连苹果原设计师 Rob Janoff 自己都说过，当年并不是照着这些图去画的。
但这才是最值得思考的：
真正的高手，未必拿着尺子按公式作图，但最后画出来的东西，往往还是会自然收敛到这些规律附近
也有不同的画风，很多都是装的 其实恨过设计搞，标注一堆曲线，网格线条的，那些是纯装饰 比如罗永浩当年发布会吹的这个logo设计多么匠心巧思， 说实话，我当时很同情罗永浩，被设计师忽悠瘸了，这个锤子logo，搞了那么多纯装饰的辅助线，负责任的说，没有任何节律，这就是纯装饰，因此出来的logo辨识度不好，也不耐看 （老罗别打我，我也支持过锤子手机，他这个人我挺喜欢他，但图形这个东西，我不能说瞎话，装就是装，要收购苹果，还是得扎扎实实研究原理）
其实到了 AI 时代，这些东西表面上看都很好解决。 黄金分割、φ、137.5°、Fibonacci Circles，本质上都是数学和几何规则，AI 学起来当然很快。 但这里有一个好消息：人的眼睛并不物理。 几何上完备的东西，到了人的视觉系统里，未必还是完备的。因为所谓美感，本质上就是图形最后有没有适配人脑这套视觉算法。 所以真正做到最后，往往还要加一层 Optical Correction，视觉校正。 而一讲视觉校正，就会碰到一个很关键的东西：Mach Band，马赫带
看到右侧方块的明亮的十字星了吗？ 这就是人眼睛的BUG 其实物理的灰阶是连续的，没有十字星 人的眼睛并不物理
我的长文总要求有奇怪的知识，“马赫带” 就是图形学底层之一 这背后的是诺奖级别的原理 人眼睛负责视觉的的视锥细胞有，侧抑制。 简单说，人眼睛一个感光细胞就像是一个像素矩阵，当1个像素收到强光刺激以后，相邻的感光像素就“瞎”了，即受到抑制 而网上场景的各自视觉错误/幻觉，很多底层原理都是马赫带说的侧抑。这背后诞生了无数发明， 当然也诞生了图形科学，设计里面更是无数不在 例如 这个经典的阿德尔森棋盘阴影错觉 它背后其实是侧抑制：亮的会压暗周围，暗的也会反过来抬高旁边。 所以人眼看到的明暗，从来不是物理值本身，而是被周围环境重新计算过一次
眼睛并不物理，知道他有什么用呢？ 图形学解释，人的大脑有物理BUG，但你美学本质就是你的东西匹配大脑这套有bug的算法，大脑感觉轻处理起来轻松，舒服，就有了美
设计就必须做Optical Correction 在物理看，这就是将错就错 取悦人脑 Optical Correction 这个东西可玄乎了， 玄乎到不那么容易被AI取代
Golden Ratio、Golden Angle 这些东西，本质上都只是在“物理”上完美，一旦掺入颜色、明暗、Negative Space的空间关系，那些“物理完美”在人眼睛里里是有bug的，都要再经过一轮人工的 Optical Correction， 这就是未来设计师 何三角形，空间不平衡，几何中心并不是视觉中心。几何中心并不是视觉中心。就不能居中放，比如 YouTube 这个播放三角， 这几乎都是常识一般的存在，但更重要的是，这个三角形究竟要往右移动多少刚好，没有一个放之四海而皆准的标注固定数值，因为它还会受到外框形状、颜色、明暗、边距，Negative Space 的影响，变量很多，这还只是简单的几何形，如果是复杂图形系统，基本上变量多到数不清，所有最后的绝招叫看感觉，这既是说为的设计艺术，靠训练出来的直觉，比算力快多了。 其实这些做图形学，理论上可以算，现在AI就有一套算法，能解决大部分平均的美感，但这种细致极端的还是靠人。 -你看这种就是著名的Retina字体，是专门为了小字体存在的，长大了看像妖魔鬼怪，缩小了他就是最清晰最完美的存在，这就是卡了人眼睛视觉的bug，就是矫枉过正的视觉补偿，成了最美的硬核原理
其实再建筑，字体，图形排版，非常普遍就不一一说了 现在回头再来看这个这个Icon 其实包含的东西不止这么多 最后主推新词“马赫带” 作为一个研究图形科学的人看 其实很多“审美”都能继续拆成比例、空间、颜色、材质、光线等变量。 问题不在于不能逻辑化，而在于变量太多，精确计算成本太高。 所以真正创作时，最后都会被压缩成直觉——直觉，直觉不是乱弄，本质上是大量规则被长期训练后的快速计算。马赫带只是一个最简单的入口。 它说明人眼看到的不是物理世界的原样拷贝，而是经过视觉系统处理后的结果。所以视觉校正本身及时一门艺术，其实“马赫带”很深，不只存在于字体、Logo和平面图形里，到了复杂图形、3D、材质、光影和空间关系中，同样成立。
设计真正面对的，不是几何本身，而是人最终怎么“看见”它。 最后顺便说一句：黄金分割、斐波那契这些,这些论文我没少研究，但股市里所谓“斐波那契回撤”并没任何有效的数学机制，也没有可靠证据证明他是天然有效。名字很数学，原理并不数学。
