interaction-patterns-components

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Interaction Patterns Components

交互模式与组件

Purpose

用途

Help an agent choose, critique, and design effective UI interaction patterns and reusable product components.

The skill covers navigation patterns, menus, cards, tables, dashboards, modals, flows, states, and component behavior. It treats visual polish only where it affects interaction clarity, hierarchy, accessibility, or component usability.

帮助Agent选择、评估并设计有效的UI交互模式与可复用产品组件。

该技能涵盖导航模式、菜单、卡片、表格、仪表盘、模态框、流程、状态及组件行为。仅在视觉优化影响交互清晰度、层级结构、可访问性或组件可用性时，才会考虑视觉层面的打磨。

When to use this skill

适用场景

Use this skill when the user asks for any of the following:

Critique, redesign, or UX review of an app screen, website, product flow, wireframe, component, or frontend implementation.
Selection of UI patterns such as navigation, menus, breadcrumbs, dashboards, cards, tables, forms, modals, wizards, split panes, tabs, accordions, toolbars, hover tools, lists, grids, or feedback states.
Design of reusable components or design-system behavior.
Frontend guidance for interaction behavior, accessibility, responsive behavior, component APIs, or UI state handling.
Creation of product UX recommendations where the best answer depends on tasks, user skill, device context, data complexity, or risk.

当用户提出以下需求时，可使用本技能：

应用界面、网站、产品流程、线框图、组件或前端实现的评估、重设计或UX评审。
UI模式的选型，如导航、菜单、面包屑、仪表盘、卡片、表格、表单、模态框、向导、分栏、标签页、折叠面板、工具栏、悬停工具、列表、网格或反馈状态。
可复用组件或设计系统行为的设计。
交互行为、可访问性、响应式表现、组件API或UI状态处理的前端指导。
基于任务、用户技能、设备场景、数据复杂度或风险给出产品UX建议。

When not to use this skill

不适用于场景

Do not use this skill as the main framework when the user primarily needs:

Brand identity, illustration, mood boards, or visual polish not tied to interaction clarity.
Deep copywriting, messaging strategy, or content design beyond labels, help text, errors, and microcopy.
Pure graphic design, logo design, or marketing creative.
Native voice, AR/VR, spatial, or non-screen interaction design unless the task also includes screen-based controls or companion UI.
Backend architecture, database design, or API design except where implementation constraints affect component behavior.

当用户主要需求为以下内容时，请勿将本技能作为核心框架：

与交互清晰度无关的品牌标识、插画、情绪板或视觉打磨。
超出标签、帮助文本、错误提示和微文案之外的深度文案撰写、信息策略或内容设计。
纯平面设计、Logo设计或营销创意。
原生语音、AR/VR、空间或非屏幕交互设计（除非任务同时包含基于屏幕的控件或配套UI）。
后端架构、数据库设计或API设计（除非实现约束会影响组件行为）。

Core principles

核心原则

1. Start with people, goals, and context

1. 从用户、目标与场景出发

Identify what the user is trying to accomplish before choosing a component. A form, menu, table, modal, or dashboard is only a means to a user goal. Ask “why” until the job, risk, and success criteria are clear enough to design the simplest useful interface.

Default: infer the user goal from the feature and proceed. Ask only when the missing context changes the pattern choice, such as expert vs novice users, mobile vs desktop, or high-risk vs low-risk actions.

在选择组件前，先明确用户想要完成的目标。表单、菜单、表格、模态框或仪表盘只是达成用户目标的手段。不断追问“为什么”，直到任务、风险和成功标准清晰到足以设计出最简单实用的界面。

默认规则：从功能推断用户目标并推进工作。仅当缺失的场景会改变模式选择时才提问，例如面向专家用户还是新手用户、移动端还是桌面端、高风险操作还是低风险操作。

2. Treat interaction as a conversation

2. 将交互视为对话

Every UI should respond as if it is a considerate partner: it listens, acknowledges input, shows progress, prevents confusion, and makes the next step clear. Encode this into components through visible states, feedback, labels, focus behavior, and recovery paths.

Default: every interactive component must define at least default, hover/pressed where applicable, focus, loading, disabled, success, empty, and error states.

每个UI都应表现得像一个贴心的伙伴：它倾听、认可输入、展示进度、避免混淆，并明确下一步操作。通过可见状态、反馈、标签、焦点行为和恢复路径，将这一点融入组件设计。

默认规则：每个交互组件必须至少定义默认状态、适用的悬停/按压状态、焦点状态、加载状态、禁用状态、成功状态、空状态和错误状态。

3. Choose the simplest pattern that preserves context

3. 选择能保留上下文的最简模式

Prefer patterns that keep the user oriented and reduce unnecessary navigation. Keep tools close to the object they affect, but do not hide critical actions behind hover-only affordances or ambiguous icons.

Default: use in-place editing, contextual tools, inline validation, and same-page previews when they reduce context switching and remain discoverable.

优先选择能让用户保持方向感、减少不必要导航的模式。将工具放在其作用对象附近，但不要将关键操作隐藏在仅悬停可见的元素或模糊图标后。

默认规则：当原地编辑、上下文工具、内联验证和同页预览能减少上下文切换且保持可发现性时，优先使用这些方式。

4. Preserve wayfinding

4. 保留寻路能力

Users need to know where they are, where they can go, what changed, and how to recover. Navigation is not just chrome; it includes signposts, hierarchy, breadcrumbs, progress indicators, deep links, escape hatches, and stable screen regions.

Default: provide a stable primary navigation model, a clear page title, visible current location, and a reversible route back to the previous or parent context.

用户需要知道自己所在位置、可前往的地方、发生的变化以及如何恢复。导航不只是界面装饰，还包括路标、层级、面包屑、进度指示器、深层链接、退出通道和稳定的屏幕区域。

默认规则：提供稳定的主导航模型、清晰的页面标题、可见的当前位置，以及可返回上一级或父级上下文的可逆路径。

5. Let information structure drive layout

5. 让信息结构驱动布局

Layout should reflect task structure, not decoration. Use grouping, proximity, alignment, visual hierarchy, progressive disclosure, and screen regions to show relationships and priorities.

Default: use a single clear primary action per task area; group related controls; make the most important content or object the center of attention.

布局应反映任务结构，而非装饰。使用分组、邻近性、对齐、视觉层级、渐进式展示和屏幕区域来展示元素关系与优先级。

默认规则：每个任务区域使用一个清晰的主要操作；将相关控件分组；让最重要的内容或对象成为视觉焦点。

6. Match the pattern to the data and task

6. 模式匹配数据与任务

A table, card grid, list, dashboard, feed, wizard, or detail page is correct only when it fits what users compare, scan, select, create, monitor, or edit.

Default: for structured, comparable, sortable data, use a table or dense list. For heterogeneous, visually recognizable items, use cards or thumbnails. For stepwise unfamiliar tasks, use a wizard. For expert repeated work, use a denser workspace with shortcuts and visible tools.

表格、卡片网格、列表、仪表盘、信息流、向导或详情页是否合适，取决于用户是要比较、扫描、选择、创建、监控还是编辑内容。

默认规则：对于结构化、可比较、可排序的数据，使用表格或紧凑列表；对于异构、视觉可识别的项，使用卡片或缩略图；对于分步式陌生任务，使用向导；对于专家重复操作，使用带有快捷方式和可见工具的高密度工作区。

7. Make actions safe

7. 确保操作安全

Support safe exploration through preview, undo, cancel, clear labels, confirmation only for consequential actions, and strong recovery. Avoid blocking confirmations for routine reversible actions.

Default: prefer undo over confirmation when the action is reversible. Use a confirmation or buffer step only for destructive, costly, irreversible, privacy-sensitive, financial, or broadly propagating actions.

通过预览、撤销、取消、清晰标签、仅针对重要操作的确认步骤和强恢复机制，支持安全探索。避免对常规可逆操作设置阻塞性确认。

默认规则：当操作可逆时，优先使用撤销而非确认。仅针对破坏性、高成本、不可逆、涉及隐私、财务影响广泛的操作，使用确认或缓冲步骤。

8. Design for interruption, re-entry, and repetition

8. 为中断、重新进入和重复操作设计

Users change direction, pause, resume, repeat actions, and rely on memory. Keep state stable, avoid rearranging controls unexpectedly, remember safe progress, and bring forward recent/repeated actions when helpful.

Default: preserve unsaved work where possible, retain filters and scroll position after detail views, and do not move controls after users begin a task.

用户会改变方向、暂停、恢复、重复操作，并依赖记忆。保持状态稳定，避免意外重排控件，保存安全进度，并在有用时展示最近/重复的操作。

默认规则：尽可能保留未保存的工作，在查看详情页后保留筛选条件和滚动位置，用户开始任务后不要移动控件。

9. Make forms short, purposeful, and forgiving

9. 让表单简短、有针对性且容错

Ask only for information needed now. Use labels, hints, appropriate input types, smart defaults, validation, examples, and error recovery. Do not rely on placeholder text as the only label or instruction.

Default: use visible labels, one-column flow for most forms, inline errors tied to fields, forgiving formats where possible, and smart prefills only when confidence is high and users can edit them.

仅询问当前所需的信息。使用标签、提示、合适的输入类型、智能默认值、验证、示例和错误恢复机制。不要仅依赖占位符作为唯一标签或说明。

默认规则：使用可见标签，大多数表单采用单列布局，错误提示与字段关联，尽可能使用容错格式，仅在高置信度且用户可编辑时使用智能预填充。

10. Build patterns as reusable systems

10. 将模式构建为可复用系统

Do not create one-off components unless the context demands it. Define component responsibilities, variants, states, accessibility behavior, responsive behavior, content rules, and escape hatches.

Default: start from the existing design system or common UI framework, then extend intentionally. Treat libraries as a floor, not a ceiling.

See references/principle-cards.md for each principle as a reusable card.

除非场景要求，否则不要创建一次性组件。定义组件的职责、变体、状态、可访问性行为、响应式行为、内容规则和退出通道。

默认规则：从现有设计系统或通用UI框架出发，再进行有意扩展。将组件库视为基础，而非上限。

查看 references/principle-cards.md 获取每个原则的可复用卡片版本。

Default recommendations

默认建议

Use these defaults unless the user’s context justifies an override.

Area	Default recommendation	Why it is usually best	Override when
Product goal	Optimize for the user’s task completion, not feature exposure.	Users use UI as a means to an end.	The screen is primarily exploratory, educational, or promotional.
Audience	Design for capable but busy users with mixed expertise.	Most products serve beginners and repeat users simultaneously.	The product is explicitly expert-only, kiosk-like, or one-time use.
Platform	Start responsive/mobile-aware, then enhance for larger screens.	Small screens force prioritization and reusable content units.	The tool is a dense desktop-only professional workspace.
Navigation	Use stable global navigation plus local signposts.	Predictability lowers cognitive load.	The product is a single-task flow or immersive canvas.
Information density	Use moderate density with progressive disclosure.	It supports scanning without overwhelming.	Expert workflows require dense data and keyboard efficiency.
Screen structure	Choose one dominant screen type: overview, focus, make, or do.	Clear organizing principles make screens learnable.	A dashboard/workbench genuinely requires multiple regions.
Lists	Use a list/table for comparison; cards for rich or visual items.	Pattern follows the user’s scanning task.	Items have unusual content or selection behavior.
Primary action	One visually dominant primary action per task region.	Prevents split attention and supports next-step clarity.	Multiple actions are truly equal and frequent.
Modals	Avoid modals for complex workflows; use them for focused, interruptive, bounded tasks.	Modals interrupt context and complicate navigation/focus.	A lightweight overlay preserves context better than page navigation.
Wizards	Use only for unfamiliar, ordered, multi-step tasks.	They reduce cognitive burden for sequential setup.	Expert users need nonlinear editing or comparison.
Dashboards	Show actionable monitoring, not decorative metrics.	Dashboards should support decisions and triage.	The dashboard is explicitly for ambient awareness.
Forms	Minimize fields, label everything, group sections, validate inline.	Reduces effort and prevents errors.	Legal, compliance, or operational requirements force extra fields.
Defaults	Prefill only when likely correct and easy to change.	Smart defaults reduce effort without removing control.	Incorrect defaults would be costly or misleading.
Error handling	Prevent errors first, then explain and recover.	Error recovery is part of the interaction.	Real-time prevention would interrupt expert flow.
Motion	Use transitions to preserve orientation, not to decorate.	Motion can show cause, continuity, and change.	User has reduced-motion preference or motion adds delay.
Accessibility	Treat keyboard, focus, labels, contrast, and screen-reader semantics as baseline.	Accessibility is interaction quality.	Never override; only adapt implementation.
Design system	Reuse existing components and document variants/states.	Reduces inconsistency and UX debt.	Existing components are inaccessible or do not fit the task.

除非用户场景证明需要调整，否则遵循以下默认规则。

领域	默认建议	通常最优的原因	适用例外场景
产品目标	以用户任务完成为优化核心，而非功能展示。	用户将UI视为达成目标的工具。	页面主要用于探索、教育或推广场景。
受众	为能力合格但忙碌、混合专业水平的用户设计。	大多数产品同时服务新手和重复使用用户。	产品明确面向专家、 kiosk类设备或一次性使用场景。
平台	从响应式/移动端适配开始，再为大屏幕增强功能。	小屏幕迫使优先级排序和内容单元复用。	工具是仅面向桌面的高密度专业工作区。
导航	使用稳定的全局导航加本地路标。	可预测性降低认知负荷。	产品是单任务流程或沉浸式画布。
信息密度	使用中等密度加渐进式展示。	支持扫描同时避免信息过载。	专家工作流需要高密度数据和键盘操作效率。
屏幕结构	选择一种主导屏幕类型：概览、聚焦、创作、任务、仪表盘、流程或工作区。	清晰的组织原则让屏幕易于学习。	仪表盘/工作台确实需要多个区域。
列表	比较类使用列表/表格；丰富或视觉化项使用卡片。	模式匹配用户的扫描任务。	项具有特殊内容或选择行为。
主要操作	每个任务区域一个视觉突出的主要操作。	避免注意力分散，明确下一步操作。	多个操作确实同等重要且频繁使用。
模态框	复杂工作流避免使用模态框；仅用于聚焦、中断性、有限任务。	模态框会打断上下文，使导航/焦点管理复杂化。	轻量级覆盖层比页面导航更能保留上下文。
向导	仅用于陌生、有序、多步骤任务。	减少顺序设置的认知负担。	专家用户需要非线性编辑或比较。
仪表盘	展示可操作的监控内容，而非装饰性指标。	仪表盘应支持决策和分类处理。	仪表盘明确用于环境感知场景。
表单	最少字段、全标签、分组、内联验证。	减少操作量，防止错误。	法律、合规或运营要求必须增加额外字段。
默认值	仅在可能正确且易于修改时预填充。	智能默认值减少操作量且不剥夺控制权。	错误默认值会造成成本或误导。
错误处理	首先预防错误，然后解释并提供恢复。	错误恢复是交互的一部分。	实时预防会打断专家操作流程。
动效	使用过渡效果保留方向感，而非装饰。	动效可以展示因果关系、连续性和变化。	用户有减少动效偏好或动效增加延迟。
可访问性	将键盘操作、焦点、标签、对比度和屏幕阅读器语义视为基础要求。	可访问性是交互质量的一部分。	绝不覆盖；仅适配实现方式。
设计系统	复用现有组件并记录变体/状态。	减少不一致性和UX债务。	现有组件不可访问或不匹配任务需求。

Required user questions

需向用户询问的问题

Ask a focused question only when the answer changes the pattern choice or risk model. Do not ask routine best-practice questions.

Ask when any of these are unknown and materially relevant:

Primary task and success outcome: when multiple goals compete.
Audience skill level and frequency: when choosing between guided flow and expert workspace.
Platform/device context: when mobile, touch, desktop density, keyboard use, or responsive behavior matters.
Data shape and scale: when choosing list, table, card grid, dashboard, feed, filter, pagination, or visualization.
Action risk/reversibility: when choosing undo, confirmation, preview, or buffer step.
Navigation depth and information architecture: when choosing flat, hub-and-spoke, tree, pyramid, wizard, or workspace model.
Design-system/frontend constraints: when the user needs implementation-ready guidance.
Accessibility or compliance constraints: when domain-specific requirements may exceed baseline accessibility.

Use this pattern:

question({
  question: "What is the primary task users must complete on this screen?",
  recommended_default: "Optimize for the most frequent task and make secondary actions available but less prominent.",
  options: [
    "Find or browse items",
    "Compare and select items",
    "Create or edit something",
    "Monitor status or metrics",
    "Complete a step-by-step process",
    "Other / custom"
  ]
})

Use the question-tool-ready prompts in references/decision-prompts.md for the full decision set.

仅当答案会改变模式选择或风险模型时，才提出针对性问题。不要询问常规最佳实践问题。

当以下内容未知且对决策有实质性影响时，进行询问：

核心任务与成功结果：当多个目标存在竞争时。
受众技能水平与使用频率：在引导流程与专家工作区之间选择时。
平台/设备场景：当移动端、触摸操作、桌面端密度、键盘使用或响应式表现很重要时。
数据形态与规模：在选择列表、表格、卡片网格、仪表盘、信息流、筛选、分页或可视化方式时。
操作风险/可逆性：在选择撤销、确认、预览或缓冲步骤时。
导航深度与信息架构：在选择扁平式、中心辐射式、树形、金字塔形、向导或工作区模型时。
设计系统/前端约束：当用户需要可落地的实现指导时。
可访问性或合规约束：当领域特定要求可能超出基础可访问性标准时。

使用以下格式提问：

question({
  question: "What is the primary task users must complete on this screen?",
  recommended_default: "Optimize for the most frequent task and make secondary actions available but less prominent.",
  options: [
    "Find or browse items",
    "Compare and select items",
    "Create or edit something",
    "Monitor status or metrics",
    "Complete a step-by-step process",
    "Other / custom"
  ]
})

查看 references/decision-prompts.md 获取完整决策集的提问模板。

Workflow

工作流程

A. Critiquing existing UI

A. 现有UI评估

Inspect in this order:

User goal and task fit
Identify what the screen is trying to help users accomplish. Flag controls, copy, or screens that serve the product before the user.
Information architecture and screen type
Determine whether the screen is an overview, focus, make, do, dashboard, flow, or workspace. Check whether the pattern matches the task.
Wayfinding and navigation
Check location cues, entry points, exit paths, breadcrumbs, progress indicators, deep links, and whether the user can recover from dead ends.
Hierarchy, grouping, and layout
Check whether the main object/action is obvious; related elements are grouped; visual weight matches priority; and progressive disclosure is used appropriately.
Interaction clarity and component behavior
Inspect affordances, labels, action placement, feedback, state changes, hover/touch behavior, keyboard behavior, loading, empty, and error states.
Safety and recovery
Check undo, cancel, preview, confirmation, error prevention, and resilience to interrupted workflows.
Forms and input behavior
Check labels, required/optional indicators, input types, hints, defaults, validation, and error wording.
Data display and scanning
Check whether tables, cards, dashboards, filters, sorting, datatips, and visualizations support comparison and decision-making.
Accessibility and inclusion
Check keyboard use, focus order, semantics, labels, contrast, reduced motion, target size, non-color cues, and screen-reader behavior.
Frontend feasibility and design-system fit
Check component reuse, responsive layout, tokenization, state complexity, performance, and maintainability.

Return critique in this format:

markdown

undefined

按以下顺序检查：

用户目标与任务匹配度
明确屏幕旨在帮助用户完成的目标。标记那些优先服务产品而非用户的控件、文案或屏幕。
信息架构与屏幕类型
判断屏幕属于概览、聚焦、创作、任务、仪表盘、流程还是工作区类型。检查模式是否匹配任务需求。
寻路与导航
检查位置提示、入口点、退出路径、面包屑、进度指示器、深层链接，以及用户是否能从死胡同恢复。
层级、分组与布局
检查主要对象/操作是否明显；相关元素是否分组；视觉权重是否匹配优先级；渐进式展示是否合理使用。
交互清晰度与组件行为
检查可交互性、标签、操作位置、反馈、状态变化、悬停/触摸行为、键盘行为、加载、空状态和错误状态。
安全性与恢复机制
检查撤销、取消、预览、确认、错误预防，以及对中断工作流的适应性。
表单与输入行为
检查标签、必填/可选标识、输入类型、提示、默认值、验证和错误文案。
数据展示与扫描体验
检查表格、卡片、仪表盘、筛选、排序、数据提示和可视化是否支持比较与决策。
可访问性与包容性
检查键盘使用、焦点顺序、语义、标签、对比度、动效减少、目标尺寸、非颜色提示和屏幕阅读器行为。
前端可行性与设计系统适配性
检查组件复用、响应式布局、令牌化、状态复杂度、性能和可维护性。

按以下格式返回评估结果：

markdown

undefined

Overall diagnosis

整体诊断

[1-3 sentence summary]

[1-3句话总结]

Highest-impact fixes

最高优先级修复

[Fix] — [why it matters] — [pattern/component recommendation]
...

[修复方案] — [重要性原因] — [模式/组件建议]
...

Component-level notes

组件层面说明

[Component]: [issue] → [recommended behavior]

[组件名称]: [问题] → [推荐行为]

Accessibility and implementation notes

可访问性与实现说明

[Specific requirement or constraint]

[具体要求或约束]

Tradeoffs

权衡点

[When another pattern might be better]

undefined

[其他模式更合适的场景]

undefined

B. Creating or improving a design

B. 设计创建或优化

Proceed in this order:

Clarify the user problem and success outcome.
Identify audience skill, platform, data scale, and action risk only if needed.
Choose the screen type: overview, focus, make, do, dashboard, flow, or workspace.
Choose the navigation model and wayfinding cues.
Establish layout hierarchy and grouping.
Select components and define their responsibilities.
Define behavior: interactions, feedback, states, validation, transitions, keyboard/focus, and recovery.
Define responsive behavior and design-system variants.
Run the quality checklist.
Explain recommendations as user-task benefits, not as style preferences.

Return new recommendations in this format:

markdown

undefined

按以下步骤推进：

明确用户问题与成功结果。
仅在需要时确认受众技能、平台、数据规模和操作风险。
选择屏幕类型：概览、聚焦、创作、任务、仪表盘、流程或工作区。
选择导航模型与寻路提示。
建立布局层级与分组。
选择组件并定义其职责。
定义行为：交互、反馈、状态、验证、过渡、键盘/焦点和恢复机制。
定义响应式行为与设计系统变体。
运行质量检查清单。
从用户任务收益而非风格偏好角度解释建议。

按以下格式返回新建议：

markdown

undefined

Recommended pattern

Structure

结构

[Regions, navigation, hierarchy]

[区域、导航、层级]

Component behavior

组件行为

[States, actions, feedback, validation]

[状态、操作、反馈、验证]

Accessibility and frontend notes

可访问性与前端说明

[Semantics, keyboard, responsive, state management]

[语义、键盘、响应式、状态管理]

Alternatives considered

备选方案考量

[Why not the likely alternatives]

undefined

[未选择其他方案的原因]

undefined

Decision framework

决策框架

Use these pattern choices as starting points:

以下模式选择可作为起点：

Screen and flow patterns

屏幕与流程模式

Overview screen: Use for lists, grids, search results, feeds, dashboards, or collections where users choose what to inspect next.
Focus screen: Use when one object, media item, record, canvas, or map is the center of attention.
Make workspace: Use when users create or manipulate content; use toolbars, palettes, inspectors, and direct manipulation carefully.
Do screen: Use for one bounded task such as payment, booking, import, export, setup, or confirmation.
Wizard: Use for unfamiliar, ordered steps with dependencies. Avoid for expert repeated tasks.
Dashboard: Use for monitoring, triage, and decision-making. Avoid as a decorative metric collage.
Modal/overlay: Use for bounded tasks that must interrupt or preserve the underlying page context. Avoid for deep flows, large forms, or content users need to compare with the page behind it.
Many workspaces / split view: Use for expert or high-context tasks that require comparing and editing multiple objects.
Settings editor: Use for persistent preferences and configuration; group by mental model, not implementation model.

概览屏幕：用于列表、网格、搜索结果、信息流、仪表盘或集合类场景，用户需选择下一步查看内容。
聚焦屏幕：当单个对象、媒体项、记录、画布或地图为视觉焦点时使用。
创作工作区：用户创建或操作内容时使用；谨慎使用工具栏、调色板、检查器和直接操作方式。
任务屏幕：用于单个有限任务，如支付、预订、导入、导出、设置或确认。
向导：用于陌生、有序且存在依赖关系的步骤。避免用于专家重复任务。
仪表盘：用于监控、分类处理和决策。避免作为装饰性指标拼贴。
模态框/覆盖层：用于必须中断或保留底层页面上下文的有限任务。避免用于深度流程、大型表单或用户需要与背后页面对比的内容。
多工作区/分栏视图：用于专家或高上下文任务，需同时比较和编辑多个对象。
设置编辑器：用于持久化偏好和配置；按用户心智模型而非实现模型分组。

Navigation patterns

导航模式

Flat navigation: Use for a small set of peer destinations.
Hub-and-spoke: Use when users return to a central place between tasks.
Tree / multilevel: Use for large hierarchical information spaces.
Pyramid: Use when top-level exploration leads to more specific pages while retaining routes across branches.
Step-by-step: Use for ordered flows.
Fat menu / menu page: Use when users need overview and direct access to many destinations.
Breadcrumbs: Use for deep hierarchy, not as the only primary navigation.
Progress indicator: Use when users need orientation in a multistep process.
Escape hatch: Always provide a safe exit from modal, wizard, or deep navigation contexts.

扁平导航：用于少量同级目标场景。
中心辐射式：用户在任务间返回中心页面时使用。
树形/多层级：用于大型层级信息空间。
金字塔形：顶层探索导向更具体页面，同时保留跨分支路径时使用。
分步式：用于有序流程。
全量菜单/菜单页：用户需要概览并直接访问多个目标时使用。
面包屑：用于深层层级，不要作为唯一主导航。
进度指示器：用户需要在多步骤流程中定位时使用。
退出通道：始终为模态框、向导或深层导航上下文提供安全退出方式。

List and content patterns

列表与内容模式

Table: Use for structured data where users compare rows by attributes, sort, filter, scan exact values, or perform bulk actions.
Dense list: Use for text-heavy items or inbox-like triage.
Cards: Use for items with image/title/summary/actions where each item is a self-contained object.
Thumbnail grid: Use for visually recognizable items where scanning by image matters.
Carousel: Use sparingly for small, optional, visually rich sets; do not hide essential choices in a carousel.
Pagination: Use when position, finite sets, SEO, or performance matter.
Infinite list: Use for feeds/exploration where exact position is less important; preserve loading and return position.
Two-panel selector / split view: Use when users browse a list and inspect details without losing list context.
List inlay: Use to show detail without full navigation when detail is short and related.

表格：用于结构化数据，用户需按属性比较行、排序、筛选、扫描精确值或执行批量操作。
紧凑列表：用于文本密集项或收件箱类分类处理场景。
卡片：用于包含图片/标题/摘要/操作的项，每个项为独立完整对象。
缩略图网格：用于视觉可识别项，且图片扫描为主要行为时使用。
轮播：谨慎用于小型、可选、视觉丰富的集合；不要将关键选项隐藏在轮播中。
分页：当位置、有限集合、SEO或性能很重要时使用。
无限列表：用于信息流/探索场景，精确位置不重要时使用；保留加载状态和返回位置。
双面板选择器/分栏视图：用户浏览列表并查看详情，且需保留列表上下文时使用。
列表内嵌详情：详情简短且相关，无需完整导航时使用。

Actions and commands

操作与命令

Put frequent actions close to the object they affect.
Keep destructive and high-risk actions visually and spatially distinct from routine actions.
Use button groups for small related action sets; avoid mixing unrelated priorities.
Use smart menu labels that name the affected object or operation.
Provide preview for changes with uncertain outcomes.
Provide cancelability for long-running operations.
Provide undo/history for reversible actions and exploration.
Use macros or saved actions only for repeated expert tasks.

将频繁操作放在其作用对象附近。
将破坏性和高风险操作与常规操作在视觉和空间上区分开。
小型相关操作集使用按钮组；避免混合不同优先级的操作。
使用智能菜单标签，明确受影响对象或操作。
对结果不确定的变更提供预览。
对长时间运行的操作提供可取消性。
对可逆操作和探索提供撤销/历史记录。
仅为专家重复任务提供宏或保存的操作。

Forms and controls

表单与控件

Prefer the input method that matches the data: select/radio for finite choices, checkbox for multiple choices, slider for approximate ranges, stepper for small numeric increments, text field for open text, autocomplete for large known sets.
Use forgiving formats for known structured strings when the system can parse them safely.
Use structured formats when precision, error prevention, or compliance is more important than flexibility.
Provide hints adjacent to the relevant field.
Keep placeholders supplemental; visible labels must remain.
Use dynamic validation without punishing users mid-typing.
Use smart defaults and prefills when likely correct, visible, and editable.

选择匹配数据类型的输入方式：有限选项使用选择框/单选框，多选使用复选框，近似范围使用滑块，小数值增量使用步进器，开放文本使用文本框，大型已知集合使用自动完成。
当系统可安全解析时，对已知结构化字符串使用容错格式。
当精度、错误预防或合规性比灵活性更重要时，使用结构化格式。
在相关字段旁提供提示。
占位符仅作为补充；必须保留可见标签。
使用动态验证，不要在用户输入过程中惩罚用户。
仅在可能正确、可见且可编辑时使用智能默认值和预填充。

Feedback and microinteractions

反馈与微交互

Show the result of direct manipulation immediately.
Show progress for operations that take noticeable time.
Use notifications only when they are timely, relevant, and actionable.
Visualize quantitative status when it helps compare, predict, or act.
Keep notification actions minimal and direct.
Use transitions to show continuity, not to slow the task.
Respect reduced-motion settings.

直接操作后立即展示结果。
对耗时操作展示进度。
仅在及时、相关且可操作时使用通知。
当有助于比较、预测或操作时，可视化定量状态。
通知操作保持简洁直接。
使用过渡效果展示连续性，不要拖慢任务进度。
尊重减少动效的设置。

Practical rules

实用规则

Never recommend a component without stating what user task it serves.
Prefer removing a step over making the step prettier.
Do not hide the primary action in a menu, hover-only control, or ambiguous icon.
Do not use a modal when the user must compare, reference, or navigate behind it.
Do not use a wizard when users need nonlinear editing or expert speed.
Do not use cards for data that users need to sort, compare, or bulk-edit by multiple attributes.
Do not use a table for visually rich browsing when image recognition is the primary behavior.
Do not rely on color alone to communicate status or selection.
Do not rearrange controls after the user has learned their location unless the benefit is large and tested.
Do not use placeholder text as a substitute for labels.
Do not block reversible actions with confirmations; provide undo.
Do not auto-advance, auto-submit, or auto-delete without clear feedback and recovery.
Do not expose every possible action at once; reveal advanced actions where context makes them relevant.
Do not make keyboard shortcuts the only way to complete a task.
Do not treat a component library as a complete UX solution; define task-specific behavior and states.

推荐组件时必须说明其服务的用户任务。
优先移除步骤而非美化步骤。
不要将主要操作隐藏在菜单、仅悬停控件或模糊图标后。
当用户必须对比、参考或导航到背后内容时，不要使用模态框。
当用户需要非线性编辑或专家级操作速度时，不要使用向导。
当用户需要按多个属性排序、比较或批量编辑数据时，不要使用卡片。
当图像识别为主要行为时，不要使用表格进行视觉化浏览。
不要仅依赖颜色传达状态或选择。
除非收益巨大且经过测试，否则用户熟悉控件位置后不要重排。
不要用占位符替代标签。
不要用确认阻塞可逆操作；提供撤销功能。
自动前进、自动提交或自动删除时，必须提供清晰反馈和恢复机制。
不要一次性展示所有可能操作；在相关场景下揭示高级操作。
不要将键盘快捷键作为完成任务的唯一方式。
不要将组件库视为完整的UX解决方案；定义任务特定的行为和状态。

Accessibility and inclusion requirements

可访问性与包容性要求

Baseline requirements for every recommendation:

Use semantic HTML or platform-native semantics first.
Provide visible labels for inputs and accessible names for controls.
Ensure keyboard access to all interactive elements.
Define logical focus order and visible focus states.
Trap focus only inside true modals; restore focus to the trigger after closing.
Use appropriate ARIA only when native semantics are insufficient.
Make error messages programmatically associated with fields.
Do not rely on hover-only interactions; provide click/tap/keyboard alternatives.
Do not rely on color alone; pair color with text, icon, shape, or position.
Respect reduced-motion preferences.
Use target sizes appropriate for touch when designing mobile or touch interfaces.
Ensure loading, empty, success, and error states are announced where necessary.
Make disabled controls understandable; when possible, explain why an action is unavailable.
Avoid interaction patterns that require advanced desktop conventions unless the target audience is known to use them.

每个建议的基础要求：

优先使用语义化HTML或平台原生语义。
为输入提供可见标签，为控件提供可访问名称。
确保所有交互元素可通过键盘访问。
定义合理的焦点顺序和可见焦点状态。
仅在真正的模态框内锁定焦点；关闭后将焦点恢复到触发元素。
仅在原生语义不足时使用合适的ARIA。
使错误消息与字段建立程序关联。
不要依赖仅悬停的交互；提供点击/触摸/键盘替代方式。
不要仅依赖颜色；将颜色与文本、图标、形状或位置结合使用。
尊重减少动效的偏好。
设计移动端或触摸界面时，使用适合触摸的目标尺寸。
必要时宣布加载、空状态、成功和错误状态。
使禁用控件易于理解；尽可能解释操作不可用的原因。
避免需要高级桌面约定的交互模式，除非目标受众已知会使用这些模式。

Frontend implementation guidance

前端实现指导

When the output includes implementation guidance, specify:

当输出包含实现指导时，需明确：

Component anatomy

组件结构

Define subparts: root, label, trigger, content, item, action, helper text, error text, icon, badge, overlay, backdrop, footer, and any slots.

定义子部分：根元素、标签、触发器、内容、项、操作、辅助文本、错误文本、图标、徽章、覆盖层、背景、页脚及任何插槽。

States

状态

For each component, define:

Default
Hover, pressed, selected, expanded, collapsed where applicable
Focus-visible
Disabled and read-only
Loading and skeleton
Empty
Success
Warning
Error
Offline or stale data, if relevant
Reduced-motion alternative

为每个组件定义：

默认状态
适用的悬停、按压、选中、展开、折叠状态
可见焦点状态
禁用和只读状态
加载和骨架屏状态
空状态
成功状态
警告状态
错误状态
离线或过期数据状态（如相关）
减少动效的替代方案

Semantic structure

语义结构

Prefer native elements:

```
button
```
for actions, not clickable
```
div
```
.
```
a
```
for navigation.
```
label
```
associated with inputs.
```
table
```
,
```
thead
```
,
```
tbody
```
,
```
th
```
,
```
td
```
for true tabular data.
```
dialog
```
or accessible modal pattern for true modals.
Lists (
```
ul
```
,
```
ol
```
) for list structures.
Landmarks (
```
nav
```
,
```
main
```
,
```
aside
```
,
```
header
```
,
```
footer
```
) for page regions.

优先使用原生元素：

操作使用
```
button
```
，而非可点击的
```
div
```
。
导航使用
```
a
```
。
输入使用关联的
```
label
```
。
真正的表格数据使用
```
table
```
、
```
thead
```
、
```
tbody
```
、
```
th
```
、
```
td
```
。
真正的模态框使用
```
dialog
```
或可访问的模态框模式。
列表结构使用列表(
```
ul
```
,
```
ol
```
)。
页面区域使用地标(
```
nav
```
,
```
main
```
,
```
aside
```
,
```
header
```
,
```
footer
```
)。

Keyboard behavior

键盘行为

Specify keyboard behavior for menus, dialogs, tabs, accordions, tables, grids, autocompletes, and draggable interactions. Provide a non-drag fallback for drag-and-drop actions.

指定菜单、对话框、标签页、折叠面板、表格、网格、自动完成和拖拽交互的键盘行为。为拖拽操作提供非拖拽替代方案。

Responsive behavior

响应式行为

Define how the component adapts:

Stack or collapse secondary regions.
Preserve primary task and action.
Avoid hiding required navigation with no discoverable substitute.
Keep touch targets large enough.
Preserve state across viewport changes.

定义组件的适配方式：

堆叠或折叠次要区域。
保留核心任务和操作。
避免隐藏必要导航且无可发现的替代方式。
保持触摸目标足够大。
在视口变化时保留状态。

Design-system integration

设计系统集成

Reuse existing tokens for spacing, color, typography, elevation, radius, and motion.
Create variants only for meaningful behavioral or semantic differences.
Avoid one-off styling overrides that change component meaning.
Document content limits, truncation, wrapping, and long/empty values.
Document when a component should not be used.

复用现有间距、颜色、排版、层级、圆角和动效的令牌。
仅为有意义的行为或语义差异创建变体。
避免改变组件含义的一次性样式覆盖。
记录内容限制、截断、换行和长/空值处理方式。
记录组件不适用的场景。

Performance and maintainability

性能与可维护性

Use virtualization only when needed and when accessibility/position recovery are handled.
Avoid infinite loading without a way to recover position or reach footer content.
Avoid excessive animations and layout shifts.
Keep expensive data visualizations and dashboards progressively loaded.
Make loading states useful: show stable regions first and prioritize readable content.

仅在需要且处理好可访问性/位置恢复时使用虚拟化。
避免无限加载且无法恢复位置或到达页脚内容。
避免过多动画和布局偏移。
渐进式加载高成本的数据可视化和仪表盘。
让加载状态更有用：先展示稳定区域，优先加载可读内容。

Quality checklist

质量检查清单

Before finalizing a recommendation, verify:

The user task is explicit.
The recommended pattern fits the task, data shape, user skill, platform, and risk.
The primary action is clear and not competing with equal-weight actions.
Navigation and escape routes are visible.
State changes have immediate, understandable feedback.
Empty, loading, error, success, and disabled states are defined.
Destructive or costly actions have appropriate prevention or recovery.
Forms minimize input, show labels, provide hints, validate helpfully, and recover gracefully.
Components are keyboard accessible and screen-reader understandable.
Responsive behavior preserves the primary task.
The recommendation can be implemented with reusable components and tokens.
Tradeoffs and alternatives are explained.

Use the full checklists in references/checklists.md.

最终确定建议前，验证以下内容：

用户任务明确。
推荐模式匹配任务、数据形态、用户技能、平台和风险。
主要操作清晰，无与同等权重操作的竞争。
导航和退出路径可见。
状态变化有即时、可理解的反馈。
定义了空状态、加载状态、错误状态、成功状态和禁用状态。
破坏性或高成本操作有适当的预防或恢复机制。
表单最小化输入、展示标签、提供提示、友好验证且恢复顺畅。
组件可通过键盘访问且屏幕阅读器可理解。
响应式行为保留核心任务。
建议可通过复用组件和令牌实现。
解释了权衡点和备选方案。

查看 references/checklists.md 获取完整检查清单。

Common mistakes to avoid

需避免的常见错误

Designing from component preference instead of user task.
Treating the home page or dashboard as a catch-all.
Overusing modals for complex tasks.
Hiding important actions behind hover-only tools.
Making every action visually primary.
Choosing cards when users need comparison.
Choosing tables when users need visual browsing.
Using a wizard for expert workflows.
Using confirmation dialogs for routine reversible actions.
Using clever icons without labels for unfamiliar actions.
Using skeletons/spinners without preserving layout or showing progress.
Forgetting keyboard and focus behavior.
Creating one-off components that bypass the design system.
Optimizing for novelty at the expense of familiar interaction.

See references/anti-patterns.md for the full anti-pattern list.

从组件偏好而非用户任务出发进行设计。
将首页或仪表盘视为万能容器。
过度为复杂任务使用模态框。
将重要操作隐藏在仅悬停工具后。
让所有操作在视觉上都成为主要操作。
用户需要比较时选择卡片。
用户需要视觉浏览时选择表格。
为专家工作流使用向导。
为常规可逆操作使用确认对话框。
对陌生操作使用无标签的花哨图标。
使用骨架屏/加载器但不保留布局或展示进度。
忘记键盘和焦点行为。
创建绕过设计系统的一次性组件。
为了新颖性牺牲熟悉的交互方式。

查看 references/anti-patterns.md 获取完整反模式列表。

How to explain recommendations to the user

如何向用户解释建议

Explain in terms of:

User task: “Users need to compare rows by status and date, so a table is stronger than cards.”
Cognitive load: “This keeps the next step visible and avoids making users remember what they selected.”
Context preservation: “A split view keeps the list visible while details change.”
Safety: “Undo is better than a confirmation here because the action is reversible and frequent.”
Accessibility: “The action must be reachable by keyboard and not depend on hover.”
Implementation: “This can reuse the existing table component with added empty/error/loading states.”

Avoid saying “it looks better” unless the visual change directly improves hierarchy, readability, affordance, or accessibility.

从以下角度解释：

用户任务：“用户需要按状态和日期比较行数据，因此表格比卡片更合适。”
认知负荷：“这样可以保持下一步操作可见，避免用户记住所选内容。”
上下文保留：“分栏视图在详情变化时保持列表可见。”
安全性：“此处使用撤销比确认更好，因为操作可逆且频繁。”
可访问性：“操作必须可通过键盘访问，不能依赖悬停。”
实现：“这可以复用现有表格组件，添加空/错误/加载状态即可。”

除非视觉变化直接改善层级、可读性、可交互性或可访问性，否则不要说“看起来更好”。

interaction-patterns-components

Original

Translation

Interaction Patterns Components

交互模式与组件

Purpose

用途

When to use this skill

适用场景

When not to use this skill

不适用于场景

Core principles

核心原则

1. Start with people, goals, and context

1. 从用户、目标与场景出发

2. Treat interaction as a conversation

2. 将交互视为对话

3. Choose the simplest pattern that preserves context

3. 选择能保留上下文的最简模式

4. Preserve wayfinding

4. 保留寻路能力

5. Let information structure drive layout

5. 让信息结构驱动布局

6. Match the pattern to the data and task

6. 模式匹配数据与任务

7. Make actions safe

7. 确保操作安全

8. Design for interruption, re-entry, and repetition

8. 为中断、重新进入和重复操作设计

9. Make forms short, purposeful, and forgiving

9. 让表单简短、有针对性且容错

10. Build patterns as reusable systems

10. 将模式构建为可复用系统

Default recommendations

默认建议

Required user questions

需向用户询问的问题

Workflow

工作流程

A. Critiquing existing UI

A. 现有UI评估

Overall diagnosis

整体诊断

Highest-impact fixes

最高优先级修复

Component-level notes

组件层面说明

Accessibility and implementation notes

可访问性与实现说明

Tradeoffs

权衡点

B. Creating or improving a design

B. 设计创建或优化

Recommended pattern

推荐模式

Structure

结构

Component behavior

组件行为

Accessibility and frontend notes

可访问性与前端说明

Alternatives considered

备选方案考量

Decision framework

决策框架

Screen and flow patterns

屏幕与流程模式

Navigation patterns

导航模式

List and content patterns

列表与内容模式

Actions and commands

操作与命令

Forms and controls

表单与控件

Feedback and microinteractions

反馈与微交互

Practical rules

实用规则

Accessibility and inclusion requirements