模拟列表有 6 条(可滚动)时的扫视效果。核心思路:每条卡片的标题栏用更明显的底色标出「这一条从工单号开始」,必要时再配合列表区浅灰底。
怎么看:快速扫一眼,能否立刻数出「第几条」?A 为现网(标题
#fafafa);B 仅把标题栏改为薄荷 #ecfdf5;C 在 B 基础上加列表浅灰底 + 白任务区;D 用
slate 灰标题栏作非薄荷对照。
列表白底 · 任务区 #f8fafc · 标题与任务区色差极弱,多条时易糊在一起。
↓ 区域内可滚动,模拟一屏看不完的 6 条记录
标题栏薄荷浅绿 + 底边 #a7f3d0;列表仍白底。每条「起点」更明显,但卡片之间仍靠 gap 分隔。
↓ 注意标题栏色块是否帮你定位每条工单号
标题 #ecfdf5 · 列表 #f1f5f9 · 任务区改白底 · 卡片轻阴影。标题标起点 + 整卡浮在灰底上。
↓ 标题色块 + 卡片外轮廓应最易区分第 1 / 2 / 3 条
标题 #f1f5f9 · 与列表底同色系的灰调标题栏,分隔感有提升但品牌感弱于 B/C。
↓ 与 C 对比,感受薄荷标题是否更利于快速定位