U11.04.4In-chart text minimum size is judged by final rendered size, not the design file设计

图中文字的最小字号需按最终呈现尺寸判定而非设计稿

别名: 最小字号 · 呈现尺寸

概念解释

设计稿上 14px 的轴标签在 2000 像素宽的设计画布中清晰可读,但当这张图表被缩小到仪表盘的 300 像素卡片或打印成 A4 上的半栏宽时,同样的文字只有几个物理像素——不可读。字号的可读性由"物理呈现尺寸"决定(最终介质上的实际高度),而图表在生命周期中会被缩放(响应式布局、截图嵌入、投影、打印),设计稿尺寸只是它一生中最大的一次呈现。字号标准必须按最小的真实使用场景校验。

机制

呈现尺寸机制的根源是图表与网页文字的缩放行为差异:HTML 文字会随布局与缩放重排,而图表常作为整体被等比缩放(SVG 缩放、位图缩放、画布缩放),内部文字随图形一起变小且不会重排换行——设计稿的"够大"在大屏上成立,缩放后的小图上文字是等比缩小的受害者。可读性的物理门槛包括:字符高度的可辨下限(大约对应实际呈现中的 9-12px,低视力用户需要 2-3 倍)、以及投影距离下的视角要求(会议室后排观众的实际视角可能只有设计者的四分之一)。实践准则:为图表定义"最小使用宽度"(它会被放进的最小容器),按该宽度校验所有文字的实际呈现字号,轴标签与数据标签不低于实际呈现 11-12px 的等效值,重要的数据标签在缩放后不可读时改为悬浮或精选标注而非全部缩小。矢量格式(SVG)的缩放不损失文字清晰度但仍损失尺寸,"矢量"解决的是清晰度问题,不解决"太小"问题。

边界

字号与信息量的张力:数据标签全标注与最小字号经常冲突(点太多标不完),解法是标注分层(关键点标注、其余悬浮)而非全局缩小字号。固定物理尺寸的场景(打印报告、会议海报)可以精确校验(字号换算成毫米),响应式场景则按断点分别校验每个档位。另一个边界是用户的缩放权利:图表内文字如果是真文本(SVG text、HTML),用户放大浏览器时可以变大——位图文字(导出的 PNG)没有这个能力,这也是交互页面优先矢量渲染的可访问性理由之一。

怎么落地

  • 为图表登记"最小使用宽度",在该宽度下逐一核对文字的实际呈现字号(可用开发工具检查)。
  • 轴标签与数据标签在最小场景的实际字号不低于 11px 等效;达不到时改为悬浮/精选标注而非缩小字体。
  • 截图导出与嵌入他人文档前,在目标尺寸下预览一遍可读性。
  • 验证:把图表放进它最小的真实容器(卡片、半屏)查看文字;需要眯眼或放大才能读出轴标签即不达标。

延伸

  • 同组U11.04.1 数据图元与背景的对比度需达到可辨阈值 · U11.04.2 图元对背景的对比与相邻类别之间的对比是两项独立要求 · U11.04.3 线条过细在低对比度屏幕与投影下会消失 · U11.04.5 可交互图元的尺寸下限还受触摸目标要求约束
  • 相邻U11.04.3 线条过细在低对比度屏幕与投影下会消失 · U7.06.5 当前生效的时间范围需与图表同屏可见
  • 站内检索minimum font size · rendered size · responsive chart

同组卡片

快捷操作

分享

分享当前页面

ios_share

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