U5.05.2Dimming the rest disturbs the whole less than amplifying the target设计

弱化其余元素比加强目标元素更少破坏整体观感

别名: 弱化策略 · 压暗背景

概念解释

拉开目标与背景的差距有两条路:抬高目标,或压低其余。优先选压低——加强目标通常要动用更强色、更粗线甚至描边阴影,这些手段把目标推出原有的编码体系,也让整张图变得更"吵";弱化背景只是均匀地调低已有元素的对比,数据层结构不变,图面的整体质感保得住。

机制

两条路的不对称来自它们对编码的作用方向:加强目标是"加料"——加饱和、加粗、加装饰,而每个维度都与量值编码挂钩(更粗的线被读成更大的量),加料可能篡改目标自身的数据含义,还要重新校验它与色板其余部分的关系。弱化背景是"减料"——统一降低明度与饱和,元素的形状、位置、相对结构原样保留,量值编码不动,读者仍能从弱化元素读出趋势,只是它们退到了次要注意层。观感差异的根源就在这里:加料改变图的构成,减料只改变图的音量。

边界

弱化有下限(下一叶):压得太狠,背景元素从"次要"滑向"消失",读者会误读为数据缺失。背景元素本身很弱(浅色细线)时,压低空间有限,此时再叠加轻微的目标增强。多图并排的仪表盘里,弱化还有页面级收益:单图内加强目标会让这张图在整页里抢戏,弱化则把凸显控制在图的范围里。

怎么落地

  • 高亮的默认实现是背景统一降档:明度上调或下调一至两档、饱和度减半,目标保持原样。
  • 背景压到下限仍不够突出时,再给目标加一个维度的增强,不加第二个。
  • 验证:并排比较"加强目标"与"弱化背景"两个版本的整体观感与目标突显度;弱化版在目标同样清晰的前提下图面更平静,即为正确选择。

延伸

  • 同组U5.05.1 高亮的有效性来自与其余元素的对比而非其自身强度 · U5.05.3 被弱化的元素仍需保持可读的最低对比度 · U5.05.4 同时高亮过多项等于没有高亮 · U5.05.5 高亮依据需说明,否则会被读作数据自身的属性
  • 相邻U4.06.4 品牌色直接进入数据色板会破坏感知均匀性 · U5.03.3 参考线的视觉权重应低于数据元素而高于网格线
  • 站内检索de-emphasis · dimming strategy · focus plus context

同组卡片

快捷操作

分享

分享当前页面

ios_share

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