桌面端应用 UX/UI 设计原则
桌面端应用的交互设计有其独特性，与 Web 端和移动端存在显著差异。
基本设计原则
1. 窗口管理
桌面端应用运行在操作系统窗口中，需要考虑：
- 窗口大小可调整，布局需要响应式
- 最小窗口尺寸限制，防止内容挤压变形
- 多窗口共存时的任务栏/Dock 交互
2. 系统集成
遵循操作系统的设计规范：
- macOS：遵循 Human Interface Guidelines
- Windows：遵循 Fluent Design System
- 菜单栏（顶部菜单/右键菜单）应使用系统原生样式
- 快捷键遵循系统惯例（Ctrl/Cmd + S 保存、Ctrl/Cmd + W 关闭等）
3. 性能感知
桌面端用户对性能的期望高于 Web：
- 启动速度应在 2 秒以内
- 操作响应应在 100ms 以内
- 避免白屏加载，使用骨架屏或启动画面
- 长时间操作需要进度指示
交互设计要点
| 要素 | 设计建议 |
|---|---|
| 导航 | 侧边栏导航 + 面包屑，支持键盘快捷键 |
| 表单 | 支持 Tab 键切换、Enter 提交、Esc 取消 |
| 对话框 | 明确的确认/取消按钮，支持 Esc 关闭 |
| 拖拽 | 提供视觉反馈（高亮目标区域） |
| 右键菜单 | 上下文相关的操作选项 |
| 通知 | 使用系统原生通知，避免频繁弹窗 |
Electron 应用特有的 UI 考虑
窗口边框：
- 使用
frame: false自定义标题栏时，需要手动实现拖拽区域（-webkit-app-region: drag） - 非拖拽区域需标记
-webkit-app-region: no-drag
暗黑模式：
- 监听系统主题变化，自动切换
nativeTheme.shouldUseDarkColors判断当前系统主题
触控板手势：
- 支持缩放、滑动返回等原生手势
- 使用
webContents.setVisualZoomLevelLimits控制缩放行为
设计资源
- Apple Human Interface Guidelines: https://developer.apple.com/design/human-interface-guidelines/
- Microsoft Fluent Design: https://fluent2.microsoft.design/
- Material Design 3: https://m3.material.io/
↑