U5.05.1Highlighting works through contrast with the rest, not through its own intensity设计

高亮的有效性来自与其余元素的对比而非其自身强度

别名: 对比高亮 · 突出策略

概念解释

让一个元素"被突出"的不是它本身的亮度、饱和度或粗细,而是它与周围元素的差距:在一群高饱和线条里再加粗一条,谁也注意不到;在一片浅灰里保持原色的那一条,一眼锁定。高亮是关系属性,不是元素属性——这个认识决定了下面所有高亮手法的选择方向。

机制

视觉系统对"突出"的判断是相对计算:每个元素的显著度由它与局部环境的对比决定,同类元素整体增强时,它们之间的相对关系不变,突出效果为零。这解释了高亮失效的第一种形态——"全员高亮"(给重点全部上强色,结果图面只是变得更吵);也解释了第二种——"背景同涨"(加强目标时把背景也调鲜艳,对比度反而被压缩)。有效的高亮只做一件事:拉开目标与背景的差距,无论手段是抬高目标、压低背景还是两者并举,方向都是扩大差距本身。

边界

对比策略依赖背景的存在:图上元素极少(两三条线)时,压缩背景的空间有限,适度增强目标更直接;动态场景里,运动本身就是最强的对比源(动画高亮不需要改变静态权重)。对比也不只属于颜色维度——形状、注记、位置都能参与拉开差距,颜色只是最常用的那一个。任何高亮手段都要在目标显示条件下复检:深色模式、投影、灰度下对比关系可能反转。

怎么落地

  • 高亮前先看背景:目标周围已经很强的元素先压低,再考虑要不要增强目标。
  • 增强目标时只动一个维度(明度或线宽),全维度同时加强会把目标推出色板体系。
  • 验证:眯眼看图——目标是否第一眼浮出;再请读者说出"你在图里最先看到什么",答案与目标一致即对比成立。

延伸

  • 同组U5.05.2 弱化其余元素比加强目标元素更少破坏整体观感 · U5.05.3 被弱化的元素仍需保持可读的最低对比度 · U5.05.4 同时高亮过多项等于没有高亮 · U5.05.5 高亮依据需说明,否则会被读作数据自身的属性
  • 相邻U5.03.3 参考线的视觉权重应低于数据元素而高于网格线 · U5.04.2 按值排序使排名与极值无需搜索即可读出
  • 站内检索highlighting contrast · visual salience · emphasis strategy

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/U5.05.1