interaction-patterns

交互模式

可编码的 UI 交互模式，可避免常见的 UX 问题。涵盖加载状态、内容分页、渐进式披露、叠加层、拖放、标签页溢出和通知系统，并内置无障碍支持。

快速参考

规则	文件	影响	使用场景
骨架屏加载	rules/interaction-skeleton-loading.md	HIGH	为异步数据提供与内容形状相符的占位符
无限滚动	rules/interaction-infinite-scroll.md	CRITICAL	支持无障碍访问和键盘操作的分页内容
渐进式披露	rules/interaction-progressive-disclosure.md	HIGH	根据用户需求逐步呈现复杂内容
模态框 / 抽屉 / 内联	rules/interaction-modal-drawer-inline.md	HIGH	选择叠加层或内联显示模式
拖放	rules/interaction-drag-drop.md	CRITICAL	支持键盘替代操作的可重排列表
标签页溢出	rules/interaction-tabs-overflow.md	MEDIUM	包含 7 个或更多项目或动态标签页的标签栏
Toast 通知	rules/interaction-toast-notifications.md	HIGH	成功 / 错误反馈和通知堆叠
认知负荷阈值	rules/interaction-cognitive-load-thresholds.md	HIGH	通过数值限制落实米勒定律、希克定律和多尔蒂阈值
表单 UX	rules/interaction-form-ux.md	HIGH	点击目标大小、标签位置、错误预防和智能默认值
劝导伦理	rules/interaction-persuasion-ethics.md	HIGH	检测暗黑模式并运用符合伦理的参与原则

总计：6 个类别中的 10 条规则

决策表 — 加载状态

场景	模式	原因
列表 / 卡片内容加载	骨架屏	与内容形状相符，降低感知延迟
表单提交	加载指示器	状态不确定、持续时间较短的操作
文件上传	进度条	总量已知、可衡量的操作
图片加载	模糊占位符	避免布局偏移，逐步呈现内容
路由切换	骨架屏	数据加载时保留布局
后台同步	无 / 轻量指示器	不阻塞操作、优先级低

快速入门

骨架屏加载

function CardSkeleton() {
  return (
    <div className="animate-pulse space-y-3">
      <div className="h-48 w-full rounded-lg bg-muted" />
      <div className="h-4 w-3/4 rounded bg-muted" />
      <div className="h-4 w-1/2 rounded bg-muted" />
    </div>
  )
}

function CardList({ items, isLoading }: { items: Item[]; isLoading: boolean }) {
  if (isLoading) {
    return (
      <div className="grid grid-cols-3 gap-4">
        {Array.from({ length: 6 }).map((_, i) => (
          <CardSkeleton key={i} />
        ))}
      </div>
    )
  }
  return (
    <div className="grid grid-cols-3 gap-4">
      {items.map((item) => <Card key={item.id} item={item} />)}
    </div>
  )
}

支持无障碍访问的无限滚动

function InfiniteList({ fetchNextPage, hasNextPage, items }: Props) {
  const sentinelRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => { if (entry.isIntersecting && hasNextPage) fetchNextPage() },
      { rootMargin: "200px" }
    )
    if (sentinelRef.current) observer.observe(sentinelRef.current)
    return () => observer.disconnect()
  }, [fetchNextPage, hasNextPage])

  return (
    <div role="feed" aria-busy={isFetching}>
      {items.map((item) => (
        <article key={item.id} aria-posinset={item.index} aria-setsize={-1}>
          <ItemCard item={item} />
        </article>
      ))}
      <div ref={sentinelRef} />
      {hasNextPage && (
        <button onClick={() => fetchNextPage()}>Load more items</button>
      )}
      <div aria-live="polite" className="sr-only">
        {`Showing ${items.length} items`}
      </div>
    </div>
  )
}

规则详情

骨架屏加载

与最终布局相符、形状贴合内容的占位符。列表、卡片和文本块应使用骨架屏。

加载：rules/interaction-skeleton-loading.md

无限滚动

支持无障碍访问的无限滚动，包含 IntersectionObserver、屏幕阅读器播报和“加载更多”备用方案。

加载：rules/interaction-infinite-scroll.md

渐进式披露

逐步呈现复杂内容：工具提示、手风琴、向导、上下文面板。

加载：rules/interaction-progressive-disclosure.md

模态框 / 抽屉 / 内联

选择合适的叠加模式：确认操作使用模态框，详情视图使用抽屉，简单切换使用内联模式。

加载：rules/interaction-modal-drawer-inline.md

拖放

使用 @dnd-kit/core 实现拖放，并且必须提供键盘替代操作。

加载：rules/interaction-drag-drop.md

标签页溢出

为动态或数量较多的标签页提供可滚动标签栏和溢出菜单。

加载：rules/interaction-tabs-overflow.md

Toast 通知

带有 ARIA 角色并支持堆叠的定位式自动消失通知。

加载：rules/interaction-toast-notifications.md

认知负荷阈值

米勒定律（每组最多 7 个项目）、希克定律（最多 1 个主要 CTA）和多尔蒂阈值（400ms 反馈），均设有明确且可计数的限制。

加载：rules/interaction-cognitive-load-thresholds.md

表单 UX

符合菲茨定律的触控目标（移动端 44px）、顶部对齐的标签、通过仅在失焦时验证实现防错设计，以及智能默认值。

加载：rules/interaction-form-ux.md

说服伦理

13 个需要识别并拒绝的暗黑模式危险信号、Hook Model 伦理测试（知情、可撤销、对用户有益），以及符合欧盟《数字服务法案》第 25 条的要求。

加载：rules/interaction-persuasion-ethics.md

核心原则

1. 键盘操作对等 — 每种鼠标交互都必须有对应的键盘操作。不得仅支持拖动或悬停。
2. 骨架屏优于加载指示器 — 加载数据时使用与内容形状相符的占位符；仅在操作进度无法确定时使用加载指示器。
3. 优先使用原生 HTML — 优先选择 <dialog>、<details>、role="feed"，而非自定义实现。
4. 渐进增强 — 功能应尽可能在没有 JS 的情况下正常运行，然后再通过交互增强。
5. 播报状态变化 — 使用 aria-live 区域向屏幕阅读器播报动态内容变化。
6. 尊重滚动位置 — 返回导航时必须恢复滚动位置；无限滚动不得让用户丢失当前位置。

反模式（禁止）

• 加载内容时使用加载指示器 — 加载指示器不提供空间提示。应使用与内容形状相符的骨架屏。
• 无限滚动但不提供“加载更多” — 屏幕阅读器和键盘用户无法访问页脚内容。务必提供按钮作为备用方式。
• 用模态框展示可浏览内容 — 模态框会锁定焦点并阻止交互。浏览内容时应使用抽屉或内联展开。
• 仅支持拖动排序 — 这会排除键盘用户和辅助技术用户。务必提供方向键加 Enter 的替代操作。
• Toast 未设置 ARIA 角色 — 屏幕阅读器无法识别 Toast。成功消息使用 role="status"，错误消息使用 role="alert"。
• 自动关闭错误 Toast — 用户需要时间阅读错误信息。错误通知绝不能自动关闭。

详细文档

资源	描述
references/loading-states-decision-tree.md	用于选择骨架屏、加载指示器或进度条的决策树
references/interaction-pattern-catalog.md	包含 15 种以上交互模式及适用场景指南的目录
references/keyboard-interaction-matrix.md	所有交互模式的键盘快捷键矩阵（WAI-ARIA APG）

相关技能

• ork:ui-components — shadcn/ui 组件模式和 CVA 变体
• ork:animation-motion-design — Motion 库和 View Transitions API
• ork:accessibility — WCAG 合规、ARIA 模式、屏幕阅读器支持
• ork:responsive-patterns — 响应式布局和容器查询模式
• ork:performance — Core Web Vitals 和运行时性能优化