09 · 强化标题栏背景(6 条纵向对比)

模拟列表有 6 条(可滚动)时的扫视效果。核心思路:每条卡片的标题栏用更明显的底色标出「这一条从工单号开始」,必要时再配合列表区浅灰底。

← 基线 索引 总览 →

标题栏背景 · 四方案纵向对比

质检工单
我的质检任务

怎么看:快速扫一眼,能否立刻数出「第几条」?A 为现网(标题 #fafafa);B 仅把标题栏改为薄荷 #ecfdf5;C 在 B 基础上加列表浅灰底 + 白任务区;D 用 slate 灰标题栏作非薄荷对照。

A · 现网基线(标题栏 #fafafa)

列表白底 · 任务区 #f8fafc · 标题与任务区色差极弱,多条时易糊在一起。

对照组

↓ 区域内可滚动,模拟一屏看不完的 6 条记录

B · 仅强化标题栏(薄荷 #ecfdf5)

标题栏薄荷浅绿 + 底边 #a7f3d0;列表仍白底。每条「起点」更明显,但卡片之间仍靠 gap 分隔。

标题栏方案

↓ 注意标题栏色块是否帮你定位每条工单号

C · 薄荷标题栏 + 列表浅灰底 + 轻阴影(推荐)

标题 #ecfdf5 · 列表 #f1f5f9 · 任务区改白底 · 卡片轻阴影。标题标起点 + 整卡浮在灰底上。

推荐组合

↓ 标题色块 + 卡片外轮廓应最易区分第 1 / 2 / 3 条

D · Slate 标题栏 + 列表浅灰底(非薄荷对照)

标题 #f1f5f9 · 与列表底同色系的灰调标题栏,分隔感有提升但品牌感弱于 B/C。

灰调对照

↓ 与 C 对比,感受薄荷标题是否更利于快速定位