mac电脑软件左上角的关闭/最小化/最大化按钮菜单的宽度和高度是多少像素

macOS 上的窗口按钮尺寸在不同版本和不同外观下略有不同,但遵循着明确的规范。

简单直接的答案是:每个按钮的直径通常为 15 像素

但为了给您更全面和精确的信息,这里有一个详细的分解:

标准尺寸 (适用于 macOS Big Sur 及之后版本)

自 macOS Big Sur (11.0) 引入新设计语言以来,红黄绿"交通灯"按钮的尺寸和间距已经标准化。

  1. 单个按钮尺寸

    • 直径 (Diameter)15px (物理像素) 或 30pt (点 Points, macOS 的逻辑坐标单位,在标准视网膜屏幕上 1pt = 2px)。

    • 点击热区 (Hit Box)16px。为了便于点击,按钮的有效交互区域比视觉上的圆圈稍大。

  2. 按钮组整体尺寸

    • 总宽度 :三个按钮加上它们之间的间距,整个菜单栏的宽度约为 70px

    • 高度 :与窗口标题栏高度一致,通常是 28px (56px @2x)。

    • 按钮间距 :按钮中心点之间的间距约为 24px,这意味着按钮边缘之间的间距大约是 9px (24 - 15 = 9)。

总结一下标准尺寸表格

| 项目 | 物理像素 (px) | 逻辑点 (pt) | 备注 |

| :--- | :--- | :--- | :--- |

| 单个按钮直径 | 15px | 7.5pt | 视觉上的圆圈大小 |

| 按钮点击区域 | 16px | 8pt | 实际可点击的范围 |

| 按钮中心间距 | ~24px | ~12pt | 从一个圆心到下一个圆心的距离 |

| 按钮组总宽 | ~70px | ~35pt | 从最左按钮左边到最右按钮右边 |

| 标题栏高度 | 28px | 14pt | 窗口标题栏的典型高度 |

重要注意事项和变体

非活动状态:当窗口不是焦点窗口时,按钮会变为更浅的灰色,但它们的尺寸和位置保持不变。

旧版 macOS (Catalina 及更早版本):

在 macOS Big Sur 之前,按钮略小一些。

直径:通常为 14px (28pt @2x)。

间距和整体布局也稍紧凑一些。

开发者实践:

对于开发者来说,通常不需要手动测量或放置这些按钮。Apple 提供了标准的 NSWindow API 来自动处理这些控件。例如,使用 window.standardWindowButton(.closeButton) 来获取按钮实例,系统会返回一个尺寸和位置都符合当前 macOS 设计规范的按钮。

高分辨率屏幕 (Retina):

以上提到的像素 (px) 值都是指物理像素。在代码和设计稿中,开发者更多地使用点 (Points) 作为单位。在标准的 @2x Retina 屏幕上,1点 = 2像素。所以一个 15px 的按钮在代码中通常被表示为 7.5pt(但系统会使用整数,实际是通过 @2x 图像资源实现的)。

结论

对于绝大多数用途(例如UI设计、开发参考),您可以牢记:

macOS窗口控制按钮的视觉大小是直径为 15 像素的圆,它们作为一个整体的菜单栏宽度约为 70 像素,高度与标题栏一致(约28像素)。

如果您是为了进行像素级精确的UI设计或复制,建议直接使用截图工具(按住 Shift + Command + 4 然后按空格键选择窗口)截取一个窗口,然后在设计软件(如 Sketch, Figma, Photoshop)中放大测量,这是最准确的方法。