问题分诊看板Issue Triage Board

B 端后台B2B adminAI 工具AI tool看板Board工作台Workspace工作台Workbench卡片流Card flow密集Dense专业Professional科技Technical
问题分诊
搜索问题

待分诊 3

导出文件缺少状态列P1 · 数据导出
移动端筛选无法清空P2 · 搜索

处理中 2

权限变更未写入日志P0 · 阻塞发布
批量操作结果不完整P1 · 任务中心

待验证 1

空状态按钮焦点丢失P2 · 可访问性

标本可交互,可以切换不同状态。Interactive specimen — switch between the available states.

适用场景Use cases

问题分诊、任务协作、优先级调整问题分诊 · 任务协作 · 优先级调整

关键状态Key states

默认Default加载Loading空结果Empty错误Error

布局结构Structure

  1. 范围和筛选工具栏Scope and filter toolbar
  2. 按阶段分列的看板Stage columns
  3. 紧凑问题卡Compact issue cards
  4. 详情抽屉入口Detail-drawer entry

视觉特征Visual traits

  • 列宽稳定避免拖动抖动Stable column widths prevent drag jitter
  • 卡片只保留分诊所需字段Cards keep only triage fields
  • 阻塞原因直接可见Blockers are visible

实现约束Implementation guardrails

需要做到Do

  • 拖动后立即确认目标状态Confirm the destination after dragging
  • 保留键盘操作路径Keep a keyboard path
  • 空列提示可接受的下一步Give empty columns a useful next step

避免Avoid

  • 把完整问题描述塞进卡片Put the full issue description in each card
  • 仅靠卡片颜色表示优先级Use card color as the only priority cue

AI 风格说明AI design brief

构建一个用于快速分诊问题的横向看板。 适用场景:问题分诊、任务协作、优先级调整。 页面结构:范围和筛选工具栏;按阶段分列的看板;紧凑问题卡;详情抽屉入口。 视觉特征:列宽稳定避免拖动抖动;卡片只保留分诊所需字段;阻塞原因直接可见。 关键状态:默认、加载、空结果、错误。 需要做到:拖动后立即确认目标状态;保留键盘操作路径;空列提示可接受的下一步。 避免:把完整问题描述塞进卡片;仅靠卡片颜色表示优先级。Build a horizontal issue-triage board for fast sorting. Use cases: Issue triage, Task collaboration, Priority changes. Structure: Scope and filter toolbar; Stage columns; Compact issue cards; Detail-drawer entry. Visual traits: Stable column widths prevent drag jitter; Cards keep only triage fields; Blockers are visible. Key states: Default, Loading, Empty, Error. Do: Confirm the destination after dragging; Keep a keyboard path; Give empty columns a useful next step. Avoid: Put the full issue description in each card; Use card color as the only priority cue.

来源:LearnUI PM 原创示例,MIT License

我的参考集

组合页面参考、知名网站、UI 元素和视觉风格,导出给 AI。

你的下一份设计,从这里开始。

在任意标本旁点击「加入参考」,就能把页面、品牌、组件和风格组合成一份 AI 设计说明。

浏览页面参考

搜索参考库Search the library

输入关键词,搜索所有参考。