质检工单 · 细胞存储 · 同样本多工单 Tab 选型

场景:同一样本编码下存在样本接收与生产过程两条质检工单,需在卡片内切换查看。 下方 6 套方案均可点击交互,请对比哪套最能传达「可切换、类别不同」。

← 索引

V0 现网基线(当前实现)

胶囊 Tab 内嵌序号 + 来源标签 + 工单号 + 状态;未选中时来源与状态均灰化,类别差异不明显。

✗ 未选中 Tab 全灰,样本接收 / 生产过程难以区分
✗ 交互感弱,易被当成静态信息条

V1 分类色保留 + 引导文案 +「点击查看」

渐进改良:保留横向 Tab 布局,未选中仍保留绿/琥珀来源色,并加一行引导 + 未选中 Tab 后缀「点击查看」。

✓ 改动量小,与现网结构最接近
✓ 类别色始终可见
✗ 引导文案熟悉后可能略冗余

推荐 V2 双卡片切换器

两条工单并排展示为可点击卡片,图标 + 大标题区分来源,未选中角标「点击切换」,选中侧渐变高亮。

✓ 可点击性最强,两类工单一眼可辨
✓ 移动端可纵向堆叠
✗ 占用垂直空间略多

V3 流程步骤条(接收 → 生产)

强调业务先后顺序:样本接收在前、生产过程在后,中间箭头连接;未选中步骤提示「点击切换至此工单」。

✓ 传达「同一流程两阶段」的业务语义
✗ 若未来出现 3+ 条工单,横向会拥挤

V4 全宽分段控制器(iOS Segmented)

类似系统分段控件,占满卡片宽度;选中项白底浮起,类型名加粗,下方显示工单号与状态。

✓ 切换控件形态 familiar,点击区域大
✗ 类别色仅体现在选中态文字,未选中时仍偏中性

推荐 V5 左侧色条 + 大标签 Tab

「切换工单:」前缀 + 带左侧竖条(绿=接收、琥珀=生产)的大按钮;未选中显示「点此查看」微提示,选中展示完整工单号与状态。

✓ 类别色条 + 44px 触控高度,可发现性与无障碍兼顾
✓ 信息密度适中,适合 2~3 条工单
✗ 比 V0 略占高度