从原生窗口量出来的尺寸

· 设计

截图量尺寸误差很大,所以我写了一个 Swift 小程序,在 macOS 27.0.1 上直接创建 NSWindow、NSToolbar 和 NSMenu,遍历系统生成的视图层级读取布局;再把这个程序自己的窗口和弹出菜单渲染成图片取色,浅色和深色外观各渲染一次。整个过程不需要屏幕录制权限,也不会截到别的应用。

项目数值来源
窗口圆角(所有样式)16 ptNSThemeFrame._cornerRadius
红绿灯直径14 ptstandardWindowButton
红绿灯间距9 pt按钮间距,中心距 23 pt
统一工具栏标题栏52 ptframe − contentLayoutRect
统一工具栏红绿灯位置(19, 19)左上角坐标
紧凑工具栏40 pt,(12, 13).unifiedCompact
无工具栏标题栏32 pt,(9, 9).titled
标签栏36 pt两个标签页时 88 − 52
标签页胶囊24 pt 高,左右内缩 10 pt渲染取样
工具栏按钮胶囊36 pt 高,圆角 18NSToolbarPlatterView
胶囊间距 / 右边距8 pt / 8 pt同上
边栏按钮36 × 36,(96, 8).toggleSidebar
工具栏标题13 pt 粗体 + 11 pt有副标题时;没有时 15 pt 中粗
菜单圆角12 ptNSPopupMenuWindow
菜单项高度24 ptNSMenu.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 × 16NSSliderCell barRect / knobRect
开关54 × 24,滑钮 31 × 20NSSwitch
分段控件24 pt 高,圆角约 8选中段整段填充强调色
控件强调色填充#408CF4 / #4792F9浅色 / 深色渲染取样
系统字号13 ptNSFont.systemFontSize
强调色#007AFFcontrolAccentColor

红绿灯不再是纯色

Golden Gate 的红绿灯带玻璃质感。逐像素取样能看出结构:上下各有一道 1 pt 的亮边,主体从上往下先变暗再变亮,底部中间有一团较亮的光。以红色为例,顶部 #EE8574,中段 #EA7361,底部 #E68779,亮边 #FFB1A6。窗口失去焦点时三个按钮变成灰色:深色外观下是 #5B5B5B 到 #505050,保留上下亮边;浅色外观下几乎是白色,左右两侧有一圈 #B8B9BD 的灰边。

没量到的

程序坞属于系统进程,读它的几何信息需要辅助功能或屏幕录制权限。能拿到的只有图标尺寸(74 pt)和系统为它留出的底部高度(100 pt),这里的程序坞按这个比例缩放。

标签页

原生标签栏里,每个标签页是一个独立的 24 pt 胶囊,均分宽度,相邻胶囊紧贴;当前标签页文字是白色,其余是灰色。这里给当前标签页加了一层液态玻璃,和工具栏按钮保持一致。

← 液态玻璃博客