N3.04.3text backing plate设计研究

背景复杂时需要衬底

别名: 文字衬底 · 对比底板 · scrim · contrast plate

概念解释

白字直接叠在车间的百叶窗、植物和电缆上,笔画会和背景里每一条真的边抢身份:哪一笔是「日」的中间横,哪一笔是窗框。衬底(backing plate)是垫在字形后面的一块对比表面——实心板、胶囊、薄纱——把文字从复杂背景里切出来。它解决的是对比和拥挤,不是把界面做成半透明风格。

机制

阅读依赖字形与紧邻像素的亮度差,也依赖把笔画从相邻结构里分出来。复杂背景同时打这两条:局部对比随机翻转(白字落到白墙上一截就断),背景边缘以和笔画相近的空间频率挤进拥挤区,诱发把窗框读成笔画的错觉结合。空间界面的背景还在动:人一转头,百叶窗的条纹在字后面扫过,对比按帧刷新,刚刚读到的结构被下一帧的条纹改写。

衬底把字形周围换成一块统计上平坦、对比受控的邻域。它不必很大:覆盖下行长和上下各一点行距就够切断最邻近的背景边。没有这块邻域,加大字号也救不了——更大的字仍然架在条纹上。

怎么研究

同一段字,背景从纯色、中等照片到高对比条纹,衬底从无、半透明纱到不透明板。测朗读速度、错误,以及眼动在字上的驻留是否被背景边缘拉开。

自变量:背景空间频率、衬底不透明度与垫出宽度、文字与背景的平均对比。 因变量:朗读速度、把背景结构误认为笔画的次数、注视是否被背景边吸走。

用桌面显示器贴一张静图,背景不会随头动扫过字形,会低估衬底的价值。要在头显里用真实或立体的复杂场景,并允许转头。

边界

背景已经是一块均匀的墙或天空时,衬底主要在加一块视觉噪声,收益接近零,还可能显得「多了一层皮」。深色光学透视里,衬底如果画成黑的,会直接透出后面的现实,白字仍落在复杂场景上——那是器件光学,不是衬底形式选错这么简单,但验收时必须用真机。单字图标靠外形辨认,对衬底的依赖低于正文。高对比描边(halo)是衬底的窄版本,能挡最贴边的背景,挡不住字内部被条纹穿过。

怎么落地

  • 正文和需要核对的数字,默认垫一块足够宽的不透明或高不透明度衬底,不要先做「无底板的空间感」。
  • 衬底的垫出至少覆盖一行的上下行距,左右超出行长少许,避免背景边从字间钻进来。
  • 走查选背景最花的真实角落(百叶窗、书架、树叶),不要只在灰墙上截图。
  • 验证:在目标场景转头朗读。无衬底时错误若落在与背景条纹同方向的笔画上,加上衬底后这类错误应下降。若加上之后仍错,再查字号或倾斜,不先加更花的描边。

延伸

  • 同组N3.04.1 倾斜角度显著降低可读性 · N3.04.2 文字需始终面向用户 · N3.04.4 最小可读字号由角分辨率与像素密度共同决定 · N3.04.5 亚像素渲染在双眼与运动条件下失效 · N3.04.6 行长与行距按角度设定,不按物理长度 · N3.04.7 随头动抖动的文字比静止的文字更难读
  • 相邻N3.02 界面距离 · N3.07 视场边缘的内容布置
  • 站内检索text backing plate · contrast plate · scrim

同组卡片

快捷操作

分享

分享当前页面

ios_share

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