跳到正文
cccskills
免费在 GitHub 公开

nw-ux-desktop-patterns

Desktop application UI patterns for product owners. Load when designing native or cross-platform desktop applications, writing desktop-specific acceptance criteria, or evaluating panel layouts and keyboard workflows.

中文简介正在准备中。当前显示原文说明。

查看安装方法

包含的文件(1)

  • SKILL.md5.9 KB

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

Desktop Application UI Patterns

Actionable desktop interface patterns for requirements gathering and design review. Use when target platform is native or cross-platform desktop application.

Native vs Cross-Platform

Native advantages: Platform conventions feel familiar | better system integration (file dialogs, notifications, drag-and-drop) | consistent OS look and feel | better accessibility through native APIs.

Cross-platform tradeoffs: Shared codebase reduces cost | visual consistency may conflict with platform expectations | custom rendering may miss OS accessibility features.

Guidance: If users primarily on one platform, prioritize native conventions. If cross-platform required, follow each platform's conventions for core interactions (menus, shortcuts, window management) while sharing domain-specific UI.

Core Desktop UI Elements

Menu Bar

Primary access point for all commands. Organize by convention: File, Edit, View, then domain-specific, ending with Window and Help. Every item should have keyboard shortcut for frequent actions. Group with separators; submenus sparingly (one level deep preferred).

Toolbar

Quick access to most common commands (subset of menu bar). Should be configurable: show, hide, rearrange. Every button must have tooltip. Include both icon and text label for primary actions.

Status Bar

Displays contextual info: document stats, cursor position, connection status, mode indicators. Low-profile: supports awareness without demanding attention. Update in real-time.

Context Menus

Right-click with small number of relevant actions. Include standard actions (Cut, Copy, Paste) plus domain-specific. Mirror keyboard shortcuts from main menu.

Document-Centric vs Task-Centric Layouts

Document-Centric (Word, Photoshop, VS Code)

Central canvas with surrounding tool panels. Users work on one primary artifact. Maximize canvas space; make panels collapsible and dockable. Support zoom, scroll, viewport controls. Auto-save with visible state indicator.

Task-Centric (Slack, email clients, CRM)

Multiple panels showing different workflow aspects. Users switch between views frequently. Quick navigation between contexts. Support split views and list-detail patterns. Persistent sidebar for task/project navigation.

Choosing the Right Layout

  • Most time creating/editing single artifact: document-centric
  • Juggling multiple items with frequent context switching: task-centric
  • Hybrid: primary task is document-centric but requires reference panels

Keyboard Shortcuts

Platform Conventions

Follow OS standards: Ctrl+C/Cmd+C (copy), Ctrl+Z/Cmd+Z (undo), etc. Display in menus and tooltips for natural learning. Provide reference (Ctrl+/ or ?). All functionality accessible via keyboard (accessibility).

Designing Shortcuts

Reserve single-key for most frequent actions. Modifier keys for less frequent. Group related shortcuts with same modifier. Avoid OS-level conflicts. Allow customization for power users.

Drag-and-Drop

Always provide alternative non-drag method (cut/paste, move dialog). Show clear drop targets with visual highlighting. Cursor feedback (copy vs move). Support undo for accidental drops. Ghost/preview of dragged item. Disable drop on invalid targets with "not allowed" cursor.

Undo/Redo

Support multi-level undo (minimum 20 levels). Make undo stack visible when possible (edit history panel). Distinguish undoable from permanent actions (warn for permanent). Group related actions into single undo steps. Restore exact previous state including selection and scroll position.

Multi-Window and Panel Management

Allow resize, collapse, dock, and undock panels. Persist layout across sessions. Provide "Reset Layout" option. Support split view (side-by-side editing, comparison). Minimize mode switches: keep related info visible simultaneously. Remember window position and size between sessions.

Settings and Preferences

Organize by category with left sidebar navigation. Show current value of each setting. Provide search for many-option apps. Sensible defaults so most users never change settings. Distinguish app-level from document-level settings. Support import/export for team consistency.

Desktop-Specific Anti-Patterns

Anti-PatternAlternative
No keyboard shortcutsFull keyboard support with discoverable shortcuts
Single-level undoMulti-level undo with visible history
Modal settings that reset on cancelApply/Cancel with intermediate preview
Ignoring OS conventions (custom file dialogs)Platform-native dialogs for file operations
No drag alternativeAlways provide cut/paste or move dialog
Fixed panel layout with no customizationDockable, collapsible, resizable panels
Losing window state on restartPersist size, position, layout between sessions

Acceptance Criteria Template (Desktop)

Feature: [Feature Name]
  # Platform: desktop ([Windows | macOS | cross-platform])
  # Key heuristics: [applicable Nielsen heuristics]

  Scenario: Keyboard workflow
    Given the user performs [task] using keyboard only
    When they use [shortcut]
    Then [expected result]
    And the shortcut is shown in the menu bar and tooltip

  Scenario: Undo support
    Given the user has performed [action]
    When they press Ctrl+Z / Cmd+Z
    Then the action is reversed
    And the redo action is available via Ctrl+Y / Cmd+Shift+Z

  Scenario: Panel management
    Given the user customizes their panel layout
    When they close and reopen the application
    Then their layout is preserved exactly
    And a Reset Layout option is available in the View menu

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

Review dimensions for validating agent quality - template compliance, safety, testing, and priority validation

中文简介正在准备中。当前显示原文说明。

nWave-ai/nWave6212026年9月16日 更新

Review dimensions for validating agent quality - template compliance, safety, testing, and priority validation

中文简介正在准备中。当前显示原文说明。

nWave-ai/nWave6212026年9月16日 更新

Review dimensions for acceptance test quality - happy path bias, GWT compliance, business language purity, coverage completeness, walking skeleton user-centricity, priority validation, observable behavior assertions, traceability coverage, and walking skeleton boundary proof

中文简介正在准备中。当前显示原文说明。

nWave-ai/nWave6212026年9月16日 更新

Detailed 5-phase workflow for creating agents - from requirements analysis through validation and iterative refinement

中文简介正在准备中。当前显示原文说明。

nWave-ai/nWave6212026年9月16日 更新

5-layer testing approach for agent validation including adversarial testing, security validation, and prompt injection resistance

中文简介正在准备中。当前显示原文说明。

nWave-ai/nWave6212026年9月16日 更新

Architectural style selection decision matrices, trade-off analysis, structural enforcement rules, and combination patterns. Load when choosing or evaluating architecture styles.

中文简介正在准备中。当前显示原文说明。

nWave-ai/nWave6212026年9月16日 更新

查看 nWave-ai 的全部技能

报告此技能的问题