团队每天跟踪同一批任务时,看板适合看流转、列表适合批量核对、日历适合看排期,切换入口设计得好不好,直接影响成员是否愿意换视角。核心做法是把视图切换做成同一批任务之上的呈现层开关:入口固定在任务页顶部工具条,切换时保留筛选条件、分组维度和当前定位对象。本文按入口形态、状态延续、角色分工、完整示例和验收清单五步展开,适用于团队日常执行跟踪场景;ONES 在任务看板与状态同步上有公开资料可循,可作为承载方向之一。
要点总览(TL;DR)
- 把视图切换做成同一批任务之上的呈现层开关:入口固定在任务页顶部工具条,与筛选、分组并列,用分段控件承载看板、列表、日历三项并高亮当前视图。
- 先定义与视图无关的共享状态(筛选条件、分组维度、定位对象、视图类型),三种视图都从这套状态读取数据,只改变渲染方式。
- 分组维度按视图能力映射:看板按状态列、列表按分组行、日历按日期落位;无法映射的条件给出降级提示,不静默丢弃。
- 定位延续按视图设锚点:看板记任务卡片,列表滚动到同一任务行,日历跳到截止日期所在周,无日期任务进入待排区。
- 上线前用任务集合一致、筛选延续、定位延续、降级反馈、键盘与移动端可用等检查项逐项验收,任一项不通过即阻断。
切换入口放在哪里、长什么样
入口位置决定成员能否形成稳定预期。建议把视图切换固定在任务页顶部工具条,与筛选、分组放在同一区域,形成“先定范围、再定呈现”的操作顺序。放在侧栏或“更多”菜单深处,成员每次切换都要多一次寻找,日常高频动作会被迫降级为低频路径。
控件形态上,用分段控件或标签式切换承载看板、列表、日历三项,当前视图高亮显示。三项数量固定,分段控件能在一眼范围内呈现全部选项,比下拉菜单少一次点击。键盘操作应可用左右方向键在选项间移动并切换,满足不依赖鼠标的操作习惯。
切换即时生效,不弹确认框。视图切换只改变呈现方式,不修改任务数据,没有需要确认的破坏性动作。加载过程中保留旧视图的骨架或占位,新视图数据就绪后再替换,避免整页闪白造成位置感丢失。
移动端屏幕宽度有限,可收为下拉选择或图标组,但三项视图必须完整保留,不因空间压缩而砍掉日历。图标需配文字或可识别的标签,避免仅靠图形让成员猜测含义。桌面与移动端使用同一套视图命名,减少跨设备沟通成本。
切换后如何延续筛选、分组与定位
跨视图丢上下文的根源,是把筛选、分组、定位当成某个视图的私有状态。解决办法是先定义一套与视图无关的共享状态模型,三种视图都从这套模型读取数据,只改变渲染方式。
共享状态至少包含四类字段:筛选条件(字段、运算符、值)、分组维度、当前定位对象(任务标识或日期)、视图类型。筛选条件作为视图无关的共享状态,切换时原样带入,并在入口旁显示已生效条件数量,例如“筛选 2 项”,让成员随时知道当前看到的是全量还是子集。
分组维度需要按视图能力做映射,映射规则要在交互说明中明示,避免成员误以为分组被重置。看板按状态列呈现,列表按分组行呈现,日历按日期落位。当分组维度与视图天然维度冲突时,例如按负责人分组切到日历,可保留筛选、将分组降级为颜色标记或提示“日历按日期呈现,分组暂不生效”,而不是静默丢弃。
定位延续是体验差异最明显的一环。看板记住当前聚焦的任务卡片,切到列表时滚动到同一任务行并短暂高亮,切到日历时跳到该任务截止日期所在周。没有截止日期的任务进入待排区,并在待排区给出数量提示。反向切换同理:从日历某周切回看板,应回到该周内任务所在的状态列。
| 共享状态字段 | 看板 | 列表 | 日历 |
|---|---|---|---|
| 筛选条件 | 原样生效 | 原样生效 | 原样生效 |
| 分组维度 | 按状态分列 | 按分组行展开 | 按日期落位,分组降级为标记或提示 |
| 定位锚点 | 当前任务卡片 | 滚动到同一任务行 | 截止日期所在周 |
| 无日期任务 | 正常显示 | 正常显示 | 进入待排区 |
| 不可映射条件 | 提示并保留筛选 | 提示并保留筛选 | 提示并保留筛选 |
无法映射的条件必须给出降级提示。提示放在视图区域顶部或入口旁,说明哪项条件在当前视图未生效、原因是什么、切回哪个视图可恢复。静默丢弃会让成员基于不完整数据做判断,比多一条提示的代价大得多。
这套共享状态在工具层面需要有承载。ONES 通过统一的需求池、工单与任务看板实时同步状态与信息,任务看板是其任务呈现的组成部分;筛选与分组的具体交互细节需以实际产品为准,设计时可按上述字段模型逐项核验。
角色分工与交付物
视图切换看似一个控件,实际涉及状态定义、渲染实现和验收确认三方。把责任和交付物写清楚,规则才不会停留在口头约定。
| 角色 | 职责 | 交付物 |
|---|---|---|
| 产品/设计 | 定义共享筛选字段、分组映射规则、定位锚点与降级提示文案 | 状态字段表、视图映射表、交互说明 |
| 前端 | 实现共享状态管理,衔接三种视图的渲染与切换,处理加载骨架与键盘操作 | 可运行的切换实现、状态管理说明 |
| 团队负责人或任务管理员 | 确认默认视图、常用筛选组合与分组习惯,提供真实任务样本 | 默认视图与常用筛选组合清单、验收样本 |
| 测试/验收人 | 按验收用例逐项验证切换前后一致性 | 验收用例与检查记录 |
四类交付物中,状态字段表和视图映射表是基础,交互说明描述入口位置、控件形态与提示文案,验收用例覆盖切换、定位、降级和移动端。四份材料齐备后,开发与验收可以并行推进,减少来回确认。
一个完整示例:同一批任务在三种视图间切换
以下为演示情景,用于说明规则如何落地,不代表任何具体产品的实际界面。
团队按“负责人=我、迭代=当前”筛选出 12 条任务,当前在看板视图,聚焦到“接口联调”这张卡片,它位于“进行中”列,截止日期为本周四。
- 切到列表:筛选条件不变,入口旁显示“筛选 2 项”;列表按状态分组,自动滚动到“接口联调”所在行并短暂高亮。可见结果是 12 条任务、同一分组结构、同一任务可见。
- 切到日历:筛选条件不变,日历定位到本周四所在周,“接口联调”落在周四格内;若样本中存在无截止日期的任务,它们进入待排区并显示数量。
- 切回看板:仍停留在“进行中”列并聚焦“接口联调”卡片,筛选条件未丢失,入口旁仍显示“筛选 2 项”。
这个示例验证了三件事:任务集合在切换前后一致,分组映射符合约定,定位对象在每次切换后可见。若第三步回到看板时落在默认列而非原卡片,说明定位锚点未正确保存,属于需要修复的问题。
完成检查:上线前逐项验证
上线前用一份可勾选的清单逐项判断,每项给出通过标准,任一项不通过即阻断上线。
| 检查项 | 通过标准 |
|---|---|
| 任务集合一致 | 同一筛选条件下,三种视图显示的任务总数与任务标识完全一致 |
| 筛选延续 | 切换后筛选条件原样保留,入口旁条件数量显示正确 |
| 分组映射 | 看板按状态分列、列表按分组行、日历按日期落位,与映射表一致 |
| 定位延续 | 切换后原定位任务可见或滚动可达;日历定位到截止日期所在周 |
| 降级反馈 | 不可映射条件与无权限数据均有明确提示,无静默丢弃 |
| 键盘操作 | 可用键盘完成三项视图切换,焦点状态可见 |
| 移动端可用 | 下拉或图标组完整保留三项视图,切换后状态延续规则一致 |
| 加载体验 | 切换过程保留旧视图骨架,无整页闪白 |
清单中的“任务集合一致”和“定位延续”是最容易出问题的两项,建议用真实任务样本在三种视图间往返切换至少两轮再判定通过。全部通过后,这套入口即可作为团队日常执行跟踪的稳定切换方式投入使用。
常见问题
团队只用一个视图也能干活,为什么还要设计视图切换入口?
单一视图能满足一种查看习惯,但日常执行跟踪中不同动作需要不同视角:看流转用看板,批量核对字段用列表,看排期用日历。切换入口的价值在于让成员在同一批任务上换视角,而不用重新筛一遍、重新找位置。如果团队任务量小、查看方式长期固定,可以先只做一种视图,把共享筛选与分组模型搭好,后续增加视图时直接复用。
筛选条件在切换后保留,会不会让成员误以为看到的是全部任务?
保留筛选是避免丢上下文的前提,但需要让成员清楚当前范围。做法是在切换入口旁持续显示已生效条件数量,例如“筛选 2 项”,点击可展开查看具体条件并一键清除。这样切换后成员既不会丢失范围,也不会把子集误当全量。若筛选条件较多,可只显示数量与前两项摘要,其余折叠。
日历视图天然按日期排布,按负责人分组这类条件该怎么处理?
按视图能力做映射,并在交互说明中写明规则。日历的主维度是日期,分组维度无法直接成为行或列时,可降级为颜色标记、图例或卡片上的标签;同时在视图区域顶部提示“日历按日期呈现,分组以颜色标记”。关键是让成员知道分组没有消失,只是呈现方式变了。若某项条件完全无法在日历中体现,保留筛选并给出明确提示,切回看板或列表即可恢复。
没有截止日期的任务切到日历后去哪了?
进入待排区,并在待排区显示任务数量。日历视图依赖日期落位,无日期任务无法放进具体格子,直接隐藏会让任务集合看起来变少,成员可能误判工作量。待排区应支持点击展开任务列表,并允许直接补填日期。切回看板或列表时,这些任务按原有分组正常显示,定位锚点回退到筛选结果的首项或上次定位任务。
视图切换入口上线后,怎么判断设计是否真的没丢上下文?
用真实任务样本在三种视图间往返切换至少两轮,逐项核对:同一筛选下三种视图的任务总数与任务标识一致;切换后筛选条件与条件数量显示正确;原定位任务可见或滚动可达;不可映射条件与无权限数据都有提示。再补一轮键盘操作和移动端验证。任一项不通过就回到共享状态模型排查,通常是定位锚点未保存或分组映射未按约定执行。


















