AgentSkillsCN

Desktop App Design

桌面与企业级应用设计模式，涵盖数据密集型界面、仪表盘设计、复杂工作流管理、键盘优先交互、多窗口模式，以及专业工具设计。

SKILL.md
--- frontmatter
name: Desktop App Design
description: Desktop and enterprise application design patterns covering data-dense interfaces, dashboard design, complex workflow management, keyboard-first interaction, multi-window patterns, and professional tool design.
triggers:
  - desktop app
  - dashboard design
  - enterprise UX
  - data table design
  - admin panel
  - complex workflow
  - professional tool
  - desktop application

Desktop App Design — Professional & Enterprise Excellence

Desktop Design Philosophy

Desktop applications serve users who invest hours of focused attention in professional workflows. Unlike mobile's brief, task-focused interactions, desktop design must optimize for sustained productivity, information density, and expert efficiency. The challenge is supporting both first-day learnability and thousandth-day mastery within the same interface.

Core Principles (Edward Tufte + Jony Ive)

  1. •Information density with clarity — show more data without increasing cognitive load (Tufte: "maximize data-ink ratio")
  2. •Invisible design — the interface should disappear, leaving only the work (Ive: "true simplicity is derived from so much more than just the absence of clutter")
  3. •Keyboard-first, mouse-enhanced — power users live on the keyboard; mouse interaction is the fallback
  4. •Progressive complexity — simple surface, deep capability accessible through exploration
  5. •Spatial memory — consistent layouts allow users to develop muscle memory over months of use

Dashboard Design

Dashboard Types

Operational Dashboards

  • •Real-time monitoring with auto-refresh (5-30 second intervals)
  • •Status-at-a-glance with clear normal/warning/critical states
  • •Anomaly detection with visual emphasis on outliers
  • •Minimize decoration — every pixel serves monitoring goals

Analytical Dashboards

  • •Interactive exploration with filter, drill-down, and cross-filtering
  • •Comparison-oriented: support time-range, segment, and baseline comparisons
  • •Export and sharing capabilities for collaborative analysis
  • •Allow users to create and save custom views

Strategic Dashboards

  • •KPI-focused with trend indicators and goal tracking
  • •Executive summary level — 5-7 key metrics maximum
  • •Contextual benchmarks (vs. target, vs. last period, vs. industry)
  • •Minimal interaction needed — the story should be immediately clear

Dashboard Layout Principles

  • •F-pattern reading: Place the most critical metric top-left, summary row at top
  • •Card-based layout: Each card is one complete thought — metric + context + trend
  • •Consistent grid: 12-column grid with standardized card sizes (1/4, 1/3, 1/2, full)
  • •Information hierarchy: Primary numbers large (24-48px), secondary context small (12-14px)
  • •Color as data: Use color to encode meaning (red=bad, green=good), not decoration
  • •White space as separator: Generous padding between cards reduces cognitive switching cost

Data Visualization Best Practices (Tufte)

  • •Choose chart types based on the relationship being shown: comparison → bar, trend → line, composition → stacked bar, distribution → histogram
  • •Label data directly rather than using legends when possible
  • •Eliminate chartjunk: unnecessary gridlines, 3D effects, decorative elements
  • •Use consistent axis scales across comparable charts
  • •Small multiples (repeated small charts) outperform single complex charts for comparison
  • •Accessible color palettes: ensure distinguishability for color vision deficiency

Data Table Design

Table Architecture

  • •Fixed headers that persist during vertical scroll
  • •Fixed key columns (usually first 1-2) that persist during horizontal scroll
  • •Row height: 40-52px standard, 32px compact mode for data-heavy views
  • •Column resizing by dragging column borders
  • •Column reordering by drag-and-drop headers
  • •Row striping (subtle alternating background) for wide tables — optional for narrow ones

Table Functionality

  • •Sorting: Click column header to sort; show direction indicator; support multi-column sort
  • •Filtering: Column-level filters with appropriate types (text search, range, multi-select)
  • •Search: Global search across all visible columns with result highlighting
  • •Pagination vs. infinite scroll: Pagination for data manipulation tasks, infinite scroll for browsing
  • •Bulk actions: Checkbox selection with select-all, action toolbar appears on selection
  • •Inline editing: Double-click to edit cells for quick corrections; full edit mode for complex changes
  • •Export: CSV, Excel, PDF with current filter/sort state preserved

Table Density Modes

  • •Comfortable: 52px rows, generous padding — default for general audiences
  • •Standard: 40px rows — default for data-oriented users
  • •Compact: 32px rows, smaller text — for power users managing large datasets
  • •Allow users to toggle density preference with persistent setting

Complex Workflow Design

Multi-Step Workflows

  • •Progress indicator: Show current step, total steps, and completion state
  • •Non-linear navigation: Allow jumping to completed steps for editing
  • •Save draft at every step — never lose user work on navigation
  • •Summary/review step before final submission
  • •Clear step labels that describe the content, not just "Step 1, Step 2"

Form-Heavy Interfaces

  • •Section grouping with clear headings and optional collapse
  • •Contextual help near complex fields — info icons with tooltips or inline descriptions
  • •Dependent fields: Show/hide fields based on previous selections
  • •Auto-save with visual confirmation (subtle "Saved" indicator)
  • •Validation summary at top of form linking to each error field

Master-Detail Pattern

  • •List/grid on left, detail panel on right — the dominant desktop productivity pattern
  • •Support resizable split panes
  • •Detail panel updates without full page reload
  • •Keyboard navigation: arrow keys traverse list, Enter opens detail, Escape returns to list
  • •Mobile adaptation: replace side-by-side with stack navigation

Keyboard-First Interaction

Essential Keyboard Patterns

  • •Global shortcuts: Document common shortcuts in an overlay (? or Ctrl+/)
  • •Command palette: Cmd/Ctrl+K for quick action access — the most important desktop UX innovation of the 2020s
  • •Tab order: Logical focus progression through interactive elements
  • •Focus indicators: Always visible, high-contrast focus rings (never remove outline without replacement)
  • •Escape key: Consistently closes modals, dropdowns, and cancels operations

Shortcut Design Rules

  • •Follow platform conventions (Ctrl/Cmd+S = Save, Ctrl/Cmd+Z = Undo)
  • •Avoid overriding browser shortcuts
  • •Use modifier combinations logically: Ctrl = action, Shift = modify/extend, Alt = alternate
  • •Provide visual shortcut hints in menus, tooltips, and command palette

Multi-Window and Panel Management

Panel Patterns

  • •Sidebar navigation: Collapsible, persistent across views, icon+label or icon-only modes
  • •Inspector panels: Right-side contextual properties panel (design tool pattern)
  • •Bottom panels: Console, log, terminal outputs — resizable with collapse
  • •Floating panels: Detachable for multi-monitor workflows

State Management

  • •Persist panel states (open/closed, sizes) across sessions
  • •Remember user's last-used view and filters
  • •Support workspace presets ("Developer layout", "Review layout")
  • •Handle window resize gracefully — responsive desktop is essential for varied monitor sizes

Enterprise-Specific Patterns

Permission-Aware UI

  • •Hide elements users cannot access (not just disable) for cleaner interfaces
  • •For disabled elements that provide context, show tooltip explaining why access is restricted
  • •Role-based views: admin sees all controls, viewer sees read-only, etc.
  • •Audit trails for sensitive actions with clear attribution

Notification and Alert Design

  • •Severity levels: Info (blue), Success (green), Warning (amber), Error (red), Critical (red + icon)
  • •Position: Non-blocking toasts for confirmations, blocking modals for critical decisions
  • •Persistence: Success toasts auto-dismiss (3-5s), errors persist until addressed
  • •Grouping: Batch similar notifications to prevent notification fatigue

Empty States and Onboarding

  • •First-run experience should guide users to first value moment
  • •Empty states include illustration, explanation, and clear CTA to populate the view
  • •Progressive onboarding: introduce features as they become relevant, not all at once
  • •In-app guidance: highlight new features with subtle callouts, dismissible permanently

Cross-Referencing

  • •For data visualization accessibility, reference accessibility-inclusive-design
  • •For design token systems, reference design-systems-architecture
  • •For interaction and transition design, reference interaction-motion-design
  • •For UX evaluation, reference nng-ux-heuristics

v3.0 Cross-References

The v3.0 upgrade introduces comprehensive data visualization references, production component patterns, and design tool workflows that extend desktop application design capabilities.

Data Visualization Patterns — references/data-visualization-patterns.md

The new references/data-visualization-patterns.md reference expands significantly on the Data Visualization Best Practices section above. It covers: comprehensive chart type selection guides with decision trees (when to use bar vs. column, line vs. area, scatter vs. bubble, treemap vs. sunburst); accessible data visualization patterns including screen reader-compatible chart descriptions, sonification approaches, and tactile-friendly data encoding; and dashboard composition frameworks for arranging multiple visualizations into coherent analytical narratives. Includes real-world examples of dashboard redesigns with before/after performance metrics.

Production Component Patterns — component-patterns-code

The component-patterns-code skill provides production-ready React component patterns directly applicable to desktop application design. Includes data table components with full state matrices (loading, empty, error, paginated, filtered, sorted, bulk-selected), command palette implementations, master-detail layout components, resizable panel systems, and keyboard-navigable tree views. Each component cookbook entry includes TypeScript types, accessibility annotations, and Storybook configurations — bridging the gap between the design patterns in this skill and production code.

Design Tool Workflows — figma-design-tool-workflows

The figma-design-tool-workflows skill covers the Figma-to-code pipeline applicable to desktop design systems. Relevant capabilities include: Figma variable modes for light/dark/high-contrast theme switching; auto-layout configurations that map to CSS Grid and Flexbox; component property definitions that generate developer handoff specifications; and the MCP-powered design-to-code flywheel that enables continuous synchronization between Figma design system files and production component libraries. Particularly valuable for desktop apps with complex theming requirements and dense component libraries.

Key Sources

  • •Tufte, E. (2001). "The Visual Display of Quantitative Information"
  • •Cooper, A. (2014). "About Face: The Essentials of Interaction Design"
  • •Microsoft Fluent Design System guidelines
  • •Apple macOS Human Interface Guidelines
  • •NNG Group enterprise UX research