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

针对 QcWorkOrderSampleGroup.vue 中「同一样本下样本接收 + 生产过程两条工单」的切换区域。 共两组 HTML 原型,均可点击交互。

问题:用户难以感知卡片内存在两类不同质检工单,且需要点击切换。
独立胶囊 Tab(最新)→ 第二组 · 强对比方案 第一组 · 渐进改良方案

独立胶囊 Tab(现网结构 + 分离间距)

去掉轨道连体容器,每个 Tab 独立白底胶囊,间距 16 / 24 / 32px 三档对比。

A · 轨道内连体

现网对照:panel-pill-tabs__track 绿底容器。

对照

B · 独立胶囊 16px

独立边框 + 来源色,间距 16px。

推荐 最新

C · 独立胶囊 24px

分离感更强。

最新

D · 独立胶囊 32px 放大

最大间距 + 略放大点击区域。

最新

第二组 · 强对比(推荐先看)

加大色块面积、两条工单始终可见、未选中显式「切换/点击」 affordance。

N1 · 双色分栏顶栏

整宽 50/50 绿/琥珀分栏,未选中降饱和 + 👆 动画提示。

推荐 第二组

N2 · 双行 Radio 清单

列表单选形态,未选中行「切换至此」按钮。

第二组

N3 · 大开关 Toggle

居中 oversized 二选一开关,emoji + 粗体类别名。

推荐 第二组

N4 · 图标宫格

56px 大图标 + 虚线边框 = 可点击,视觉重量最大。

第二组

N5 · 双摘要条

提示横幅 + 并排 Chip,未选中绿色「切换」按钮。

第二组

N6 · 左导航 + 右预览

Master-Detail,左侧工单列表始终可见。

第二组

第一组 · 渐进改良

在现有 pill-tab 形态上微调,改动量较小。

V0–V5

胶囊 Tab、双卡片、步骤条、Segmented、色条 Tab 等 6 套。

第一组