Back to Details

macos-design

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

macOS Native App Design Skill

macOS原生应用设计技能

Build interfaces that feel like they belong on the user's computer — not websites crammed into a window.
构建真正适配用户电脑的界面——而非塞进窗口的网页。

Core Philosophy

核心理念

A native app is not a destination. It is a system tool that lives where the user needs it. Design every interaction around this principle: appear when needed, get out of the way immediately after.
原生应用不是一个「目的地」，而是一个系统工具，存在于用户需要它的地方。所有交互都要遵循这一原则：需要时出现，完成后立即隐去。

Before You Code

编码前准备

Read these references based on what you're building:
  • All macOS apps → Read 
    references/layout-and-composition.md
    (required)
  • Apps with keyboard shortcuts, panels, toasts, popovers → Read 
    references/interaction-patterns.md
  • Light/dark mode, color, typography → Read 
    references/visual-design.md
根据你要构建的内容阅读以下参考文档：
  • 所有macOS应用 → 阅读
    references/layout-and-composition.md
    （必填）
  • 包含键盘快捷键、面板、提示框、弹出框的应用 → 阅读
    references/interaction-patterns.md
  • 涉及明暗模式、色彩、排版的应用 → 阅读
    references/visual-design.md

Quick-Start Checklist

快速启动检查清单

Use this as a pre-flight before writing any code:
  1. Layout: Top bar for global actions, sidebar for navigation (skip if nav is minimal), center for content
  2. Traffic lights: Integrate into the UI — top bar or sidebar, never floating awkwardly
  3. Window drag zone: Top ~50px must be draggable, keep it uncluttered
  4. Empty states: Show them. Progressive disclosure — only reveal UI when it's useful
  5. Keyboard shortcuts: Every primary action needs one. Every shortcut needs visual feedback
  6. Light + Dark mode: Design both. Do NOT directly invert colors (see visual-design reference)
  7. Search: Always prominent and accessible. Consider floating search bar or command palette
  8. Drag and drop: Content in AND out of the app. This is non-negotiable for native feel
  9. Micro-animations: Every state change gets a transition. No interaction without feedback
  10. Onboarding: Brief, modal-based, teaches shortcuts through doing (not reading)
在编写任何代码前，用这份清单做预检查：
  1. 布局：顶部栏用于全局操作，侧边栏用于导航（若导航极简可省略），中间区域用于展示内容
  2. 红绿灯按钮：集成到UI中——顶部栏或侧边栏，绝不能突兀地悬浮
  3. 窗口拖拽区域：顶部约50px区域必须可拖拽，保持该区域整洁
  4. 空状态：显示空状态界面。采用渐进式展示——仅在需要时才显示对应UI
  5. 键盘快捷键：每个核心操作都需要设置快捷键，且每个快捷键操作都要有视觉反馈
  6. 明暗模式：同时设计两种模式。禁止直接反转颜色（请参考视觉设计文档）
  7. 搜索功能：始终保持显眼且易访问。可考虑浮动搜索栏或命令面板
  8. 拖拽功能：支持内容拖入和拖出应用。这是实现原生质感的必要条件
  9. 微动画：每个状态变化都要有过渡动画。所有交互都必须有反馈
  10. 新手引导：简洁、基于模态框，通过实际操作而非阅读来教授快捷键

Implementation Notes

实现注意事项

When building as a web artifact (React/HTML):
  • Simulate the macOS window chrome (title bar, traffic light dots, rounded corners)
  • Use 
    -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text"
    font stack
  • Use 
    backdrop-filter: blur()
    for native vibrancy/translucency effects
  • Rounded corners: 10px for windows, 8px for cards, 6px for buttons, 4px for inputs
  • Respect 
    prefers-color-scheme
    media query for automatic light/dark switching
  • Shadows should be subtle and layered, not a single heavy drop shadow
When building with Electron, Tauri, or native frameworks:
  • Use system title bar integration where possible
  • Respect system accent color and appearance settings
  • Use native drag-and-drop APIs, not polyfills
当以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兼容库