第二组 · 强对比方案(6 套)

上一组反馈「不够明显」。本组加大触控面积、始终展示两条工单、强化未选中态的视觉提示(虚线边框、👆 动画、Radio 清单、大 Toggle 等)。← 第一组

索引
设计原则:两条工单信息始终可见、未选中必须有明确「可点击」 affordance、来源类别用大面积色块区分(绿=样本接收,琥珀=生产过程)。

推荐 N1 双色分栏顶栏(整宽可点)

卡片顶部 50/50 分栏:左绿「样本接收」、右琥珀「生产过程」。未选中侧降饱和 + 底部「👆 点击切换」动画;选中侧底部色条 +「当前查看」角标。

✓ 类别与可点击性一眼可见,占用高度适中

N2 双行 Radio 清单

两条工单以列表行始终展示:Radio 圆点 + 类型 + 工单号。未选中行右侧绿色「切换至此」按钮;选中行左侧 4px 色条高亮。

✓ 类似表单单选,学习成本最低
✓ 两条工单信息完整可见

推荐 N3 大开关 Toggle(二选一)

居中 oversized 分段开关,emoji 图标 + 15px 粗体类别名。切换时白底滑块 + 阴影动效,下方显示当前工单号。

✓ 二选一语义最直白

N4 图标宫格(虚线 = 可点)

两个 56px 大图标方块并排:未选中虚线边框 +「点击查看」圆角按钮;选中实线边框 + 整卡染色 + 阴影浮起。

✓ 视觉重量最大,最难被忽略
✗ 垂直空间占用较多

N5 双摘要条 + 切换按钮

顶部提示「本样本有 2 条质检工单,请点击切换」;下方两条摘要 Chip 并排,未选中带绿色「切换」实心按钮。

N6 左导航 + 右预览

左侧固定 200px 导航列列出两条工单(未选中显示「点击」),右侧预览当前选中工单摘要——Master-Detail 模式。

✓ 适合 3 条以上工单扩展
✗ 横向空间占用大