macos-design

macOS 原生应用设计技能

构建让用户觉得属于自己电脑的界面，而不是硬塞进窗口的网站。

核心理念

原生应用不是一个目的地，而是用户需要时随手可用的系统工具。围绕这一原则设计每一次交互：需要时出现，用完后立即让开。

编码前

根据你要构建的内容阅读以下参考资料：

• 所有 macOS 应用 → 阅读 references/layout-and-composition.md（必读）
• 带有键盘快捷键、面板、提示条、弹出框的应用 → 阅读 references/interaction-patterns.md
• 浅色／深色模式、颜色、排版 → 阅读 references/visual-design.md

快速入门检查清单

编写代码前，请先完成以下检查：

1. 布局：顶部栏用于全局操作，侧边栏用于导航（导航内容极少时可省略），中央区域用于展示内容
2. 红绿灯按钮：将其融入 UI 中，例如放在顶部栏或侧边栏，不要让它们突兀地悬浮
3. 窗口拖动区域：顶部约 50px 必须可拖动，并保持简洁
4. 空状态：展示空状态。渐进式呈现——仅在 UI 有用时才显示
5. 键盘快捷键：每个主要操作都需要快捷键。每个快捷键都需要视觉反馈
6. 浅色 + 深色模式：两种模式都要设计。不要直接反转颜色（参见 visual-design 参考资料）
7. 搜索：始终醒目且易于访问。可考虑使用浮动搜索栏或命令面板
8. 拖放：支持将内容拖入和拖出应用。这是原生体验不可或缺的一环
9. 微动画：每次状态变化都要有过渡效果。交互必须有反馈
10. 引导流程：简短、基于模态窗口，通过实际操作教会用户使用快捷键（而非让用户阅读说明）

实现说明

以 Web 工件的形式构建（React/HTML）时：

• 模拟 macOS 窗口边框（标题栏、红绿灯按钮、圆角）
• 使用 -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text" 字体栈
• 使用 backdrop-filter: blur() 实现原生的活力／半透明效果
• 圆角：窗口 10px、卡片 8px、按钮 6px、输入框 4px
• 遵循 prefers-color-scheme 媒体查询，实现浅色／深色模式自动切换
• 阴影应轻柔且有层次，不要使用单一厚重的投影

使用 Electron、Tauri 或原生框架构建时：

• 尽可能集成系统标题栏
• 遵循系统强调色和外观设置
• 使用原生拖放 API，而不是 polyfill