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