截图量尺寸误差很大,所以我写了一个 Swift 小程序,在 macOS 27.0.1 上直接创建 NSWindow、NSToolbar 和 NSMenu,遍历系统生成的视图层级读取布局;再把这个程序自己的窗口和弹出菜单渲染成图片取色,浅色和深色外观各渲染一次。整个过程不需要屏幕录制权限,也不会截到别的应用。
| 项目 | 数值 | 来源 |
|---|---|---|
| 窗口圆角(所有样式) | 16 pt | NSThemeFrame._cornerRadius |
| 红绿灯直径 | 14 pt | standardWindowButton |
| 红绿灯间距 | 9 pt | 按钮间距,中心距 23 pt |
| 统一工具栏标题栏 | 52 pt | frame − contentLayoutRect |
| 统一工具栏红绿灯位置 | (19, 19) | 左上角坐标 |
| 紧凑工具栏 | 40 pt,(12, 13) | .unifiedCompact |
| 无工具栏标题栏 | 32 pt,(9, 9) | .titled |
| 标签栏 | 36 pt | 两个标签页时 88 − 52 |
| 标签页胶囊 | 24 pt 高,左右内缩 10 pt | 渲染取样 |
| 工具栏按钮胶囊 | 36 pt 高,圆角 18 | NSToolbarPlatterView |
| 胶囊间距 / 右边距 | 8 pt / 8 pt | 同上 |
| 边栏按钮 | 36 × 36,(96, 8) | .toggleSidebar |
| 工具栏标题 | 13 pt 粗体 + 11 pt | 有副标题时;没有时 15 pt 中粗 |
| 菜单圆角 | 12 pt | NSPopupMenuWindow |
| 菜单项高度 | 24 pt | NSMenu.size 逐项递增 |
| 菜单上下内边距 | 5 pt | 单项菜单 34 pt |
| 菜单选中高亮 | 内缩 5 pt,圆角 7 pt | 弹出菜单渲染取样,#418FF8 |
| 菜单文字起点 / 快捷键右边距 | 28 pt / 13 pt | 菜单项视图布局 |
| 菜单分隔线 | 11 pt 行高,线宽 1 pt | 左缩 30 pt,右缩 16 pt |
| 滑块 | 轨道 6 pt,滑钮 20 × 16 | NSSliderCell barRect / knobRect |
| 开关 | 54 × 24,滑钮 31 × 20 | NSSwitch |
| 分段控件 | 24 pt 高,圆角约 8 | 选中段整段填充强调色 |
| 控件强调色填充 | #408CF4 / #4792F9 | 浅色 / 深色渲染取样 |
| 系统字号 | 13 pt | NSFont.systemFontSize |
| 强调色 | #007AFF | controlAccentColor |
红绿灯不再是纯色
Golden Gate 的红绿灯带玻璃质感。逐像素取样能看出结构:上下各有一道 1 pt 的亮边,主体从上往下先变暗再变亮,底部中间有一团较亮的光。以红色为例,顶部 #EE8574,中段 #EA7361,底部 #E68779,亮边 #FFB1A6。窗口失去焦点时三个按钮变成灰色:深色外观下是 #5B5B5B 到 #505050,保留上下亮边;浅色外观下几乎是白色,左右两侧有一圈 #B8B9BD 的灰边。
没量到的
程序坞属于系统进程,读它的几何信息需要辅助功能或屏幕录制权限。能拿到的只有图标尺寸(74 pt)和系统为它留出的底部高度(100 pt),这里的程序坞按这个比例缩放。
标签页
原生标签栏里,每个标签页是一个独立的 24 pt 胶囊,均分宽度,相邻胶囊紧贴;当前标签页文字是白色,其余是灰色。这里给当前标签页加了一层液态玻璃,和工具栏按钮保持一致。