当前位置: 首页 > news >正文

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)中放大测量,这是最准确的方法。

http://www.lryc.cn/news/626302.html

相关文章:

  • Mac 4步 安装 Jenv 管理多版本JDK
  • Mac 上安装并使用 frpc(FRP 内网穿透客户端)指南
  • 第四章:大模型(LLM)】07.Prompt工程-(4)思维链(CoT, Chain-of-Thought)Prompt
  • 第四章:大模型(LLM)】07.Prompt工程-(5)self-consistency prompt
  • 编译安装 Nginx
  • 从AI小智固件到人类智能:计算技术的层级跃迁
  • Linux-----《Linux系统管理速通:界面切换、远程连接、目录权限与用户管理一网打尽》
  • JavaScript 检查给定的四个点是否形成正方形(Check if given four points form a square)
  • [特殊字符] 小豆包 API 聚合平台:让 AI 接入更简单、更高效
  • PyTorch API 7
  • Linux 文件系统权限管理(补充)
  • pinctrl和gpio子系统实验
  • 前后端联合实现文件上传,实现 SQL Server image 类型文件上传
  • LeetCode热题100--101. 对称二叉树--简单
  • 【Kafka】常见简单八股总结
  • 力扣 30 天 JavaScript 挑战 第36天 第8题笔记 深入了解reduce,this
  • Linux Shell 常用操作与脚本示例详解
  • CNN 在故障诊断中的应用:原理、案例与优势
  • DAY 50 预训练模型+CBAM模块
  • 排查Redis数据倾斜引发的性能瓶颈
  • VScode ROS文件相关配置
  • 什么是大数据平台?大数据平台和数据中台有什么关系?
  • 网络间的通用语言TCP/IP-网络中的通用规则3
  • A股大盘数据-20250819 分析
  • 【PyTorch】单对象分割项目
  • Arthas 全面使用指南:离线安装 + Docker/K8s 集成 + 集中管理
  • Python入门第11课:Python网络请求入门,使用requests库轻松获取网页数据
  • Linux的基本操作
  • 浅看架构理论(一)
  • RK3568 Linux驱动学习——Linux设备树