折线图不靠颜色怎么读懂？系列标签、线型与数据表的组合

一张红绿折线图在会议屏幕上清楚，打印成灰阶后却只剩两条分不清归属的曲线；用户看到“绿色上升”，仍不知道是哪组业务数据。解决办法不是寻找一组永远安全的颜色，而是让系列名称、线型或标记承担一部分识别任务，再用可读取的数据补充精确数值。

这里用“新增工单”和“已解决工单”的月度趋势完成一套设计。它对应 UI 无障碍检查清单中的具体问题：用户不应只能凭颜色判断自己看到哪条线；需要数值时，也不能被迫从一张图片里猜刻度。

用两条工单曲线明确读者要认出什么

设定一组用于设计讨论的数据：1月至6月，新增工单依次为120、140、135、160、150、170件，已解决工单为110、130、140、145、160、165件。读者要回答两个问题：每个月新增与解决分别是多少，以及哪些月份解决量高于新增量。图表应直接支持这两个判断，不必再加入与任务无关的装饰指标。

这组数值中，3月与5月的解决量超过新增量；6月新增170件、解决165件。它可以说明当月数量差异，却不能直接推出月末积压工单总量，因为还缺少期初积压、重开和取消等口径。标题与图注不要把“本月解决更多”偷换成“积压已清零”。

先把单位写成“件”，横轴明确月份，两条系列使用相同数值轴。不需要通过截断坐标轴制造夸张差异。读者若还需检查图表口径与比例，可继续看数据可视化误导的排查方法；这里重点解决系列识别与等价读取，不重复展开所有图表类型。

给曲线增加不依赖颜色的身份

把“新增工单”设为实线与圆形数据点，“已解决工单”设为虚线与方形数据点。色彩仍可以帮助正常浏览，但只看线型、点形或文字时，也应能分清对象。W3C 的颜色使用说明强调的正是不能仅靠颜色传递信息，而不是要求所有图表都变成黑白。

对于两条线，优先尝试在线尾直接标“新增工单”“已解决工单”，减少读者在曲线与图例之间来回寻找。6月两条线只差5件，端点标签容易挤在一起，可以给标签错开位置并保留清楚的对应引导；不要仅为摆得开就把标签指到错误数据点。

若必须使用图例，图例也要重复线型与标记，不能图中使用虚线方点，图例却只显示一个色块。系列身份需要贯穿默认、悬停、选中和导出状态。高亮一条线时，可以降低其他系列的视觉强度，但不能让它们完全失去名称与当前可见状态。

本例两条线会在相邻月份间交叉，交叉处尤其容易把上方线条的身份读到另一条线上。沿着线追踪时，持续的线型与各月标记能帮助恢复对应关系；只在线尾放一次小色块则不够。也不要为了避开交叉而人为移动数据点。交叉是这组数据本来的关系，应通过标记和标签帮助读取，而不是修改曲线把关系藏起来。

美国 Web 设计系统的可视化实践同样提供了线型、标记与可读取数据相结合的做法。它是可借鉴的关系设计，不意味着复制某组配色就能自动符合所有要求。换成六条甚至十条系列时，应重新考虑筛选、分面小图或减少同时比较的对象，不能无限增加虚线花样。

能分出线型，还要看得见线和标签

虚线太短、线条太细或背景网格过密，都会让额外编码失效。把图缩到实际卡片宽度，确认虚线段仍能辨认，圆点与方点没有被压成相同的小灰块。图例文字也不能只在全尺寸设计稿上清楚，放到手机后却变成需要放大才能阅读的脚注。

必要的曲线、数据点与相邻背景之间，还要按非文本对比要求核对适用条件。这里不能简单把所有网格线一律加深：网格属于辅助定位，若比数据线更抢眼，反而增加识别负担。将必要信息与装饰分开，再逐项检查实际前景和背景组合。

在窄屏下，可以减少横轴标签的显示密度，但不能悄悄删除月份的数据，也不能让读者以为两个月之间的数据不存在。本例只有六个月，先尝试短月份与合理边距；如果再缩仍拥挤，允许切换数据表可能比强塞一张越来越小的图更好。

图表之外，提供同一口径的数据与短结论

图片的 alt 应描述图的任务与主要内容，不能只写“工单图表”，也不必把所有数字挤成一长句。W3C 的复杂图像指南建议提供足够的文字说明，必要时使用结构化数据。对本例，一句结论和一张带表头的数据表能同时服务快速理解与精确查询。

短结论可写：“3月和5月的已解决工单量高于新增量；6月分别为165件和170件。”再提供下表。它描述同一份讨论数据，而不是另一张为了看起来合理临时补出的表。图、表、提示浮层和下载文件都应使用一致来源与口径。

读者可以从表中复核3月多解决5件、5月多解决10件。若业务要展示月度差额，可以增加明确命名的计算列，但不要把差额命名为“剩余积压”。数据表不是为了通过检查而隐藏的一份附件，也可以通过可发现的“查看数据”入口提供给任何需要复制和比较数值的人。

筛选和悬停不能破坏已经建立的对应关系

如果允许点击图例隐藏系列，应清楚表示“已隐藏”，再次操作可以恢复，同时让键盘也能到达。隐藏“已解决工单”后，图旁的短结论是否仍描述两条线，要有一致策略：可以保留完整数据背景但说明当前隐藏，或者按可见范围更新，不应让文字与画面互相矛盾。

悬停浮层中的标题写具体月份，下面写系列名称和数值，不只显示颜色与数字。手机没有鼠标悬停，应提供触控读取或数据表路径；重要数值不能只有把指针恰好移到某个像素上才出现。普通静态图也不必为了“可交互”强行增加复杂控件，能清楚读取就是更重要的目标。

缺失值要和零区分。若某个月没有收到数据，不能为了连线顺滑而填成0，也不能让数据表保留“暂无数据”而曲线画到零点。应根据业务定义决定断开、说明或其他呈现方式，并在图与表中一致表达。此处给出的六个月都为已有数值，不存在需要补值的月份。

把彩色、灰阶与窄屏三个结果放到一起

在 Pixso 画布中保持这十二个数值不变，整理彩色卡片、灰阶检查状态和窄屏布局；旁边放等价数据表与短结论。先检查去掉颜色后还能否认出每条线，再检查缩窄后能否从端点标签返回正确的数据行。

团队可以通过Pixso 的画板与协作功能集中评审这三个结果，将重叠标签、对比不足和错误数值分别标注。设计稿能发现视觉问题，但实现后的表头关系、读屏路径、图例键盘操作与状态更新仍要联合验证，不能仅凭灰阶截图就给整张图表盖上符合性结论。

最后让评审者完成两个任务：指出3月哪一组数量更大，找到6月已解决工单的精确值。不提示“红线”或“绿线”，只使用系列名称。两项任务在彩色、灰阶和数据表中都能得到一致答案，这套图才真正把颜色从唯一的信息通道变成了有用的辅助。