U11.04.3Too-thin lines vanish on low-contrast screens and projectors设计

线条过细在低对比度屏幕与投影下会消失

别名: 线宽 · 描边粗细

概念解释

设计稿上清晰的 1 像素折线,投影到大屏幕上可能只剩断续的虚影,低分辨率屏幕上抗锯齿把它晕成一道浅灰。线条的可见性是线宽与对比度的乘积效应:两者都达标才可见,任何一项被削弱(投影降低对比、缩放降低像素密度),细线最先消失。而消失的往往正是数据线本身——被"美化"为细线的折线恰是图表的信息主体。

机制

细线消失的机制是渲染的物理下限:线条的视觉存在需要至少覆盖可感知的像素宽度并有足够的墨量(对比度 × 宽度积分),1 像素线在 HiDPI 设计稿上看起来精致,映射到低 DPI 投影仪时不足一个物理像素,抗锯齿把它摊薄成半透明灰。低视力用户对细线的分辨能力进一步降低——细线对他们是"时隐时现"。设计含义是数据线条应有最低粗细标准(常见建议 2 像素起,关键序列更粗),细线条留给辅助元素(网格线)。缩放场景是另一重考验:图表被缩小嵌入仪表盘卡片或文档时,线宽按比例缩小,设计时应按"最小呈现尺寸"而非"最大设计尺寸"检验线宽。多线密集图的线宽还有资源分配的含义:最粗的线应属于最重要的序列(延伸至同组的层级思想),全部等粗在拥挤图中等于全部不重要。

边界

线宽与信息密度的权衡:密密麻麻的多线图加粗所有线会互相糊成一片,此时加粗重点线 + 弱化次要线(更细更淡)的层级策略优于整体加粗。线宽与视觉通道的判读(延伸至基础知识的位置与长度通道)不冲突——线的位置承载信息,宽度只是可见性保障,加粗不改变位置判读的精度。触屏场景的线宽还与触控目标相交(延伸至同组的触摸目标):线的点击命中区(hit area)应与视觉线宽解耦——视觉 2 像素的线可配一个隐形的 20 像素命中带,两者独立设置。

怎么落地

  • 数据线最低 2 像素(关键序列 2.5-3 像素),网格线等辅助线才使用 1 像素与低对比度。
  • 按"最小呈现尺寸"检验:把图表缩小到最小的使用场景尺寸(仪表盘卡片、移动端半屏)检查线条是否仍可见。
  • 密集多线图使用层级粗细:重点序列粗、次要序列细淡,配合高亮交互。
  • 验证:在投影或低分辨率外接屏上查看图表,数据线是否连续可见;出现断续或消失即线宽不达标。

延伸

  • 同组U11.04.1 数据图元与背景的对比度需达到可辨阈值 · U11.04.2 图元对背景的对比与相邻类别之间的对比是两项独立要求 · U11.04.4 图中文字的最小字号需按最终呈现尺寸判定而非设计稿 · U11.04.5 可交互图元的尺寸下限还受触摸目标要求约束
  • 相邻U11.04.1 数据图元与背景的对比度需达到可辨阈值 · U2.03.3 线条数量超过少数条即难以追踪
  • 站内检索line width · stroke weight · chart legibility

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/U11.04.3