跳到主要内容
Termlib

布局模式 · 操作流程

看板

Kanban Board

也叫：看板视图、任务看板、泳道看板、Kanban、Board View

按状态把任务分成几列并排摆放，每个任务是一张小卡片，把卡片拖到另一列就改变了它的状态。

点「标注」看每个部分叫什么，点「反例」看最常见的错误用法。

怎么跟 AI 说

改成你的业务内容再发

用看板（Kanban）布局管理任务：横向四列「待处理、进行中、待验收、已完成」，每列宽 280px、浅灰底，列头显示列名和卡片数量；卡片白底，显示标题、负责人头像、截止日期和优先级标签。卡片可以在列内和列之间拖拽，拖动时显示放置占位，松手后立即保存；每列底部有「+ 添加任务」。

发给

01判断

你的内容是这样吗？

对照两列，确认看板是不是你要找的。

符合这些情况，用看板

  • 每条工作项都处于某个明确状态，并且会在几个状态之间流转时
  • 团队需要一眼看出各环节堆积了多少任务时
  • 工作项数量中等（几十张），每张只需显示标题和三四项关键信息时
  • 用户希望通过拖拽直接改变状态时

是这些情况，换成别的

  • 条目数量多（上百条）、需要按多个字段筛选、排序和比较时

    改用数据表

  • 条目没有状态流转、只是静态分组展示时

  • 状态超过七八个、横向要滚很远才能看全时

  • 主要在手机上操作、屏幕放不下多列时

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    卡片上堆满字段，一列只能放下两三张

    下面的线框画的就是这种情况，红色虚线框是出问题的地方。

  2. 02

    只能靠拖拽改状态，没有其他入口，键盘和手机用户无法操作

  3. 03

    拖到另一列后没有保存，刷新页面卡片又回到原处

反例示意，对应第 01 条

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

横向并排若干状态列，每列由列头（状态名和数量）和纵向堆叠的任务卡片组成，卡片可在列之间拖动。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1横向并排几列，每列顶部是状态名和数字
  2. 2每列里竖着堆叠多张小卡片
  3. 3卡片上有头像、日期和标签

04解释

详细解释

看板在软件里最常见的形式是 Trello、Jira、飞书项目那种任务板：横向并排几列，比如「待处理、进行中、待验收、已完成」，每列顶部是列名和卡片数量，下面是一叠任务卡片。卡片上显示标题、负责人头像、截止日期和优先级标签。

它最大的特点是「位置即状态」：卡片在哪一列就是什么状态，把卡片从「进行中」拖到「已完成」就完成了状态更新。团队一眼就能看出哪个环节堆积了太多任务。

它适合数量不太多（几十张）、状态流转清晰的工作项。任务多到几百条、需要按多个字段筛选比较时，应该切换成数据表，很多产品会同时提供「看板视图」和「表格视图」。列数一般控制在三到六列，太多了横向要滚很远。

开发者信息
术语 ID
layout-kanban
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • :is(main, [class*="main" i]):has([class*="kanban" i], [class*="board" i]:not([class*="dashboard" i]) > [class*="column" i] + [class*="column" i])
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • kanban
  • kanban-board
  • board
  • task-board
  • scrum-board
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • Kanban
  • KanbanBoard
  • Board
  • TaskBoard
结构特征

根据元素的排列和样式算出来的特征，只用来加分，单独不判定。

  • 重复子项
  • 网格排列
优先级
1 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30