用途:为桌面应用(非移动端、非营销页)提供界面与可用性规范,目标是让应用看起来像真正的桌面软件:有菜单、快捷键、可缩放窗口、状态栏,而不是被塞进窗口的网页。
主要能力与规则:
- 窗口:标题反映当前文档/上下文,未保存时有标记;设置合理的 min_size;破坏性操作或保存用模态对话框;窗口关闭时若有未保存改动需确认。
- 菜单与快捷键:菜单栏包含 File/Edit/View 等可预期项,菜单项显示快捷键(⌘S/Ctrl+S);同一命令需在菜单、工具栏和快捷键保持一致;右键出现上下文菜单,而非移动端式隐藏按钮;⌘K 命令面板只是补充,不替代菜单。
- 键盘与焦点:Tab/Shift+Tab 按视觉顺序,Enter 确认、Esc 取消,方向键用于列表与菜单,Space 切换复选框;焦点必须可见,不能只有 hover。
- 指针与密度:悬停改变光标与表面,图标配短 tooltip;工具型界面目标约 20–24px,不必强制 44px 触控尺寸;拖放需有落点提示并支持 Esc 取消;内容溢出时显示滚动条。
- 反馈与文档:状态栏显示路径、缩放、保存/网络状态;保存需明确或自动保存可见;支持 Undo/Redo;空、加载、错误状态都应有 UI;长任务放到 UI 线程外并有进度指示。
- 语义化 tokens:角色包括 background、surface、surfaceElevated、text/textMuted、border、accent/onAccent、success/warning/danger、focusRing;只用一种强调色,中性色承载界面;对比度 AA(正文 4.5:1,大字号/关键图标 3:1);间距基于 4/8px;light/dark 使用相同角色。
使用方式:若用 egui,将角色映射到 egui::Visuals 并使用具名 TextStyle/Spacing;若用 Tauri webview,使用 better-web-interface 的 CSS tokens 并叠加本技能规则。配套技能:egui、tauri、better-web-interface、design-system。
适用场景:原生感桌面工具、编辑器、检查器、密集信息界面。
限制:不适合触控优先的移动应用(应使用 better-mobile-interface)。资料未提供具体价格、平台支持或版本信息。