U5.03.3Reference-line visual weight belongs between data and gridlines设计
参考线的视觉权重应低于数据元素而高于网格线
别名: 视觉权重层级 · 线条层级
概念解释
图里的线条有三个层级,权重必须有序:数据元素最重(最深、最粗),参考线居中(可见但不抢戏),网格线最轻(浅、细、退后)。这个顺序保证注意力的优先级与信息的重要性一致——读者先看到数据,需要时能找到参考线,网格线只在读数时被注意。
机制
视觉权重由明度对比、线宽、饱和度共同决定,读者据此自动分配注意与搜索顺序。层级混乱的两种典型故障:参考线重于数据时,注意被基准吸走,数据反而成了陪衬——读者记住的是"线"而不是"表现";参考线轻于网格线时,它在密集网格中难以定位,基准辅助功能失效。居中权重不是折中,而是让三种线条在注意竞争中获得与职责相称的优先级:数据恒赢,参考线赢网格线,网格线只服务读数。
边界
权重层级要经得起退化条件:灰度打印下颜色不能参与区分,层级只能靠明度与线型维持,设计时就应在灰度下检查三层是否仍可分辨。深色背景的权重要重新校准——同样的灰在深底上显得更亮,参考线可能意外压过数据。层级也不是权重越大越好:参考线的"居中"意味着它不该加粗到与数据竞争,宁可依靠虚线样式与标签来标识自己。
怎么落地
- 设定三层线规范:数据线用主题色与标准粗细;参考线用中性灰加虚线;网格线用最浅一档灰、最细线宽。
- 每次调整主题或深色模式后,重跑三层线的灰度检查。
- 验证:把图转灰度眯眼看——第一眼看到的是数据、第二眼找到参考线、网格线几乎隐身,即为层级正确;任何一层抢戏或消失都需调权重。